Gå til hovedinnhold
KOMPONENTER

Dropdown

Dropdowns presenterer en liste over alternativer som kan brukes til å filtrere eller sortere eksisterende innhold.

Komponenter

NavnTypePåkrevd?Default-verdiBeskrivelse
itemsPotentiallyAsyncDropdownItemType

Tilgjengelige valg i dropdownen

valuestring | null

Valgt verdi. Bruk null for ingen verdi.

searchableboolean

Om man skal kunne søke i dropdownen eller ikke

labelstring

Beskrivende tekst som forklarer feltet

labelTooltipstring

Tooltip for labelen

variant"success" | "info" | "warning" | "error"

Hvilken valideringsvariant som gjelder

feedbackstring

Valideringsmelding, brukes sammen med variant

prependReactNode

Tekst eller ikon som kommer før dropdownen

disabledboolean

Deaktiver dropdownen

readOnlyboolean

Setter dropdownen i read-only modus

placeholderstring

Placeholder-tekst når ingenting er satt

loadingTextstring

En tekst som beskriver hva som skjer når man venter på items

onChange((selectedItem: NormalizedDropdownItemType | null) => void)

Callback når brukeren endrer valg

selectOnTabboolean

Lar brukeren velge ved å “tæbbe” seg ut av komponenten

openOnFocusboolean

Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe

debounceTimeoutnumber

Antall millisekunder man venter før man kaller en potensiell items-funksjon

clearableboolean false

Om man skal ha muliget for å nullstille Dropdownen

classNamestring

Ekstra klassenavn

highlightFirstItemOnOpenboolean

Marker første valgmulighet automatisk

listStyle{ [key: string]: any; }

Styling som sendes ned til Dropdown-lista

itemFilter((item: NormalizedDropdownItemType) => boolean) Enkel tekstsammenligning

Filtreringen som blir brukt dersom man har en searchable Dropdown

OBS: Dropdown støtter ikke wrapping av InputGroup, så bruk f.eks. label-propen fra Dropdown heller.

<Dropdown /> er en fleksibel komponent for å lage nedtrekkslister. Du sender inn en liste med valg, som kan være en string, eller objekter med verdi og label - eller en blanding av disse. Du kan også sende med en liste med ikoner, som vises til høyre:

const items = [
  'Bislett',
  { value: 'OsloMet', label: 'Holbergsplass' },
  {
    value: 'Oslo S',
    label: 'Oslo Sentralstasjon',
    icons: [BusIcon, TrainIcon, MetroIcon],
  },
];

By default så fungerer Dropdown som en vanlig select-boks - men den har også støtte for å være søkbar. Da sender du med propertyen searchable.

Autocomplete, typeahead og lignende

Om du ønsker å hente innholdet i dropdownen basert på hva brukeren skriver inn, så kan du sende inn en funksjon til items istedenfor.

Denne funksjonen blir kalt hver gang man endrer noe i input-feltet, og mottar den nye input-strengen som argument. Funksjonen kan være asynkron, og vil i så tilfeller vise en spinner mens brukeren venter.

Dersom openOnFocus er satt til true vil funksjonen bli kalt når tekstfeltet fokuseres. Da må man håndtere det at queryet kan være tomt. Dette er fint for å kunne vise noen elementer som skal være default ved åpning.

Her er et interaktivt og komplett eksempel, som "henter" treff fra en fake server med tilfeldig forsinkelse:

NativeDropdown

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

disabledboolean false

For å deaktivere dropdownen

feedbackstring

Valideringsmelding, brukes sammen med variant

itemsPotentiallyAsyncDropdownItemType

Alle valg for dropdownen å ha

labelstring

Beskrivende tekst som forklarer feltet

onChange((e: ChangeEvent<HTMLSelectElement>) => void)

En callback for endringer av value

prependReactNode

Tekst eller ikon som kommer før dropdownen

readOnlyboolean false

Setter dropdownen i read-only modus

valuestring

Den valgte verdien

variant"success" | "info" | "warning" | "error"

Hvilken valideringsvariant som gjelder

<NativeDropdown /> ser til forveksling lik ut som <Dropdown />, men er en mye enklere implementasjon, som bruker HTMLs <select />-element under panseret. Det gjør at den er veldig mobilvennlig, både i størrelse og bruk.

Den har ikke støtte for søk, men godtar en (asynkron) funksjon for å hente data fra en ekstern kilde, slik som <Dropdown />.

Retningslinjer for bruk

Dropdowns presenterer en liste over alternativer som kan brukes til å filtrere eller sortere eksisterende innhold. Komponenten lar brukerne velge en handling eller verdier fra en liste med valg. Den brukes vanligvis når du har over 5 elementer å velge mellom. Skriv kortfattede og beskrivende labels for å informere brukerne om hva de kan forvente i en dropdown slik at brukerne forstår formålet. Label teksten bør begrenses til en enkelt tekstlinje.

Det finnes to varianter av dropdowns:

  • Single select: Når brukerne klikker på dropdown feltet, får de opp en liste over mulige alternativer. Brukeren kan deretter velge ett enkelt alternativ fra denne listen. Hvis du har færre enn 5 valg, bør du vurdere å bruke Radio eller Choice Chips.
  • Multi select: Gir brukerne mulighet til å velge flere alternativer fra listen på en gang. Færre enn 5 alternativer, bruk Checkboxes eller Filter Chips i stedet. Les mer om denne multi select her.

Prinsipper

Innafor
Anbefalt bredde størrelse på dropdowns er minimum 170 px og maximum 350 px.
Uttafor
Tekst som strekker seg utover elementet konkatineres, og gjør det vanskelig for brukeren å lese. Unngå derfor for lange tekstbeskrivelser, og prøv heller å korte ned på teksten.