Designsystemoversikt

Checkbox

Checkbox brukes når brukeren kan slå ett valg av og på eller kombinere flere uavhengige valg.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Checkbox er Jøkul sin grunnkomponent for av/på-valg og korte flervalgssett. Bruk den når hvert valg står på egne bein og ikke utelukker de andre valgene i samme gruppe.

Den lokale forhåndsvisningen følger Jøkul sin faktiske DOM-kontrakt med `jkl-checkbox`, label og underliggende `<input type="checkbox">`.

Playgrounden under styrer de viktigste tilstandene direkte og viser hvordan markup og React-eksempel endrer seg med dem.

Eksempel

Props

    • checked=false · inline=false · invalid=false · disabled=false

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/checkbox/checkbox.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import { Checkbox } from "@fremtind/jokul/checkbox";

export function Example() {
    return (
        <Checkbox
            name="notifications"
            value="product-updates"
        >
            Send meg oppdateringer om nye komponentdocs
        </Checkbox>
    );
}

    Hendelser

    Ingen hendelser fra checkbox-eksempelet ennå.

    Props

    Jøkul-props

    Jøkul-props og wrappermodifikatorer som styrer tilstand og layout rundt checkboxen.

    Prop Type Standard Beskrivelse
    checked boolean false Setter komponenten i avhuket tilstand når den brukes som kontrollert felt.
    inline boolean false Legger til `jkl-checkbox--inline` når checkboxen skal stå tett sammen med annen tekst eller andre kontroller.
    invalid boolean false Markerer feltet som ugyldig og legger til Jøkul sin error-state på wrapperen.

    React-props

    Vanlige React-props som påvirker hvordan checkboxen brukes i komponenttrær.

    Prop Type Standard Beskrivelse
    data-testautoid string ingen Stabil test-id fra Jøkul sin kjernetype når feltet må spores i automatiserte tester uten å lene seg på labelteksten.
    children ReactNode påkrevd Synlig labeltekst som også blir tilgjengelig navn for checkboxen.
    className string ingen Ekstra klasse på wrapperen når komponenten må kobles til lokal layout eller sporing.

    Native HTML-props

    Native HTML-attributter som sendes videre til det underliggende `<input type="checkbox">`-elementet.

    Prop Type Standard Beskrivelse
    disabled boolean false Brukes når brukeren midlertidig ikke skal kunne endre valget.
    name string påkrevd Navnet som sendes med skjemaet når checkboxen ligger i et formfelt.
    value string påkrevd Verdien som sendes når checkboxen er krysset av.
    onChange (event) => void ingen handler Håndterer endringer når komponenten brukes kontrollert i React.
    onFocus (event) => void ingen handler Brukes når feltet må reagere idet checkboxen får fokus, for eksempel for lokal hjelpetekst eller analyse.
    onBlur (event) => void ingen handler Brukes når du vil validere eller rydde opp etter at checkboxen mister fokus.
    indeterminate boolean false Viser en mellomtilstand når et overordnet valg bare er delvis oppfylt, for eksempel i hierarkiske sjekklister.

    ARIA-props

    Tilgjengelighetsattributter som kobler checkboxen til hjelpetekst og feilmeldinger.

    Prop Type Standard Beskrivelse
    aria-describedby string ingen Pek til hjelpetekst eller feilmelding som utdyper hva valget gjelder.
    aria-invalid boolean false Settes når feltet er ugyldig og bør da peke til en forklarende feilmelding.

    Når du skal bruke Checkbox

    Bruk Checkbox når brukeren kan velge flere alternativer samtidig, eller når en enkelt tilstand skal kunne slås av og på.

    Hvis brukeren bare kan velge ett alternativ i en gruppe, er radio buttons som regel riktigere.

    Tilgjengelighet

    Selve avhukingsboksen er liten, så labelen må være klikkbar og tydelig. Jøkul-komponenten kobler labelen til inputen via id/htmlFor-kontrakten.

    Når checkboxen er ugyldig, trenger brukeren en konkret forklaring på hva som mangler og hvordan feilen kan rettes.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Påkrevd
    Dekket API-props
    12
    Playground-kontroller
    4
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/checkbox/checkbox.min.css
    • @fremtind/jokul/styles/fonts/webfonts.min.css

    Ikonkontrakt

    Bruk: Påkrevd

    Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

    • Checkbox tegner boksen og hakeikonet gjennom Jøkul sine Material Symbols-ligaturer i labelens `:before`, så fontoppsettet er en del av kontrakten.
    • Uten Jøkul sine webfonts vises ligaturteksten i stedet for checkbox-symbolet, selv om selve komponent-CSS-en er lastet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Checkbox · CheckboxProps · @fremtind/jokul/checkbox · 12 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Følger native tastaturstøtte for checkbox; Tab flytter fokus og Space veksler avhukingen.

    Semantikk som kreves

    • Checkbox trenger en tydelig label som beskriver hva brukeren slår av eller på.
    • Bruk checkbox for uavhengige valg eller enkle av/på-tilstander, ikke når brukeren bare kan velge ett alternativ.
    • Feilstatus må følges av forklaring i tekst, ikke bare visuell error-state.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at labelteksten fortsatt gir mening uten omkringliggende hjelpetekst.
    • Bekreft at error-state forklarer hva brukeren må gjøre for å komme videre.

    Ytelse

    • Komponenten er ren HTML og CSS i docs og krever ikke ekstra klient-JS for grunnoppførselen.
    • Inline-varianten bør brukes sparsomt så skannbarheten i skjemaet ikke blir dårligere.

    Relatert