Dropdown

npm install @entur/dropdown

@import '@entur/dropdown/dist/styles.css';

Komponenter

Dropdown

import { Dropdown } from '@entur/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.

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:

NativeDropdown

import { NativeDropdown } from '@entur/dropdown';

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