Gå til hovedinnhold
KOMPONENTER

Checkbox panel

npmv8.2.0

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';
Fargemodus

Test ut props

Fargemodus

CheckboxPanel-props

Size

Varianter

Checkboxpanel

For å lage en gruppe med checkbox panels trenger du CheckboxPanel og Fieldset. 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;

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.

Props

CheckboxPanel

import { CheckboxPanel } from '@entur/{props.pageContext.frontmatter.npmPackage}';

Denne komponenten har ingen props

Fieldset

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

Denne komponenten har ingen props

Rediger denne siden på GitHub