Radio panel

npm install @entur/form

@import '@entur/form/dist/styles.css';

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

Bruk

Retningslinjer

RadioPanel brukes i tilfeller der du har en liste over alternativer og brukeren kan velge kun ett 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 Radio button fungerer bedre.

Hvis brukerne skal kunne velge flere alternativer fra listen, er det mer passende å bruke CheckboxPanel. Om du ønsker at valget gjenspeiles eller lagres med en gang bør du heller bruke en Switch.

Alternaltivene bør vises i en logisk rekkefølge.

Test ut props

RadioPanel støtter de samme props-ene som CheckboxPanel, med unntak av checked – dette siden checked-verdien styres gjennom RadioGroup. Du kan teste dem ut interaktivt på siden for CheckboxPanel.

RadioGroup

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

RadioGroup er en nødvendig wrapper for å bruke RadioPanel og lar deg gruppere flere RadioPanel-er under en overskrift. Du kan spesifisere valgt verdi via value-propen, lytte på endringer med onChange og sette en ledetekst/overskrift med label-propen.

name-propen blir propagert ned til hver av <Radio />-elementene, så du slipper å gjøre dette manuelt.

Komponenter med props

<RadioPanel />

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

<RadioGroup />

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