Network Pipe Manufacturer

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

    6.1.13 • Public • Published

    @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

    Install

    npm i @fremtind/jkl-checkbox-react

    DownloadsWeekly Downloads

    467

    Version

    6.1.13

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • pior-h
    • a11860
    • fremtind-bot