Select
Release dato: 19.09.2023
Sist oppdatert: 07.07.2025
Select (nedtrekksliste) lar brukeren velge ett enkelt alternativ fra en liste. Den brukes nÄr du har mange valg, men ikke plass eller behov for Ä vise alle samtidig.
FormÄlet med komponenten er Ä gjÞre det enkelt Ä velge riktig alternativ uten at det tar unÞdvendig plass i et skjema eller lÞsning.
Test komponenten
Relaterte komponenter
NĂ„r brukeren kan velge flere alternativer
NÄr det er fÄ valg og man kun skal velge ett
NĂ„r brukeren kan skrive for Ă„ sĂžke etter alternativer
Varianter
Innhold
| Type | Beskrivelse |
|---|---|
| Standard | Label, placeholder og valgliste |
| Med hjelpetekst | Kort hjelpetekst under feltet |
| Med ekspanderende hjelpetekst | Hjelpetekst bak âLes merâ-knapp |
| Valgfritt-tag/obligatorisk tag | Viser enten âValgfrittâ eller âMĂ„ fylles utâ ved siden av label |
Select brukes vanligvis sammen med input wrapper, under dokumentasjonen til denne finner du mer om hvordan du skriver gode labels og hjelpetekster, og om funksjonene i input wrapper.
States
Select har seks ulike states som gir brukeren visuell tilbakemelding i ulike situasjoner:
| Type | Beskrivelse |
|---|---|
| Default | Feltet vises i normal tilstand, klar til bruk |
| Hover | NĂ„r brukeren beveger musepekeren over feltet |
| Focus | NĂ„r brukeren har markert feltet og er klar til Ă„ skrive |
| Active | NĂ„r brukeren skriver i feltet |
| Error | NĂ„r feltet har en feil, og en forklarende feilmelding vises |
| Disabled | NĂ„r feltet ikke er tilgjengelig for interaksjon |
StĂžrrelser
Select kan brukes i tre ulike stĂžrrelser:
| StĂžrrelser | Bruk |
|---|---|
| Medium (default) | Standard, og skal brukes som hovedregel |
| Small | For trange flater, som tabeller og kompakte skjema |
| XSmall | For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer |
Retningslinjer for bruk
Bruk select nÄr
- du skal presentere mange alternativ der bare ett kan velges
- du Þnsker Ä unngÄ at lange lister med alternativer blir overveldende
- du trenger Ä fÄ plass til flere alternativer pÄ liten plass
UnngÄ select nÄr
- du har fÄ valg og god plass (bruk heller radio button)
- brukeren kan velge mer enn ett alternativ (bruk heller checkbox)
- du har strukturerte alternativer med nok plass er det bedre Ă„ liste ut alle valgene
Antall og tilgjengelighet
Select fungerer best nÄr du har mange alternativer, men bare ett skal velges. Har du fÊrre enn fem valg, er radioknapper ofte bedre fordi valgene blir mer synlige og enklere Ä sammenligne.
Lange lister kan vĂŠre utfordrende for brukere med skjermleser, og det finnes kjente tilgjengelighetsproblemer med select-komponenten (les mer under âResearch about this componentâ pĂ„ gov.uk).
Vurder om du kan forenkle spÞrsmÄlet slik at det blir fÊrre alternativer. Hvis det gir mening, bruk radio button for Ä gi en bedre opplevelse.
GjĂžr slik
UnngÄ
Sortering av alternativer
Det er viktig Ä liste ut elementene dine pÄ en oversiktlig mÄte, om det sÄ er alfabetisk, tidsbasert eller en annen logisk rekkefÞlge.
GjĂžr slik
UnngÄ
Bruk select til riktig formÄl
Select passer best til ryddige, relaterte lister. Ikke bruk den til Ă„ velge innhold som egentlig krever et annet format, som adresse eller telefonnummer.
GjĂžr slik
UnngÄ
Label, hjelpetekst og plassholder
En label skal vÊre kort og presis, helst mellom ett og tre ord. UnngÄ kolon pÄ slutten og bruk verken kun store eller kun smÄ bokstaver.
Plassholder skal aldri vÊre eneste instruksjon. Den forsvinner nÄr brukeren gjÞr et valg, og er ikke alltid tilgjengelig for skjermlesere. Bruk heller label og/eller hjelpetekst for Ä gi nÞdvendig veiledning.
Les mer om innhold i skjemaelementer i input wrapper-dokumentasjonen og om god praksis for skjemaer.
Responsivitet
Select tilpasser seg automatisk tilgjengelig plass og bryter linjer der det er nÞdvendig. Test alltid pÄ ulike skjermstÞrrelser og zoom-nivÄer at det fortsatt er enkelt Ä navigere med tastatur og skjermleser.
Universell utforming
- Alle felt skal ha en tilknyttet label, ogsÄ hvis den skjules visuelt (
pkt-sr-only). - Feilmeldinger skal vĂŠre kodet som tekst og knyttet til det spesifikke feltet.
- Select kan vĂŠre utfordrende for skjermlesere ved veldig lange lister, vurder alternativer som radio button eller combobox om det gir bedre opplevelse.
Anatomi
| Element | Beskrivelse |
|---|---|
| Label (etikett) | Kort og tydelig ledetekst som beskriver hva brukeren skal velge |
| Valgfritt-/obligatorisk | Merker feltet som valgfritt eller obligatorisk |
| Hjelpetekst | Kort forklaring under label som hjelper brukeren Ä forstÄ hvordan de skal fylle ut feltet |
| Ekspanderende hjelpetekst | âLes merâ-knapp som viser mer utfyllende informasjon nĂ„r brukeren trenger ekstra forklaring |
| Inputfelt | Selve nedtrekkslisten der brukeren velger et alternativ |
| Plassholdertekst | Midlertidig tekst i feltet som indikerer at brukeren mÄ gjÞre et valg, skal ikke erstatte label |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-select.js;import { PktSelect } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/17/elements/pkt-select.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres:
await window.customElements.whenDefined("pkt-select");Egenskaper og tokens
Props
- Prop:
label?- Type:
string- Beskrivelse:
- Tekst som vises over feltet
- Prop:
requiredTag?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Viser en merking som indikerer at feltet er pÄkrevd
- Prop:
requiredText?- Type:
string- Beskrivelse:
- Tekst som vises i pÄkrevd-merkingen
- Prop:
optionalTag?- Type:
boolean- Beskrivelse:
- Viser en merking som indikerer at feltet er valgfritt
- Prop:
optionalText?- Type:
string- Beskrivelse:
- Tekst som vises i valgfritt-merkingen
- Prop:
tagText?- Type:
string- Beskrivelse:
- Tekst som vises i en tag ved siden av label
- Prop:
hasError?- Type:
boolean- Beskrivelse:
- Angir om feltet har feil
- Prop:
errorMessage?- Type:
string- Beskrivelse:
- Feilmelding som vises under feltet
- Prop:
helptext?- Type:
string- Beskrivelse:
- Hjelpetekst som vises over feltet
- Prop:
helptextDropdown?- Type:
string- Beskrivelse:
- Hjelpetekst som vises i en lukket boks man kan Ă„pne
- Prop:
helptextDropdownButton?- Type:
string- Beskrivelse:
- Tekst som vises pÄ knappen for Ä Äpne/lukke utvidet hjelpetekst
- Prop:
name- Type:
string- Beskrivelse:
- Navn pÄ feltet
- Prop:
id- Type:
string- Beskrivelse:
- Id pÄ feltet
- Prop:
value?- Type:
string- Beskrivelse:
- Verdi pÄ feltet
- Prop:
disabled?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Angir om feltet er disabled
- Prop:
inline?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Angir om feltet skal flyte med teksten
- Prop:
useWrapper?- Type:
boolean- Standardverdi:
true- Beskrivelse:
- Indikerer om skjemaelementet skal bruke en wrapper
- Prop:
fullwidth?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Angir om feltet skal ta full bredde
- Prop:
ariaDescribedby?aria-describedby?- Type:
string- Beskrivelse:
- Spesifiserer ID-en til elementet som beskriver feltet
- Prop:
ariaLabelledby?- Type:
string- Beskrivelse:
- Spesifiserer ID-en til elementet som navigerer til feltet
- Prop:
inputSize?input-size?- Type:
"small" | "medium" | "xsmall"- Standardverdi:
"medium"- Beskrivelse:
- Visuell stĂžrrelse via input-wrapper.
- Prop:
hasFieldset?- Type:
boolean- Beskrivelse:
- Bruk fieldset og legend i stedet for label.
Slots
- Slot:
default- Beskrivelse:
- Option elements for select component
Events
- Event:
change- Type:
Event- Beskrivelse:
- Returnerer valgt verdi som streng
- Event:
value-change- Type:
CustomEvent- Beskrivelse:
- Returnerer valgt verdi som streng i
event.detail - Event:
toggleHelpText- Type:
CustomEvent- Beskrivelse:
- Returnerer
event.detail { isOpen: true }ellerevent.detail { isOpen: false }nÄr hjelpeteksten Äpnes eller lukkes