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.
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
- Label (etikett/ledetekst)
- Valgfritt-tag
- Obligatorisk-tag
- Hjelpetekst
- Ekspanderende hjelpetekst
- Inputfelt
- Plassholdertekst