Gå til hovedinnhold
Entur logo – designsystemets starside
KOMPONENTER

Checkbox panel

npmv8.1.6

Checkbox panel fungerer som checkbox button, men med en større trykkflate og muligheter for å vise ekstra informasjon.

npm install @entur/form
@import '@entur/form/dist/styles.css';
import { CheckboxPanel } from '@entur/form';

Bruk

Retningslinjer

CheckboxPanel brukes i tilfeller der du har en liste over alternativer og brukeren kan velge ett eller flere alternativer. Den er mest nyttig hvis man ønsker å legge til ekstra informasjon for hvert element, vil fremheve listen eller ønsker å øke trykkflaten. Ellers kan det hende vanlig Checkbox fungerer bedre. Merk at CheckboxPanel ikke støtter indeterminate-tisltanden slik Checkbox gjør.

Hvis brukerne bare kan velge ett alternativ fra listen, er det mer passende å bruke RadioPanel. Om du ønsker at valget gjenspeiles eller lagres med en gang bør du heller bruke en Switch. Det anbefales å ikke ha et forhåndsvalgt alternativ når du bruker checkbox panel. Alternaltivene bør vises i en logisk rekkefølge.

Test ut props

CheckboxPanel-props

Size

Fieldset

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

Fieldset lar deg gruppere flere CheckboxPanel-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;

Komponenter

<CheckboxPanel />

import { CheckboxPanel } from '@entur/form';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Ekstra informasjon som legges nederst i CheckboxPanel

style?CSSProperties
titleReactNode

Hovedtittelen til CheckboxPanel

className?string

Ekstra klassenavn

size?"medium" | "large" "medium"

Størrelse på CheckboxPanel

disabled?boolean false

Om CheckboxPanel er deaktivert eller ikke

value?string | (string & readonly string[])

Verdien til CheckboxPanel

checked?boolean

Om checkbox-panelet skal være valgt eller ikke

secondaryLabel?ReactNode

Ektstra label som står høyrestilt mot Checkboxen

hideCheckbox?boolean false

Skjuler checkbox-en i CheckboxPanel

<Fieldset />

import { Fieldset } from '@entur/form';
NavnTypeBeskrivelse
children?ReactNode

Innholdet i felt-gruppen.

className?string

Ekstra klassenavn

label?ReactNode

Labelen til felt-gruppen.

Rediger denne siden på GitHub