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?boolean
- Adds error indication on checkbox
- errorId? string
- Id for error resulting in checkbox having error
- children ReactNode
- Checkbox label
- hideLabel? boolean
- Hides label and makes it viewable for screen-readers only.
- value? any
- The value of the HTML element.
- indeterminate?boolean
- Specify whether the Checkbox is in an indeterminate state
- description? string
- Adds a description to extend labling of Checkbox
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- id? string
- Override internal id
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLInputElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Checkbox extends HTMLInputElement
CheckboxGroup
- children ReactNode
- Collection of <Checkbox/>
- value? any[]
- Controlled state for checkboxes.
- defaultValue? any[]
- Default checked checkboxes on render
- onChange?((value: any[]) => void)
- Returns current checked checkboxes in group
- legend ReactNode
- Fieldset legend
- hideLegend? boolean
- If enabled shows the legend and description for screenreaders only
- nativeReadOnly? boolean
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLFieldSetElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- CheckboxGroup extends HTMLFieldSetElement
Tokens
| Token | Fallback |
|---|---|
| --ac-radio-checkbox-bg | --a-surface-default |
| --ac-radio-checkbox-border | --a-border-default |
| --ac-radio-checkbox-action | --a-surface-action |
| --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 |