Site settings
Change the appearance of the site to suit your preferences
Combobox
A Combobox is a dropdown list you can search in and filter.
A simple combobox
<Combobox label="Velg et land"> <Item key="no" textValue="Norge">Norge</Item> <Item key="se" textValue="Sverige">Sverige</Item> <Item key="dk" textValue="Danmark">Danmark</Item> <Item key="fi" textValue="Finland">Finland</Item> <Item key="de" textValue="Tyskland">Tyskland</Item> <Item key="fr" textValue="Frankerike">Frankrike</Item> <Item key="nl" textValue="Nederland">Nederland</Item> </Combobox>
A combobox with a label and a description
<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>
A combobox with invalid state and error text, for form validation
<Combobox label="Velg et land" invalid errorText="This field is required"> <Item key="de" textValue="Tyskland">Tyskland</Item> <Item key="fr" textValue="Frankerike">Frankrike</Item> <Item key="nl" textValue="Nederland">Nederland</Item> </Combobox>
A combobox with sections
<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>
A slightly more advanced combobox with controlled input and dynamic 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> ); };
A combobox with icon on the left
<Combobox label="Velg et land" leftIcon={<DepartureFill24Icon/>}> <Item key="no" textValue="Norge">Norge</Item> <Item key="se" textValue="Sverige">Sverige</Item> <Item key="dk" textValue="Danmark">Danmark</Item> <Item key="fi" textValue="Finland">Finland</Item> <Item key="de" textValue="Tyskland">Tyskland</Item> <Item key="fr" textValue="Frankerike">Frankrike</Item> <Item key="nl" textValue="Nederland">Nederland</Item> </Combobox>