@fremtind/jkl-checkbox-react

Jøkul react checkbox component

Usage no npm install needed!

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

README

@fremtind/jkl-checkbox-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

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

Bruk av React-pakken

Installasjon

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

Bruk

Som regel vil du bruke Checkbox-komponenten sammen med FieldGroup for å skape en forståelse av konteksten rundt valgene. Se dokumentasjonen i den pakken for nærmere forklaring av funksjonaliteten.

Checkbox tar et name, som kan være det samme for flere bokser, og en value som er unik blandt avmerkingsbokser som deler samme name:

<FieldGroup legend="Hvilke forsikringer har du kjøpt?">
    <Checkbox name="insurances" value="life">
        Livsforsikring
    </Checkbox>
    <Checkbox name="insurances" value="sickness">
        Kritisk sykdom
    </Checkbox>
    <Checkbox name="insurances" value="treatment">
        Behandlingsforsikring
    </Checkbox>
</FieldGroup>

Som standard stables avmerkingsboksene under hverandre. Om de skal stilles side om side kan du bruke prop'en inline (husk å sette inline på alle boksene):

<Checkbox inline name="valg" value="1">Valg 1</Checkbox>
<Checkbox inline name="valg" value="2">Valg 2</Checkbox>

// Vil stilles opp slik:
// [ ] Valg 1  [ ] Valg 2

Props

komponenten tar i bruk følgende props:

  • children: Påkrevd. Etiketten til avmerkingsboksen. ReactNode
  • name: Påkrevd. Navnet på valget som tas. string
  • value: Påkrevd. Valget som tas ved å krysse av. string
  • checked: Angir om boksen er merket av. boolean
  • onChange: Angir funksjon for å håndtere endring i verdi. Får en ChangeEvent som første argument.
  • inline: Angir om boksen skal stå på linje med andre bokser. boolean
  • className: Eventuell(e) css-klassenavn for komponenten. string
  • forceCompact: Angir at boksen skal vises i liten versjon uavhengig av skjermstørrelse. boolean