Checkbox

GitHub Figma

Om komponenten

Checkbox gir brukeren mulighet til å krysse av og på for ett alternativ.

Egnet til:

  • Ved valg man kan skru av og på. For eksempel gi og trekke samtykke.
  • I filtrering på en side, for eksempel i boligsøket.

Uegnet til:

  • Lister der bruker bare kan velge alternativer som er gjensidig utelukkende. Da bruker du RadioButton isteden.

Relaterte komponenter

Divider

Varianter

Vi anbefaler at det alltid brukes checkbox sammen med label og beskrivelse, men om dere skal lage en komponent med en checkbox så kan dere bruke enkeltstående checkbox. Om dere skal ha flere checkbox, les om checkbox group.

Checkbox med label og beskrivelse

Den mest brukte av enkeltstående checkbox komponenten

<CheckboxGroup
  label="Samtykke til bruk av din adferd på obos.no og i OBOS-appen for markedsføring"
  description="OBOS knytter din adferdsdata fra disse til din OBOS-profil og bruker dette for å tilpasse markedsføring, slik at den er mest mulig relevant for deg og ditt kundeforhold."
>
  <Checkbox value="Samtykke adferdsdata">Jeg samtykker til at OBOS kan bruke adferdsdata fra sine nettsider og OBOS-appen for markedsføring.</Checkbox>
</CheckboxGroup>

Enkeltstående checkbox

Brukes til teamspesifikke komponenter

<Checkbox>
  Jeg godtar medlemsvilkårene.
</Checkbox>

Feilmelding og validering

En Checkbox som må hukes av for å gå videre. 

<Checkbox isInvalid>
  Jeg godtar medlemsvilkårene.
</Checkbox>

En Checkbox som må hukes av, med feilmelding.

<Checkbox errorMessage="Du må godta medlemsvilkårene">
  Jeg godtar medlemsvilkårene.
</Checkbox>

En Checkbox som må hukes av, med knapp.

<form
  className="flex flex-col items-start gap-4"
  onChange={(e) => e.preventDefault()}
>
  <Checkbox
    isRequired
  >
    Jeg godtar medlemsvilkårene.
  </Checkbox>
  <Button type="submit">
    Send inn
  </Button>
</form>
Divider

Retningslinjer

Regler og begresninger som gjelder for Checkbox

Radiobutton vs Checkbox

Radio vs checkbox

Checkbox alignment

Midtstilt checkbox atom

Vertikal opplistning som standard

vertikalt vs horisontalt

Hjelpetekst

Du kan velge om du vil ha hjelpetekst ved checkbox. Unntaket er på samtykker hvor er det påbudt med hjelpetekst.

Når du skriver en hjelpetekst, er det viktig at du:

  • Bruker store bokstaver i setningsstil og skriver teksten i de fleste tilfeller som hele setninger.
  • Dersom du har veldig lang hjelpetekst bruk den disclosure komponenten i checkbox.
Hjelpetekst

Samtykkeform

Samtykker i OBOS skal følge formen som anvist nedenfor. Det er viktig at vi holder samtykker konsekvent på tvers, og en må tenke på utformelsen når det både skal være i kontekst for brukeren og mulighet til å trekke det på Min side.

Det er viktig at informasjonen rundt hva samtykke innebærer er i beskrivelsen og ikke i selve checkbox handlingen, da denne skal være handlingsdrevet og kort knyttet til label og beskrivelsen av checkbox komponenten.

Oppsett for samtykker, med obligatoriske og valgfrie felt.

Ifølge GDPR kan vi ikke lenger forhåndsvelge at brukerne skal motta nyhetsbrev, reklame eller annen relevant informasjon. De må aktivt gi samtykke opt-in for å motta slike ting, og det er ikke lenger tillatt å ha opt-out som standardvalg.

Opt-in

Divider

Formatering

Anatomi

En Checkbox komponent er sammensatt av label, Checkbox-atom og verdien tilknyttet Checkbox-input. Checkbox kan bestå av ett enkeltvalg eller flere i en checkbox-gruppering.

Checkbox - Anatomi

  1. Label Kommuniserer hva som må velges nedenfor.
  2. Beskrivelse (Valgfri) Hjelpetekst som kan gi ekstra hjelp eller kontekst til brukeren.
  3. Disclosure (Valgfri) Ekspanderende felt som skal supplere hjelpeteksten med mer informasjon. Viktig informasjon skal ikke legges i det ekspanderende elementet.
  4. Avmerkningsboks En avkrysningsboks som indikerer riktig tilstand. Som standard er det ikke valgt.

Divider

Universell utforming

Husk på

  • Alle checkbokser krever en klar, kortfattet og unik label: For checkbokser uten label, for eksempel de som brukes i en tabell, kreves det fortsatt en skjult label for assisterende hjelpemidler. WCAG: 1.3.1 Info and Relationships, 2.4.6 Heading and labels
  • Unngå valgt tilstand: Forhåndsvalgte valg anses som en villedende praksis for alle brukere. Implementer en standard uvalg tilstand. (Ved samtykke må det være uvalgt)
  • Alle tastaturinteraksjoner og ARIA-labels må oppfylle tilgjengelighetskriterier: WAI-ARIA Checkbox Authoring Practices)
  • Bruk Fieldset og legend ved gruppering av checkboxer

Sjekkliste

✓ Alle checkbokser har en klar, kortfattet og unik label

✓ Ingen av checkboksene har en valgt tilstand

✓ Brukeren kan tabbe seg gjennom avmerkningsboksene, og velge dem ved hjelp av mellomromstasen.

Les mer

WAI-ARIA Checkbox Authoring Practices

WCAG 2.4.6 Heading and Labels (AA)

WCAG 1.3.1 Info and Relationships (A)

WCAG 3.2.2 On Input (A)

WCAG 3.2.1 On Focus (A)

Divider

Interaksjon

Tastatur

KeyInteraksjon
SpaceBytter mellom uvalgt og valgt tilstand

Props

Checkbox

PropDescriptionDefault
className?Additional CSS className for the element. The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.-
description?Help text for the form control.-
errorMessage?Error message for the form control. Automatically sets `isInvalid` to true-
style?Additional style properties for the element.-
autoFocus?Whether the element should receive focus on render.-
onFocus?Handler that is called when the element receives focus.-
onBlur?Handler that is called when the element loses focus.-
onFocusChange?Handler that is called when the element's focus status changes.-
onKeyDown?Handler that is called when a key is pressed.-
onKeyUp?Handler that is called when a key is released.-
aria-controls?Identifies the element (or elements) whose contents or presence are controlled by the current element.-
excludeFromTabOrder?Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.-
id?The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).-
aria-label?Defines a string value that labels the current element.-
aria-labelledby?Identifies the element (or elements) that labels the current element.-
aria-describedby?Identifies the element (or elements) that describes the object.-
aria-details?Identifies the element (or elements) that provide a detailed, extended description for the object.-
name?The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).-
value?The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).-
onHoverStart?Handler that is called when a hover interaction starts.-
onHoverEnd?Handler that is called when a hover interaction ends.-
onHoverChange?Handler that is called when the hover state changes.-
slot?A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.-
validationBehavior?Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.'native'
defaultSelected?Whether the element should be selected (uncontrolled).-
isSelected?Whether the element should be selected (controlled).-
onChange?Handler that is called when the element's selection state changes.-
isRequired?Whether user input is required on the input before form submission.-
isInvalid?Whether the input value is invalid.-
validate?A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.-
aria-errormessage?Identifies the element that provides an error message for the object.-
inputRef?A ref for the HTML input element.-
ref?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 {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}-
key?-