Hopp til innhold

Radio­Button

Når vi vil at brukeren skal velge ett alternativ blant to til fire mulige.

EksemplerBrukTekstDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-radio-button-react
Bruk
import { RadioButton } from "@fremtind/jkl-radio-button-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-radio-button/radio-button.min.css";

import "@fremtind/jkl-field-group/input-group.min.css";



// For enkelte features må du også ha denne CSSen importert.

import "@fremtind/jkl-tooltip/tooltip.min.css";

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-radio-button/radio-button";

@use "@fremtind/jkl-field-group/input-group";



@use "@fremtind/jkl-tooltip/tooltip";

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog
Migration

Live demo

RadioButton
Egenskaper
Variant
Visning
Tema
Tetthet
const choices = [

  "Send e-post",

  "Ring meg",

  "Send brev til folkeregistrert adresse",

];

const [selectedValue, setSelectedValue] = React.useState("");



return (

  <RadioButtonGroup

    legend="Hvordan vil du bli kontaktet?"

    name="kontaktmetode"

    helpLabel={

      false

        ? "Ved å velge e-post får du beskjed raskest mulig"

        : undefined

    }

    errorLabel={

      false

        ? "Du må velge hvordan du vil bli kontaktet. Ved å velge e-post får du beskjed raskest mulig."

        : undefined

    }

    tooltipProps={

      false

        ? {

            content:

              "Dette burde kanskje vært en FieldGroup med Checkbox, og ikke en RadioButtonGroup? 🤔",

          }

        : undefined

    }

    labelProps={{ variant: 'small' }}

    value={selectedValue}

    onChange={(e) => setSelectedValue(e.target.value)}

  >

    {choices.map((value) => (

      <RadioButton key={value} label={value} value={value} />

    ))}

  </RadioButtonGroup>

);

Hvordan bruke i skjemaer

En helt enkel bruk av komponenten uten bibliotek for skjemahåndtering kan se ut som i eksempelet under.

const [selectedValue, setSelectedValue] = useState("email");



return (

  <RadioButtonGroup

    legend="Hvordan vil du bli kontaktet?"

    name="kontaktmetode"

    value={selectedValue}

  >

    <RadioButton value="email" onChange={() => setSelectedValue("email")}>

      E-post

    </RadioButton>

    <RadioButton value="phone" onChange={() => setSelectedValue("phone")}>

      Telefon

    </RadioButton>

  </RadioButtonGroup>

);

Dersom du bruker React Hook Form for å håndtere skjematilstand kan du bruke register-metoden direkte på radioknappene på måten demonstrert under.

<RadioButtonGroup legend="Hvilken dekning ønsker du?">

  <RadioButton

    {...register("coverage", { required: true })}

    label="Delkasko"

    value="del"

  />

  <RadioButton

    {...register("coverage", { required: true })}

    label="Fullkasko"

    value="full"

  />

</RadioButtonGroup>;

Uten forhåndsvalg

Dersom en gruppe ikke skal ha noe forhåndsvalgt setter du value til tom string.

const [selectedValue, setSelectedValue] = useState("");



return (

  <RadioButtonGroup

    legend="Hvordan vil du bli kontaktet?"

    name="kontaktmetode"

    value={selectedValue}

  >

    <RadioButton value="email" onChange={() => setSelectedValue("email")}>

      E-post

    </RadioButton>

    <RadioButton value="phone" onChange={() => setSelectedValue("phone")}>

      Telefon

    </RadioButton>

  </RadioButtonGroup>

);

Skjul label visuelt

For å skjule labelen, sett labelProps.srOnly til true.

<RadioButtonGroup

  legend="Hvilken dekning ønsker du?"

  labelProps={{ srOnly: true }}

>

  <RadioButton

    {...register("coverage", { required: true })}

    label="Delkasko"

    value="del"

  />

  <RadioButton

    {...register("coverage", { required: true })}

    label="Fullkasko"

    value="full"

  />

</RadioButtonGroup>;

Frittstående radioknapper

Om du skal gjøre dette er det opp til deg å gjøre jobben som vanligvis gjøres av RadioButtonGroup og dens context. Sørg for å teste skjemaet ditt grundig med tastatur og skjermleser.

Et eksempel er dekningsvelgeren til PM. Denne typen funksjonalitet kan løses som i kodeeksempelet under.

const [value, setValue] = useState("toppkasko");



return (

  <fieldset>

    <legend className="jkl-sr-only">Velg forsikring</legend>

    <TaskCard>

      <BaseRadioButton

        name="dekning"

        value="toppkasko"

        checked={value === "toppkasko"}

        onChange={() => setValue("toppkasko")}

      >

        <p className="jkl-heading-3">Toppkasko</p>

      </BaseRadioButton>

      {/* Skjema for toppkasko */}

    </TaskCard>

    <TaskCard>

      <BaseRadioButton

        name="dekning"

        value="kasko"

        checked={value === "kasko"}

        onChange={() => setValue("kasko")}

      >

        <p className="jkl-heading-3">Kasko</p>

      </BaseRadioButton>

      {/* Skjema for kasko */}

    </TaskCard>

    <TaskCard>

      <BaseRadioButton

        name="dekning"

        value="minikasko"

        checked={value === "minikasko"}

        onChange={() => setValue("minikasko")}

      >

        <p className="jkl-heading-3">Minikasko</p>

      </BaseRadioButton>

      {/* Skjema for minikasko */}

    </TaskCard>

    <TaskCard>

      <BaseRadioButton

        name="dekning"

        value="ansvar"

        checked={value === "ansvar"}

        onChange={() => setValue("ansvar")}

      >

        <p className="jkl-heading-3">Ansvar</p>

      </BaseRadioButton>

      {/* Skjema for ansvar */}

    </TaskCard>

  </fieldset>

);

React API

Her finner du en oversikt over props på komponentene i pakken.