Gå til hovedinnhold
KOMPONENTER

Radio button

npmv7.0.39

Radio buttons lar brukerne velge kun ett alternativ fra en liste over valg.

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

Komponenter

Radio

import { Radio } from '@entur/form';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Label til radio-button. Vises ved høyre side.

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

Verdien til radioknappen

<Radio /> brukes når man har to eller flere motstridende valg å velge mellom. Må brukes inni en <RadioGroup />.

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å

<RadioGroup /> lar deg gruppere flere radio buttons under en overskrift. Du kan spesifisere valgt verdi via value-propen, og lytte på endringer med onChange på toppnivå.

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

Retningslinjer

Brukes i tilfeller der brukeren kun kan velge ett alternativ. En radioknapp skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende ledetekst, og bør aldri stå alene. Valgene bør stå under hverandre i en liste. Dersom du ønsker å vise valgene ved siden av hverandre på en linje, anbefales det heller å bruke Choice Chips.

Bruk Checkboxes hvis brukerne har mulighet til å velge flere alternativer fra listen. Om du har flere enn 5 valg, vurder å bruk en Dropdown med single select funksjon istedet.

Innafor
Hvis du har mange radioknapper, bør du liste dem under hverandre i en kolonnegruppe slikt at det gjør det enkelt for brukeren å skanne raskt gjennom listen.
Uttafor
Du bør unngå å plassere radioknapper ved siden av hverandre og i flere kolonner.
Rediger denne siden på Bitbucket