Komponenter
Select
Select lar brukeren velge ett alternativ fra en liste.
React
const Preview = () => { return ( <Field> <Label>Velg et fjell</Label> <Select defaultValue=''> <Select.Option value='' disabled> Velg et fjell … </Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> <Select.Option value='aconcagua'>Aconcagua</Select.Option> <Select.Option value='denali'>Denali</Select.Option> <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option> <Select.Option value='elbrus'>Elbrus</Select.Option> <Select.Option value='vinson'>Mount Vinson</Select.Option> <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option> <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option> </Select> </Field> ); }; render(<Preview />)
Bruk Select når
- du skal vise mange alternativer, og brukeren kun kan velge ett
- du trenger en kompakt måte å vise mange alternativer på
Unngå Select når
- du har få valg og god plass, bruk heller
Radio - du skal navigere mellom sider eller seksjoner i en applikasjon
- du skal velge flere alternativer. Selv om HTML select støtter dette via
multiple-attributtet, er det lite brukervennlig, spesielt på mobil. Vi anbefalerCheckboxellerSuggestionfor en mer oversiktlig og tilgjengelig løsning
Eksempel
Gruppering
Gruppering brukes for å organisere alternativer i kategorier, noe som gjør lange lister mer oversiktlige og enklere å navigere.
React
const WithOptgroup = () => { return ( <Field> <Label>Velg en park</Label> <Select> <Select.Optgroup label='Grünerløkka'> <Select.Option value='sofienbergparken'> Sofienbergparken </Select.Option> <Select.Option value='birkelunden'>Birkelunden</Select.Option> <Select.Option value='olafryesplass'>Olaf Ryes plass</Select.Option> </Select.Optgroup> <Select.Optgroup label='Sentrum'> <Select.Option value='slottsparken'>Slottsparken</Select.Option> <Select.Option value='studenterlunden'>Studenterlunden</Select.Option> </Select.Optgroup> <Select.Optgroup label='Gamle Oslo'> <Select.Option value='botsparken'>Botsparken</Select.Option> <Select.Option value='klosterenga'>Klosterenga park</Select.Option> </Select.Optgroup> </Select> </Field> ); }; render(<WithOptgroup />)
Disabled
Unngå å deaktivere Select hvis du kan. Det kan være vanskelig for brukerne å forstå hvorfor feltet ikke kan brukes. Les mer om hvorfor deaktiverte tilstander er problematiske (nav.no) og hvilke alternativer som finnes.
React
const Disabled = () => { return ( <Field> <Label>Velg et fjell</Label> <Select disabled> <Select.Option value='blank'>Velg …</Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<Disabled />)
ReadOnly
Bruk readOnly når du vil vise en forhåndsvalgt verdi i en Select-komponent, men ikke tillate at brukeren endrer valget. Dette kan være aktuelt når informasjonen er bestemt av systemet eller et tidligere steg i en prosess, og ikke skal kunne redigeres.
React
const ReadOnly = () => { return ( <Field> <Label>Velg et fjell</Label> <Select readOnly value='everest'> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<ReadOnly />)
Retningslinjer
Bruk select når det er 7 eller flere alternativer. For færre alternativer kan alternativknapper (radio) være enklere for brukerne. Select er spesielt brukervennlig på mobil og gir god tilgjengelighet, da det følger operativsystemets standarder. Det fungerer godt når brukeren skal velge ett alternativ fra en liste. Hvis brukeren trenger å velge flere alternativer eller filtrere listen, bør du vurdere å bruke Suggestion.
Merk: Gov.uk anbefaler å unngå select i offentlige digitale tjenester. Deres brukertester viser at brukere ofte synes komponenten er vanskelig å bruke riktig. Det kan være bedre å stille flere spørsmål for å redusere antallet alternativer å velge mellom. Hvis du stiller de riktige spørsmålene først, kan alternativknapper (radio) være et bedre valg.
Tekst
Select-komponenten skal alltid ha en ledetekst. Vi plasserer ledetekst og beskrivelse over feltet for å sikre god synlighet på små skjermer og unngå problemer ved feilmeldinger. Hold ledeteksten kort, helst på én linje.
Hvis select er inne i en tabell og får ledeteksten fra tabelloverskriften, kan vi skjule ledeteksten. Pass likevel på at ledeteksten gir mening, siden den fortsatt skal leses opp av skjermlesere.