Gå til hovedinnhold
KOMPONENTER

Radio panel

npmv8.2.3

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

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

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/undefined';

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.

Props

RadioPanel

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

Denne komponenten har ingen props

RadioGroup

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

Denne komponenten har ingen props

Rediger denne siden på GitHub