Gå til hovedinnhold
KOMPONENTER

Radio panel

npmv7.0.39

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';
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';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Ekstra informasjon som legges nederst i radio-panelet

style?CSSProperties
titleReactNode

Hovedtittelen til radio-panelet

className?string

Ekstra klassenavn

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

Størrelse på radio-panelet

disabled?boolean false

Om radio-panelet er deaktivert eller ikke

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

Verdien til radio-panelet

secondaryLabel?ReactNode

Ektstra label som står høyrestilt, til venstre for radio-button-en

hideRadioButton?boolean false

Skjuler radio-button-en i radio-panelet

<RadioGroup />

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

Navnet til radiogruppen.

label?string

Overskrift over radiogruppen

valuestring | null

Verdien til den valgte radioknappen

children?ReactNode

Radioknappene sendes inn som children

onChange(e: ChangeEvent<HTMLInputElement>) => void

En callback som blir kalles hver gang en radioknapp klikkes på

Rediger denne siden på Bitbucket