Combobox

Combobox-komponenten lar brukeren velge flere alternativ fra en nedtrekksliste.

Kom i gang

Installer

npm i @fremtind/jkl-combobox-react

Bruk

import { Combobox } from "@fremtind/jkl-combobox-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-combobox/combobox.min.css";
import "@fremtind/jkl-icons/icons.min.css";
import "@fremtind/jkl-input-group/input-group.min.css";
import "@fremtind/jkl-tag/tag.min.css";
import "@fremtind/jkl-icon-button/icon-button.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-combobox/combobox";
@use "@fremtind/jkl-icons/icons";
@use "@fremtind/jkl-input-group/input-group";
@use "@fremtind/jkl-tag/tag";
@use "@fremtind/jkl-icon-button/icon-button";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Combobox

const [selectedValues, setSelectedValues] = React.useState([]);

return (
  <Combobox
    id="produsent"
    name="prdusent"
    placeholder="Søk"
    variant="small"
    width="206px"
    label="Velg sykdommer"
    helpLabel={
      false
        ? "Med sykdommer mener vi for eksempel A090 og A090."
        : undefined
    }
    errorLabel={
      false
        ? "Du må velge sykdommer, for eksempel A090 og A150."
        : undefined
    }
    noMatchingOption={
      false ? "Ingen valg matcher søket" : undefined
    }
    items={[
      { value: "a080", label: "A080 - Rotavirusenteritt", tagLabel: "A080" },
      {
        value: "a081",
        label: "A081 - Akutt gastroenteritt som skyldes norovirus",
        tagLabel: "A081",
      },
      { value: "a082", label: "A082 - Adenovirusenteritt", tagLabel: "A082" },
      { value: "a083", label: "A083 - Annen virusenteritt", tagLabel: "A083" },
      {
        value: "a084",
        label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen",
        tagLabel: "A084",
      },
      {
        value: "a085",
        label: "A085 - Annen spesifisert mage-tarminfeksjon",
        tagLabel: "A085",
      },
      {
        value: "a090",
        label:
          "A090 - Annen eller uspesifisert gastroenteritt eller kolitt av infeksiøs årsak",
        tagLabel: "A090",
      },
      {
        value: "a099",
        label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak",
        tagLabel: "A099",
      },
      {
        value: "a150",
        label:
          "A150 - Lungetuberkulose bekreftet ved mikroskopi av sputum med eller uten kultur",
        tagLabel: "A150",
      },
    ]}
    value={selectedValues}
    onChange={setSelectedValues}
  />
);

React API

Her finner du en oversikt over props på komponentene i pakken.