Dropdown

Bruk Dropdown når

Dropdown og SearchableDropdown er komponenter som lar brukeren utføre ett valg blant mange ulike valgalternativer.

Unngå Dropdown når

• brukeren skal kunne velge flere alternativer samtidig, bruk MultiSelect i stedet
• du har færre enn 5 alternativer, bruk heller RadioButton eller Chip

Retningslinjer

Søkbar dropdown

SearchableDropdown fungerer i utgangspunktet helt likt som Dropdown, men har i tillegg støtte for å filtrere på de tilgjengelige valgmulighetene mens brukeren skriver — nyttig når listen er lang.

NativeDropdown

Hvis du ønsker en veldig lettvektig dropdown, eller en dropdown som bruker det innebygde grensesnittet til brukerens enhet, kan du bruke NativeDropdown. Den er stylet til å følge Entur sin merkevare, men åpner nettleserens egen dropdown når den trykkes på, og vil derfor ikke se lik ut på tvers av enheter. Kan passe godt i små, enkle løsninger eller mobilgrensesnitt.

Eksempler

() => {
    const [selected, setSelected] = React.useState(null);
    return (
      <Dropdown
        label="Velg by"
        items={['Oslo', 'Bergen', 'Trondheim', 'Stavanger']}
        selectedItem={selected}
        onChange={setSelected}
      />
    );
  }

() => {
    const [selected, setSelected] = React.useState(null);
    return (
      <SearchableDropdown
        label="Velg by"
        items={['Oslo', 'Bergen', 'Trondheim', 'Stavanger']}
        selectedItem={selected}
        onChange={setSelected}
      />
    );
  }