Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Checkbox

Oppdatert 7. juli 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    Checkbox viser brukeren en liste med alternativer som kan velges, og flere alternativ kan velges av gangen. Når et valgt er tatt kan brukeren klikke på nytt for å fjerne det.

    Egnet til:

    • Velge flere alternativer

    Uegnet til:

    • Skjule eller vise innhold
    • Gjensidig utelukkende alternativer
    • Flere enn 7 alternativer

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Varianter

    Størrelser

    Komponenten kommer i to størrelser.

    • Medium (standard) brukes både på eksterne og interne flater.
    • Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

    Synlig eller skjult legend

    Legend gjør det lettere for brukeren å skjønne hva komponenten skal brukes til, men den kan skjules i tilfeller der det er nødvendig.

    Skjule label visuelt

    Checkbox skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der checkbox'en får ledeteksten sin fra tabellheaderen--bruk da `aria-label` eller `aria-labelledby`.

    Read-only

    Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere teksten fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.

    Retningslinjer

    Antall alternativer

    Checkbox funker godt når det er 7 eller færre alternativer. Om det er flere alternativer vil listen bli lang og mengden kan overvelde brukeren. Da anbefales heller Combobox.

    Orientering som liste

    Alternativene skal stilles opp under hverandre i en liste for å gjøre det enkelt å scanne listen. De skal ikke plasseres ved siden av hverandre (horisontalt). Det gjør det vanskelig å lese. Det er også veldig problematisk for brukere som må forstørre websiden for å se godt nok (zoom).

    Tilgjengelighet

    Tastaturinteraksjon

    KommandoInteraksjon
    TabFlytter fokus til den valgte checkboxen
    Shift+TabFlytter fokus til element før checkboxen i tabindex
    SpaceHake av/fjerne avhakning

    Disabled

    Selv om vi fraråder bruk av disabled state generelt, finnes det helt sikkert unntak. Ta kontakt med våre eksperter på universell utforming for å finne best mulig løsning.

    Props

    Checkbox

    error?boolean
    Adds error indication on checkbox
    errorId? string
    Id for error resulting in checkbox having error
    children ReactNode
    Checkbox label
    hideLabel? boolean
    Hides label and makes it viewable for screen-readers only.
    value? any
    The value of the HTML element.
    indeterminate?boolean
    Specify whether the Checkbox is in an indeterminate state
    description? string
    Adds a description to extend labling of Checkbox
    size? "medium" | "small"
    Changes font-size, padding and gaps
    disabled? boolean
    Disables element @note Avoid using if possible for accessibility purposes
    id? string
    Override internal id
    readOnly? boolean
    Read only-state
    className? string
    ref? Ref<HTMLInputElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Checkbox extends HTMLInputElement

    CheckboxGroup

    children ReactNode
    Collection of <Checkbox/>
    value? any[]
    Controlled state for checkboxes.
    defaultValue? any[]
    Default checked checkboxes on render
    onChange?((value: any[]) => void)
    Returns current checked checkboxes in group
    legend ReactNode
    Fieldset legend
    hideLegend? boolean
    If enabled shows the legend and description for screenreaders only
    nativeReadOnly? boolean
    error? ReactNode
    Error message for element
    errorId? string
    Override internal errorId
    size? "medium" | "small"
    Changes font-size, padding and gaps
    disabled? boolean
    Disables element @note Avoid using if possible for accessibility purposes
    description? ReactNode
    Adds a description to extend labling of a field
    id? string
    Override internal id
    readOnly? boolean
    Read only-state
    className? string
    ref? Ref<HTMLFieldSetElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    CheckboxGroup extends HTMLFieldSetElement

    Tokens

    TokenFallback
    --ac-radio-checkbox-bg--a-surface-default
    --ac-radio-checkbox-border--a-border-default
    --ac-radio-checkbox-action--a-surface-action
    --ac-radio-checkbox-action-hover-bg--a-surface-action-subtle
    --ac-radio-checkbox-error-border--a-border-danger
    --ac-radio-checkbox-error-hover-bg--a-surface-danger-subtle
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack