@fremtind/jkl-radio-button-react

Jøkul react radio button components

Usage no npm install needed!

<script type="module">
  import fremtindJklRadioButtonReact from 'https://cdn.skypack.dev/@fremtind/jkl-radio-button-react';
</script>

README

@fremtind/jkl-radio-button-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

Lær hvordan du kan ta i bruk Jøkul

Installasjon

  1. Installér pakken med yarn add @fremtind/jkl-radio-button-react eller npm i @fremtind/jkl-radio-button-react. Stil-pakken blir automatisk installert som en avhengighet.
  2. Importér både React-pakken og stil-pakken i prosjektet ditt:
import { RadioButtonGroup, RadioButton } from "@fremtind/jkl-radio-button-react";
import "@fremtind/jkl-radio-button/radio-button.min.css";

Bruk

Komponenten RadioButton brukes ikke for seg selv, men kun gjennom RadioButtonGroup. Spørsmålet som stilles gis gjennom legendRadioButtonGroup og valgene gis som children av type RadioButton. Du må også spesifisere et name som gis til alle valgene.

Om du bruker react-hook-form vil bruken kunne se slik ut:

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

En mer manuell variant kan se slik ut:

const choices = ["Jeg vil at dere skal ringe meg", "Jeg vil at dere skal sende en e-post"];
const [selectedValue, setSelectedValue] = useState("");

return (
    <RadioButtonGroup
        legend="Hvordan vil du bli kontaktet?"
        name="kontaktmetode"
        value={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
    >
        {choices.map((value) => (
            <RadioButton key={value} label={value} value={value} />
        ))}
    </RadioButtonGroup>
);

Radioknappene kan vises ved siden av hverandre om inline er satt. Denne bør kun brukes dersom det er to relativt korte valg:

<RadioButtonGroup legend="Er noen sjåfører under 23 år?" inline>
    <RadioButton {...register("u23", { required: true })} label="Ja" value="y" />
    <RadioButton {...register("u23", { required: true })} label="Nei" value="n" />
</RadioButtonGroup>

Det finnes også en forceCompact-variant som brukes på samme måte:

<RadioButtonGroup legend="Er noen sjåfører under 23 år?" forceCompact>
    <RadioButton {...register("u23", { required: true })} label="Ja" value="y" />
    <RadioButton {...register("u23", { required: true })} label="Nei" value="n" />
</RadioButtonGroup>

Komponenten tar imot hjelpe- og feilmeldinger gjennom helpLabel og errorLabel. Dersom errorLabel finnes vises kun denne, og skjemafeltene markeres som ugyldige.