Components

Combobox

En Combobox er nedtrekksliste du kan søke i og filtrere.

Examples

En enkel combobox

<Combobox label="Velg et land">
  <Item key="no">Norge</Item>
  <Item key="se">Sverige</Item>
  <Item key="dk">Danmark</Item>
  <Item key="fi">Finland</Item>
  <Item key="de">Tyskland</Item>
  <Item key="fr">Frankrike</Item>
  <Item key="nl">Nederland</Item>
</Combobox>

En combobox med en label og en beskrivelse

<Combobox label="Velg et land">
  <Item key="no" textValue="Norge">
    <ItemLabel>Norge</ItemLabel>
    <ItemDescription>Europa</ItemDescription>
  </Item>
  <Item key="br" textValue="Brasil">
    <ItemLabel>Brasil</ItemLabel>
    <ItemDescription>Sør-Amerika</ItemDescription>
  </Item>
  <Item key="as" textValue="Australia">
    <ItemLabel>Australia</ItemLabel>
    <ItemDescription>Oseania</ItemDescription>
  </Item>
  <Item key="jp" textValue="Japan">
    <ItemLabel>Japan</ItemLabel>
    <ItemDescription>Asia</ItemDescription>
  </Item>
  <Item key="ca" textValue="Canada">
    <ItemLabel>Canada</ItemLabel>
    <ItemDescription>Nord-Amerika</ItemDescription>
  </Item>
  <Item key="sa" textValue="Sør-Afrika">
    <ItemLabel>Sør-Afrika</ItemLabel>
    <ItemDescription>Afrika</ItemDescription>
  </Item>
</Combobox>

En combobox med seksjoner

<Combobox label="Hvor vil du reise">
  <Section title="Skandinavia">
    <Item key="no">
      🇳🇴 Norge
    </Item>
    <Item key="se">
      🇸🇪 Sverige
    </Item>
    <Item key="dk">
      🇩🇰 Danmark
    </Item>
  </Section>
  <Section title="Asia">
    <Item key="jp">
      🇯🇵 Japan
    </Item>
    <Item key="ch">
      🇨🇳 Kina
    </Item>
    <Item key="in">
      🇮🇳 India
    </Item>
  </Section>
</Combobox>

En litt mer avansert combobox med kontrollert input og dynamisk data

() => {
  const [query, setQuery] = React.useState("");
  const items = [
    {
      title: "Nylige søk",
      children: [
        {
          title: "Oslo S",
          description: "Kollektivknutepunkt i Oslo",
        },
        {
          title: "Sesam Stasjon",
          description: "Barnehagestasjon i Lørenskog",
        },
      ],
    },
    {
      title: "Stopp",
      children: [
        {
          title: "Lillestrøm S",
          description: "Kollektivknutepunkt i Oslo",
        },
        {
          title: "Lillehammer S",
          description: "Kollektivknutepunkt i Innlandet",
        },
      ],
    },
  ];
  return (
    <Combobox
      label="Fra"
      items={items}
      onInputChange={setQuery}
      inputValue={query}
    >
      {(section) => (
        <Section
          key={section.title}
          items={section.children}
          title={section.title}
        >
          {(item) => (
            <Item key={item.title} textValue={item.title}>
              <ItemLabel textStyle="sm" fontWeight="bold">
                {item.title}
              </ItemLabel>
              <ItemDescription textStyle="xs">
                {item.description}
              </ItemDescription>
            </Item>
          )}
        </Section>
      )}
    </Combobox>
  );
};