Gå til hovedinnhold
KOMPONENTER

Dropdown

npmv4.0.10

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

Kontrast

Komponenter

NavnTypeDefault-verdiBeskrivelse
labelstring

Beskrivende tekst som forklarer feltet

itemsPotentiallyAsyncDropdownItemType

Tilgjengelige valg i dropdownen

value?string | null

Valgt verdi. Bruk null for ingen verdi.

searchable?boolean

Om man skal kunne søke i dropdownen eller ikke

labelTooltip?string

Tooltip for labelen

variant?VariantType

Hvilken valideringsvariant som gjelder

feedback?string

Valideringsmelding, brukes sammen med variant

prepend?ReactNode

Tekst eller ikon som kommer før dropdownen

disabled?boolean

Deaktiver dropdownen

readOnly?boolean

Setter dropdownen i read-only modus

placeholder?string

Placeholder-tekst når ingenting er satt

loadingText?string

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

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

Callback når brukeren endrer valg

selectOnTab?boolean

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

openOnFocus?boolean

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

debounceTimeout?number

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

clearable?boolean false

Om man skal ha muliget for å nullstille Dropdownen

className?string

Ekstra klassenavn

highlightFirstItemOnOpen?boolean

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

disableLabelAnimation?boolean false

Plasserer labelen statisk på toppen av inputfeltet

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.

Om man vil at dropdown-lista skal forskyve innholdet under kan man benytte seg av prop'en listStyle og sende med f.eks. listStyle={{position:"relative", top:"8px"}}

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:

Kontrast

NativeDropdown

NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

disabled?boolean false

For å deaktivere dropdownen

feedback?string

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

prepend?ReactNode

Tekst eller ikon som kommer før dropdownen

readOnly?boolean false

Setter dropdownen i read-only modus

value?string

Den valgte verdien

variant?VariantType

Hvilken valideringsvariant som gjelder

disableLabelAnimation?boolean false

Plasserer labelen statisk på toppen av inputfeltet

<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 />.

Kontrast

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.
Rediger denne siden på Bitbucket