GithubYarn FigmaEndringslogg
Intro
Vi bruker Checkbox og Checkbox-group når brukere skal ha muligheten til å velge flere svaralternativ.
Egnet til å:
- Velge flere alternativer i en liste
Vurder noe annet:
- Skjule eller vise innhold
- Om svaralternativene er gjensidig utelukkende
- Aktivt samtykke (bruk ConfirmationPanel)
Har du innspill til komponenten?
Send forslagEksempler
Varianter
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.
Tilgjengelighet
| Kommando | Interaksjon |
| Tab | Flytter fokus til den valgte checkboxen |
| ShiftTab | 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
- className? string
- ref? Ref<HTMLInputElement>
- 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
- 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
- className? string
- ref? Ref<HTMLFieldSetElement>
- CheckboxGroup extends HTMLFieldSetElement
Tokens
| Token | Fallback |
| --ac-radio-checkbox-bg | --a-surface-default |
| --ac-radio-checkbox-border | --a-border-strong |
| --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 |