Komponenter
Checkbox
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.
Egnet til:
- Velge flere alternativer
Eksempler
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:
Adds error indication on checkbox.
errorId?
- Type:
string - Description:
Id for error resulting in checkbox having error.
children
- Type:
ReactNode - Description:
Checkbox label.
hideLabel?
- Type:
boolean - Description:
Hides label and makes it viewable for screen-readers only.
value?
- Type:
any - Description:
Checkbox value.
indeterminate?
- Type:
boolean - Default:
false - Description:
Specify whether the Checkbox is in an indeterminate state.
description?
- Type:
string - Description:
Adds a description to extend the labeling.
size?
- Type:
"medium" | "small" - Default:
"null" - Description:
Changes font-size, padding and gaps.
disabled?
- Type:
boolean - Description:
Avoid using if possible for accessibility purposes.
Disables element.
id?
- Type:
string - Description:
Override internal id.
readOnly?
- Type:
boolean - Description:
Read-only state.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLInputElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
CheckboxGroup
children
- Type:
ReactNode - Description:
Collection of
<Checkbox/>.
value?
- Type:
any[] - Description:
Controlled state for checkboxes.
defaultValue?
- Type:
any[] - Description:
Default checked checkboxes.
onChange?
- Type:
((value: any[]) => void) - Default:
() => {} - Description:
Returns current checked checkboxes in group.
legend
- Type:
ReactNode - Description:
Fieldset legend
hideLegend?
- Type:
boolean - Description:
If enabled shows the legend and description for screenreaders only
error?
- Type:
ReactNode - Description:
Error message.
errorId?
- Type:
string - Description:
Override internal errorId.
size?
- Type:
"medium" | "small" - Default:
"null" - Description:
Changes font-size, padding and gaps.
disabled?
- Type:
boolean - Description:
Avoid using if possible for accessibility purposes.
Disables element.
description?
- Type:
ReactNode - Description:
Adds a description to extend the labeling.
id?
- Type:
string - Description:
Override internal id.
readOnly?
- Type:
boolean - Description:
Read-only state.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLFieldSetElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| 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 |