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.

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

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.

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.

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.

Select vs Dropdown

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.

Select ekspandert på desktop.
Select ekspandert på mobil.

Gjør slik/ikke gjør slik

Ikke bruk nedtrekksliste til adresse, telefonnummer eller lignende

Bruk med kun placeholdertekst

Ikke bruk den dersom du har få valg (gå for radio buttons eller lignende)

List ut elementene dine på en logisk måte

Anatomi

  1. Label (etikett/ledetekst)
  2. Valgfritt-tag
  3. Obligatorisk-tag
  4. Hjelpetekst
  5. Ekspanderende hjelpetekst
  6. Inputfelt
  7. Plassholdertekst