Intro
Checkbox viser brukeren en liste med alternativer som kan velges, og flere alternativ kan velges av gangen. Når et valgt er tatt kan brukeren klikke på nytt for å fjerne det.
Egnet til:
- Velge flere alternativer
Uegnet til:
- Skjule eller vise innhold
- Gjensidig utelukkende alternativer
- Flere enn 7 alternativer
Eksempler
Varianter
Størrelser
Komponenten kommer i to størrelser.
- Medium (standard) brukes både på eksterne og interne flater.
- Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Synlig eller skjult legend
Legend gjør det lettere for brukeren å skjønne hva komponenten skal brukes til, men den kan skjules i tilfeller der det er nødvendig.
Skjule label visuelt
Checkbox skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der checkbox'en får ledeteksten sin fra tabellheaderen--bruk da aria-label
eller aria-labelledby
.
Read-only
Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere teksten fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.
Retningslinjer
Antall alternativer
Checkbox funker godt når det er 7 eller færre alternativer. Om det er flere alternativer vil listen bli lang og mengden kan overvelde brukeren. Da anbefales heller Combobox.
Orientering som liste
Alternativene skal stilles opp under hverandre i en liste for å gjøre det enkelt å scanne listen. De skal ikke plasseres ved siden av hverandre (horisontalt). Det gjør det vanskelig å lese. Det er også veldig problematisk for brukere som må forstørre websiden for å se godt nok (zoom).
Tilgjengelighet
Tastaturinteraksjon
Kommando | Interaksjon |
---|---|
Tab | Flytter fokus til den valgte checkboxen |
Shift+Tab | Flytter fokus til element før checkboxen i tabindex |
Space | Hake av/fjerne avhakning |
Disabled
Selv om vi fraråder bruk av disabled state generelt, finnes det helt sikkert unntak. Ta kontakt med våre eksperter på universell utforming for å finne best mulig løsning.
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:
nativeReadOnly?
- Type:
boolean
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 |