Radio button

() => {
    const [value, setValue] = React.useState(null);
    return (
      <RadioGroup
        name="ticket-type"
        label="Velg billettype"
        onChange={e => setValue(e.target.value)}
        value={value}
      >
        <Radio value="single">Enkelbillett</Radio>
        <Radio value="period">Periodebillett</Radio>
      </RadioGroup>
    );
  }

Bruk Radio button når

Brukes når det er en liste over alternativer, og brukeren kun kan velge ett av dem.

Unngå Radio button når

du vil vise valgene ved siden av hverandre på en linje, bruk heller Choice chip
brukerne har mulighet til å velge flere alternativer fra listen, bruk heller Checkbox
du har flere enn 5 valg, vurder å bruke en Dropdown med single select-funksjon i stedet

Retningslinjer

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.

Plassering av flere radioknapper

Gjør

Hvis du har mange radioknapper, bør du liste dem under hverandre i en kolonnegruppe, slik at det er enkelt for brukeren å skanne raskt gjennom listen.

Unngå

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

Eksempler

ReadOnly
() => {
    const [value, setValue] = React.useState('readOnly1');
    return (
      <RadioGroup
        name="readOnly-type"
        label="Velg readOnly"
        onChange={e => setValue(e.target.value)}
        value={value}
        readOnly
      >
        <Radio value="readOnly1">readOnly1</Radio>
        <Radio value="readOnly2">readOnly2</Radio>
        <Radio value="readOnly3">readOnly3</Radio>
      </RadioGroup>
    );
  }