CheckboxGroup

Om komponenten

CheckboxGroup lar brukeren mulighet til å krysse av for flere alternativer i en gruppe med valg.

Egnet til:

• Når brukeren skal kunne velge flere alternativ
• 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 ett alternativ. Da brukes RadioButton isteden

Relaterte komponenter

• Checkbox

Varianter

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

CheckboxGroup med label og beskrivelse

<CheckboxGroup
  label="Label"
  description="Beskrivelse"
>
  <Checkbox value="Value">Valg 1</Checkbox>
  <Checkbox value="Value">Valg 1</Checkbox>
</CheckboxGroup>

CheckboxGroup med label

<CheckboxGroup
  label="Label"
  defaultValue={['Label']}
>
  <Checkbox value="Valg 1">Valg1</Checkbox>
  <Checkbox value="Valg 2">Valg2</Checkbox>
  <Checkbox value="Valg 3">Valg3</Checkbox>
</CheckboxGroup>

Enkeltstående CheckboxGroup

<CheckboxGroup>
  <Checkbox value="Valg 1">Valg1</Checkbox>
  <Checkbox value="Valg 2">Valg2</Checkbox>
  <Checkbox value="Valg 3">Valg3</Checkbox>
</CheckboxGroup>

Validering

En CheckboxGroup med én obligatorisk checkbox.

<form
  onSubmit={(e) => e.preventDefault()}
  className="grid gap-6"
>
  <CheckboxGroup label="Jeg er interessert i">
    <Checkbox 
      value="bolig"
      isRequired
    >
      Bolig
    </Checkbox>
    <Checkbox
      value="bank"
      description="Markedets beste rentebetingelser"
    >
    Bank
    </Checkbox>
    <Checkbox
      value="fordeler"
      description="Mer enn 100 fordeler"
    >
    Medlemsfordeler
    </Checkbox>
  </CheckboxGroup>
  <Button type="submit" className="w-fit">Send inn</Button>
</form>

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

<CheckboxGroup
  label="Jeg er interessert i"
  isInvalid
>
  <Checkbox value="bolig">
    Bolig
  </Checkbox>
  <Checkbox value="bank">
    Bank
  </Checkbox>
  <Checkbox value="fordeler">
    Medlemsfordeler
  </Checkbox>
</CheckboxGroup>

Controlled

const [value, setValue] = useState(['bank']);

<CheckboxGroup
  label="Jeg er interessert i"
  value={value}
  onChange={(newValue) => setValue(newValue)}
>
  <Checkbox value="bolig">
    Bolig
  </Checkbox>
  <Checkbox value="bank">
    Bank
  </Checkbox>
  <Checkbox value="fordeler">
    Medlemsfordeler
  </Checkbox>
</CheckboxGroup>

Retningslinjer

Radiobutton vs Checkbox

Checkbox alignment

Vertikal opplistning som standard

Hjelpetekst

Du kan velge om du vil ha hjelpetekst ved checkbox.

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.

<Insert bildeeksempel for checkboxGroup>

Formatering

Anatomi

En CheckboxGroup komponent er sammensatt av label, to eller flere Checkbox-atom og verdien tilknyttet Checkbox-input.

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 element
4. Avmerkningsboks En avkrysningsboks som indikerer riktig tilstand. Som standard er det ikke valgt.

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)

Interaksjon

Tastatur