Checkbox
Intro
Checkbox viser brukeren en liste med alternativer der flere kan velges om gangen. Når et valg er tatt kan brukeren klikke på nytt for å fjerne valget.
Eksempler
Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Label må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.
Legend må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.
Readonly-attributtet gjør at valgene ikke kan endres, men brukere vil fortsatt kunne markere og kopiere teksten. Til forskjell fra disabled vil brukere også kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.
Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke 'readOnly', eller bare kan skrive det ut i ren tekst.
Skjule legend/label visuelt
CheckboxGroup skal alltid ha en legend, og Checkbox skal alltid ha en label. I spesielle tilfeller kan denne teksten skjules visuelt med hideLegend/hideLabel, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om teksten skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.
Retningslinjer
Mange alternativer
Hvis det er veldig mange alternativer kan det overvelde brukeren. Vurder da om du heller bør bruke Combobox.
Orientering som liste
Alternativene skal stilles opp under hverandre i en liste for å gjøre det enkelt å scanne dem. De skal ikke plasseres ved siden av hverandre (horisontalt). Det gjør det vanskelig å lese. Det kan også være problematisk for brukere som må forstørre websiden for å se godt nok (zoom).
Rekkefølge
I de fleste tilfellene bør alternativene sorteres alfabetisk. I noen tilfeller kan det være hjelpsomt å ha de mest aktuelle alternativene først, men vær forsiktig så rekkefølgen ikke påvirker svaret eller gjør det vanskelig å finne ønsket alternativ.
Disabled
Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly, eller bare kan skrive ut informasjonen i ren tekst.
Props
Checkbox
error?
- Type:
boolean - Default:false
- Description:
errorId?
- Type:
string - Description:
children
- Type:
ReactNode - Description:
hideLabel?
- Type:
boolean - Description:
value?
- Type:
any - Description:
indeterminate?
- Type:
boolean - Default:false
- Description:
description?
- Type:
string - Description:
size?
- Type:
"medium" | "small" - Description:
disabled?
- Type:
boolean - Description:
id?
- Type:
string - Description:
readOnly?
- Type:
boolean - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLInputElement> - Description:
CheckboxGroup
children
- Type:
ReactNode - Description:
value?
- Type:
any[] - Description:
defaultValue?
- Type:
any[] - Description:
onChange?
- Type:
((value: any[]) => void) - Default:() => {}
- Description:
legend
- Type:
ReactNode - Description:
hideLegend?
- Type:
boolean - Description:
error?
- Type:
ReactNode - Description:
errorId?
- Type:
string - Description:
size?
- Type:
"medium" | "small" - Description:
disabled?
- Type:
boolean - Description:
description?
- Type:
ReactNode - Description:
id?
- Type:
string - Description:
readOnly?
- Type:
boolean - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLFieldSetElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-radio-checkbox-bg | --a-surface-default |
| --ac-radio-checkbox-border | --a-border-default |
| --ac-radio-checkbox-action | --a-surface-action-selected |
| --ac-radio-checkbox-action-hover-bg | --a-surface-action-subtle |
| --ac-radio-checkbox-error-border | --a-border-danger |
| --ac-radio-checkbox-error-hover-bg | --a-surface-danger-subtle |
