Intro
Vi bruker Checkbox og Checkbox-group når brukere skal ha muligheten til å velge flere svaralternativ.
Dersom valgene er gjensidig utelukkende, er det bedre å bruke Radio-kompontenten.
Egnet til å:
- Aktivt samtykke
- Merke en rad i en tabell
Vurder noe annet:
- Skjule eller vise innhold
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, men label må alltid være tilgjengelig for skjermleser, f.eks. ved bruk ar aria-label eller aria-labelledby.
Tilgjengelighet
| Kommando | Interaksjon |
| Tab | Flytter fokus til den valgte radioknapp |
| ShiftTab | Flytter fokus til element før radiogruppe i tabindex |
| Space | Hake av/fjerne avhakning |
| Pil opp/venstre | Flytter fokus til forrige valg |
| Pil ned/høyre | Flytter fokus til neste valg |
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
- errorId? string
- children ReactNode
- hideLabel? boolean
- value? any
- indeterminate?boolean
- description? string
- size? "medium" | "small"
- disabled? boolean
- id? string
- className? string
- ref? Ref<HTMLInputElement>
- Adds error indication on checkbox
- Id for error resulting in checkbox having error
- Checkbox label
- Hides label and makes it viewable for screen-readers only.
- The value of the HTML element.
- Specify whether the Checkbox is in an indeterminate state
- Adds a description to extend labling of Checkbox
- Changes font-size, padding and gaps
- Disables element
@note Avoid using if possible for accessibility purposes
- Override internal id
- Checkbox extends HTMLInputElement
CheckboxGroup
- children ReactNode
- value? any[]
- defaultValue? any[]
- onChange?((value: any[]) => void)
- legend ReactNode
- hideLegend? boolean
- error? ReactNode
- errorId? string
- size? "medium" | "small"
- disabled? boolean
- description? ReactNode
- id? string
- className? string
- ref? Ref<HTMLFieldSetElement>
- Collection of <Checkbox/>
- Controlled state for checkboxes.
- Default checked checkboxes on render
- Returns current checked checkboxes in group
- Fieldset legend
- If enabled shows the legend and description for screenreaders only
- Error message for element
- Override internal errorId
- Changes font-size, padding and gaps
- Disables element
@note Avoid using if possible for accessibility purposes
- Adds a description to extend labling of a field
- Override internal id
- CheckboxGroup extends HTMLFieldSetElement