Gå til hovedinnhold
KOMPONENTER

Checkbox

npmv8.2.3

Checkboxes lar brukerne velge ett eller flere alternativer fra en liste over valg.

npm install @entur/form
@import '@entur/form/dist/styles.css';
Fargemodus

Varianter

Checkbox

Checkbox inneholder komponentene Checkbox og Fieldset. Fieldset lar deg gruppere flere Checkbox-er sammmen under en overskrift. Du kan sette en ledetekst/overskrift med label-propen.

Les mer om hvordan du bruker html-taggen fieldset på sidene til mdn web docs;

Retningslinjer

Brukes i tilfeller der det er en liste over alternativer, og brukeren kan velge ett eller flere alternativer. En checkbox skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende label tekst, og bør aldri stå alene.

Hvis brukerne bare kan velge ett alternativ fra listen, er det mer passende å bruke Radioknapper. Om du ønsker at valget blir gjenspeilet eller lagret med en gang, bruk heller en Switch istedenfor.

Indeterminate

Det finnes tilfeller der en checkbox hverken er på eller av. Det er typisk når man bruker en checkbox til å velge en rekke andre checkboxes.

Her har du et eksempel hvor det brukes. Prøv å velg ingen, alle eller en blanding.

Fargemodus

Dersom det er mange checkboxes, bør du liste dem under hverandre i en kolonnegruppe slikt at det gjør det enkelt for brukeren å skanne raskt gjennom listen.

Du bør unngå å plassere checkboxes i flere kolonner.

Props

Checkbox

import { Checkbox } from '@entur/form';

Denne komponenten har ingen props

Fieldset

import { Fieldset } from '@entur/form';

Denne komponenten har ingen props

Rediger denne siden på GitHub