Hopp til innhold
Aksel

Komponenter

CheckboxCard

CheckboxCard er en Checkbox som er stylet som et kort. Det gir større klikkflate, tydeligere interaksjon, og tydeligere gruppering av hvilken informasjon som hører til hvert alternativ.

Preview

Komponenten er klar for bruk, men det kan komme endringer basert på tilbakemeldinger. Ta den i bruk og fortell oss hva du synes på Slack eller GitHub.

Vi er litt usikre på om det bør være støtte for rikt innhold, ta kontakt hvis du har behov for dette.

Egnet til:

  • Velge flere alternativer
  • Valg med ekstra informasjon knyttet til hvert alternativ

Uegnet til:

  • Gjensidig utelukkende alternativer (bruk RadioCard)
  • Veldig mange alternativer (vurder Combobox)

Eksempler

Retningslinjer

CheckboxCardGroup

CheckBoxCard brukes i en CheckBoxCardGroup sammen med flere CheckBoxCards.

Horisontal visning

Ved horisontal visning må du ta høyde for responsitivtet. Hvis alternativene går over flere rader, må du sørge for at det er like mange på hver rad. Når det ikke er plass i bredden vises alle alternativene under hverandre.

Checkbox vs. CheckboxCard

Det er ingen sterke føringer for når du skal bruke Checkbox vs. CheckboxCard. Ved bruk av begge deler i samme flyt, vær konsekvent med hva som brukes når.

Figma

Komponenten bruker slots. Det lar deg legge til, fjerne og flytte rundt på et fritt antall cards i CheckBoxCard-gruppen. Bytter du state på gruppen etter at du har endret innholdet i et card, må du også oppdatere state på selve cardet. Se og test hvordan slots fungerer (Figma).

Props

CheckboxCard

error?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Adds error indication on checkbox.

errorId?

  • Type:
    string
  • Description:

    Id for error resulting in checkbox having error.

children

  • Type:
    ReactNode
  • Description:

    Checkbox label.

hideLabel?

  • Type:
    boolean
  • Description:

    Hides the label and description visually while keeping them available to screen readers.

value?

  • Type:
    any
  • Description:

    Checkbox value.

indeterminate?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Specify whether the Checkbox is in an indeterminate state.

description?

  • Type:
    string
  • Description:

    Adds a description to extend the labeling.

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLInputElement>
  • Description:

    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). React Docs

CheckboxCardGroup

children

  • Type:
    ReactNode
  • Description:

    Collection of <Checkbox/>.

value?

  • Type:
    any[]
  • Description:

    Controlled state for checkboxes.

defaultValue?

  • Type:
    any[]
  • Description:

    Default checked checkboxes.

onChange?

  • Type:
    ((value: any[]) => void)
  • Description:

    Returns current checked checkboxes in group.

legend

  • Type:
    ReactNode
  • Description:

    Fieldset legend.

hideLegend?

  • Type:
    boolean
  • Description:

    If enabled, shows the legend and description for screen readers only.

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLFieldSetElement>
  • Description:

    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). React Docs

Endringslogg

DatoEndringer
29.10.2026Ny komponent i preview: CheckboxCard 🎉

Forvalter

Team
Aksel
Artikkel oppdatert 29. oktober 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack