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
- Installér pakken med
yarn add @fremtind/jkl-radio-button-react
ellernpm i @fremtind/jkl-radio-button-react
. Stil-pakken blir automatisk installert som en avhengighet. - 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 legend
på RadioButtonGroup
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.