National Pest Management

    @fremtind/jkl-radio-button-react
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.1 • Public • Published

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

    Install

    npm i @fremtind/jkl-radio-button-react

    DownloadsWeekly Downloads

    18

    Version

    6.2.1

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • pior-h
    • a11860
    • fremtind-bot