Select
Vi bruker nedtrekkslister til å gi brukeren en liste med alternativ. Nedtrekkslister passer i de tilfellene det er for mange valg til å bruke radioknapper. Nedtrekkslisten må ha en overskrift, som forteller hva det er brukerne kan velge mellom i listen.
Om du har fem eller færre valg kan det være bedre å bruke Radio buttons.
Hvis du trenger en nedtrekksliste med mange valg, kan du også legge inn en søke- eller filtreringsfunksjon. Dersom brukeren alltid må scrolle i listen over valg er det kanskje på tide å la de søke.
Du finner et eksempel på en nedtrekksliste brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.
Tekst og validering
Bruk prinsippene for skjemadesign til å velge størrelse på overskriften til listen. Lag en kort og tydelig tekst, som forteller hva det er brukeren skal gjøre i nedtrekkslisten. Hvis det trengs, kan du legge en hjelpetekst under listen for å forklare mer.
Hvis nedtrekkslisten ikke validerer, viser systemet en feilmelding som forklarer hva som er galt. Feilmeldingen erstatter en eventuell hjelpetekst, så den må eventuelt gjenta informasjonen fra hjelpeteksten.
For eksempel, gitt en hjelpetekst "Velg landet du var på ferie i da du ble syk" kan vi ha en feilmelding "Du må velge hvor du var på ferie da du ble syk".
Når bruker vi Select?
Vi bruker en nedtrekksliste når vi skal gi brukeren en liste med alternativ, og hvor Radio buttons ikke passer. Noen eksempler på bruk er:
- Til å velge årsak eller skadetype
- Til å velge diagnose
- Til å velge stilling
En nedtrekksliste med søk har noen likhetstrekk med Autosuggest. En nyanseforskjell er at en nedtrekksliste ikke lar brukeren velge noe annet enn de forhåndsbestemte alternativene. Om du ønsker at brukerens søk skal være et gyldig valg uansett, bruk Autosuggest.
Eksempler på bruk
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
id | ingen | Ikke påkrevd | string | undefined | |
name | ingen | Påkrevd | string | |
label | ingen | Påkrevd | string | |
labelProps | ingen | Ikke påkrevd | Omit<LabelProps, "children" | "forceCompact" | "standAlone"> | undefined | |
items | ingen | Påkrevd | (string | ValuePair)[] | |
inline | false | Ikke påkrevd | boolean | undefined | |
defaultPrompt | Velg | Ikke påkrevd | string | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
value | ingen | Ikke påkrevd | string | undefined | |
helpLabel | ingen | Ikke påkrevd | string | undefined | |
errorLabel | ingen | Ikke påkrevd | string | undefined | |
variant | @deprecated Bruk `labelProps.variant` | ingen | Ikke påkrevd | LabelVariant | undefined |
searchable | false | Ikke påkrevd | boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean) | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
width | ingen | Ikke påkrevd | string | undefined | |
onChange | ingen | Ikke påkrevd | ChangeEventHandler | undefined | |
onBlur | ingen | Ikke påkrevd | ChangeEventHandler | undefined | |
onFocus | ingen | Ikke påkrevd | ChangeEventHandler | undefined | |
invalid | Merk som ugyldig uten å sende inn en errorLabel. NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup. | ingen | Ikke påkrevd | boolean | undefined |
data-testautoid | ingen | Ikke påkrevd | string | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
ref | ingen | Ikke påkrevd | Ref<HTMLSelectElement> | undefined | |
key | ingen | Ikke påkrevd | Key | null | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
id | ingen | Ikke påkrevd | string | undefined | |
name | ingen | Ikke påkrevd | string | undefined | |
label | ingen | Påkrevd | string | |
labelProps | ingen | Ikke påkrevd | Omit<LabelProps, "children" | "forceCompact" | "standAlone"> | undefined | |
items | ingen | Påkrevd | (string | ValuePair)[] | |
className | ingen | Ikke påkrevd | string | undefined | |
selectClassName | ingen | Ikke påkrevd | string | undefined | |
inline | false | Ikke påkrevd | boolean | undefined | |
helpLabel | ingen | Ikke påkrevd | string | undefined | |
errorLabel | ingen | Ikke påkrevd | string | undefined | |
variant | @deprecated Bruk `labelProps.variant` | ingen | Ikke påkrevd | LabelVariant | undefined |
placeholder | ingen | Ikke påkrevd | string | undefined | |
value | ingen | Ikke påkrevd | string | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
width | ingen | Ikke påkrevd | string | undefined | |
onChange | ingen | Ikke påkrevd | ChangeEventHandler<HTMLSelectElement> | undefined | |
onFocus | ingen | Ikke påkrevd | FocusEventHandler<HTMLSelectElement> | undefined | |
onBlur | ingen | Ikke påkrevd | FocusEventHandler<HTMLSelectElement> | undefined | |
invalid | Merk som ugyldig uten å sende inn en errorLabel. NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup. | ingen | Ikke påkrevd | boolean | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
ref | ingen | Ikke påkrevd | Ref<HTMLSelectElement> | undefined | |
key | ingen | Ikke påkrevd | Key | null | undefined |