Gå til hovedinnhold
KOMPONENTER

Radio button

npmv7.0.9

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

Kontrast

Komponenter

Radio

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

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