Radio

Radioknapper brukes når brukeren bare skal få velge én av flere forhåndsbestemte alternativer.

Normal

<Radio label={"Radio-label"} name="minRadioKnapp" />

Kopiert!

Disabled

advarsel
Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen grunn ikke er tillatt. Ler mer om dette på siden vår om `disabled`.
<Radio label={"Radio-label"} name="minRadioKnapp" disabled />

Kopiert!

RadioGruppe

Denne komponenten inkluderer også en RadioGruppe-komponent som kan brukes til å gruppere flere radioknapper:

info
Dersom du har mer enn fem alternativer, kan du vurdere om det er mer hensiktsmessig å benytte en Select i stedet.
Hvor vil du sitte?
import { RadioGruppe, Radio } from "nav-frontend-skjema";

<RadioGruppe legend="Hvor vil du sitte?">
  <Radio label={"Bakerst"} name="sitteplass" />
  <Radio label={"Midten"} name="sitteplass" />
  <Radio label={"Fremst"} name="sitteplass" />
</RadioGruppe>;

Kopiert!

Felles feilmelding

Hvor vil du sitte?

Feilmeldingstekst må gjenta nøkkelord fra label

import { RadioGruppe, Radio } from "nav-frontend-skjema";

<RadioGruppe
  legend="Hvor vil du sitte?"
  feil="Feilmeldingstekst må gjenta nøkkelord fra label"
>
  <Radio label={"Bakerst"} name="sitteplass" />
  <Radio label={"Midten"} name="sitteplass" />
  <Radio label={"Fremst"} name="sitteplass" />
</RadioGruppe>;

Kopiert!

Feilmelding uten propagering av feil-prop til children

Bruk utenFeilPropagering-propen for å bestemme om feil-propen til RadioGruppe skal propageres til children.

Hvor vil du sitte?

Feilmeldingstekst må gjenta nøkkelord fra label

import { RadioGruppe, Radio } from "nav-frontend-skjema";

<RadioGruppe
  legend="Hvor vil du sitte?"
  feil="Feilmeldingstekst må gjenta nøkkelord fra label"
  utenFeilPropagering
>
  <Radio label={"Bakerst"} name="sitteplass" />
  <Radio label={"Midten"} name="sitteplass" feil />
  <Radio label={"Fremst"} name="sitteplass" />
</RadioGruppe>;

Kopiert!