Gå til hovedinnhold
KOMPONENTER

Dropdowns

Dropdowns lar deg velge mellom mange valg

Komponenter

NavnTypePåkrevd?Default-verdiBeskrivelse
itemsPotentiallyAsyncDropdownItemType

Tilgjengelige valg i dropdownen

valuestring

Valgt verdi

searchableboolean

Om man skal kunne søke i dropdownen eller ikke

labelstring

Beskrivende tekst som forklarer feltet

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

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