Select

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Select (også kalt nedtrekkslister) er et skjemaelement som skal brukes når man skal velge ett enkelt valg i liste med mange valg. Komponenten skal brukes når det er for mange valg til å velge radioknapper eller liste ut elementene.

Hva er ditt foretrukne frontendrammeverk?

Vi bruker ikke svarene på denne til noe nyttig.

Varianter

Vi har flere mulige variasjoner av nedtrekkslisten. Det kan brukes helt enkelt med label og nedtrekksmeny, eller du kan legge til:

Label (etikett)
Valgfritt- eller obligatorisk-tag
Hjelpetekst
Ekspanderende hjelpetekst

Eksempel på tre forskjellige varianter av select

Farger

Komponenten skal alltid ha $brand-blue på kant og tekst. Det er ikke mulig å endre farge på komponenten.

Slik bruker du komponenten

Nedtrekkslister bør brukes for å velge et element når man har mange valgmuligheter. Men husk, de kan være problematiske for skjermlesere hvis listen med alternativer er veldig lang og det er flere kjente problemer knyttet til bruk av select-komponenten (les mer om dette under “Research about this component” på gov.uk sine sider).

Vurder å forenkle spørsmålene dine slik at det er færre alternativer og om du da kan bruke radioknapper i stedet.

Når burde jeg bruke select?

Når du skal presentere mange alternativ der bare ett kan velges.
Når du ønsker å unngå at lange lister med alternativer blir overveldende.
Når du trenger å få plass til flere alternativer på liten plass.

Og når burde det unngås?

Når du har bare noen få alternativer og nok plass - bruk radioknapp og list ut alternativene så de synes.
Når brukere kan velge mer enn én av noen få alternativer - da må du ta i bruk checkbokser.
Når du har strukturerte alternativer med nok plass er det bedre å liste ut alle valgene.

Det er viktig å liste ut elementene dine på en oversiktlig måte, om det så er alfabetisk, tidsbasert eller en annen logisk rekkefølge.

Ett select-felt med 6 valg, og ett med kun 3 valg

Label (etikett/ledetekst)

Det er viktig at nedtrekksfeltet har en kort og tydelig ledetekst (label) og en hjelpetekst om det er nødvendig.

Når du skriver label kan det være greit å huske på at:

Man burde være konsis og konsistent slik at brukeren skjønner hva som forventes av hen
Om mulig: hold deg til 1-3 ord og under 20 bokstaver, inkludert mellomrom
Ikke bruk bare store eller bare små bokstaver
Ikke bruk kolon etter label

Valgfritt-/obligatorisk-tag

Til høyre for label kan du velge enten valgfritt-tag eller obligatorisk-tag. Bruk kun én av variantene i din tjeneste eller løsning for å unngå å forvirre brukeren. Vi anbefaler å markere de valgfrie feltene.

Ett felt merket som påkrevd, og ett merket som valgfritt

Størrelse

Det er ikke påkrevd, men det anbefales at et tekstfelt ikke er bredere enn 500 px. Det viktigste er at bredden på tekstfeltet må passe til innholdet brukeren legger inn.

Feilmelding og validering

Hvis tekstfeltet ikke validerer eller det er obligatorisk og brukeren ikke har fylt det ut, vil en feilmelding dukke opp under tekstfeltet som beskriver hva som er galt. Feilmeldingen har tre visuelle indikatorer: en rød ramme, et ikon og selve feilmeldingsteksten. Essensen av hjelpeteksten må også være inkludert i feilmeldingen. Les mer om hvordan du kan skrive en god feilmelding her (ks.no).

Plassholdertekst

Tekstfeltet har mulighet for plassholdertekst, men unngå å bruke plassholdertekst med meningsbærende/viktig innhold, og unngå å bruke plassholdertekst uten label/ledetekst. Plassholderteksten er nemlig ikke tilgjengelig for skjermlesere og kan skape forvirring for brukeren. Gå heller for ledetekst og/eller hjelpetekst.

Hjelpetekst

Valgfri hjelpetekst er relevant informasjon som hjelper brukeren med å fylle ut feltet riktig. Det brukes for eksempel ofte til å forklare riktig dataformat. I select-komponenten kan du velge mellom enkel hjelpetekst og ekspanderende hjelpetekst.

Når du skriver hjelpetekst, er det viktig at du:

Bruker store bokstaver i setningstil og skriver teksten i de fleste tilfeller som hele setninger.
Dersom du har veldig lang hjelpetekst eller har behov for å legge til lenker og lignende, bruk den ekspanderende hjelpeteksten.

Vi går ofte litt i beina på hverandre på hva en dropdown og select-komponent er. Enkelt forklart: Select er et standard skjemaelement der man kun kan velge ett valg. En viktig forskjell mellom komponentene er den underliggende koden; Select-komponenten er basert på det standard HTML skjemaelementet Select, og derfor bestemmes utseende til komponenten av nettleseren (se eksempel under). Dropdown-komponenten kan styles etter behov.