KOMPONENTER

Radio button

npmv8.1.6

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

Navn	Type	Beskrivelse
`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';

Navn	Type	Beskrivelse
`name`	`string`	Navnet til radiogruppen.
`label?`	`string`	Overskrift over radiogruppen
`value`	`string \| 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.

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.

Du bør unngå å plassere radioknapper ved siden av hverandre og i flere kolonner.