Gå til hovedinnhold
KOMPONENTER

Checkbox

npmv4.4.0

Checkboxes lar brukerne velge ett eller flere alternativer fra en liste over valg.

Hvilke sparkesykler vil du se i kartet?

Komponenter

Checkbox

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Label for checkboxen, som vises ved høyre side.

checkedboolean | "indeterminate"

Om Checkbox er avmerket, eller om den

onChange((event: ChangeEvent<HTMLInputElement>) => void) | ((e: ChangeEvent<HTMLInputElement>) => void)

Callback for Checkbox

disabledboolean false

Om checkboxen er disabled eller ikke

styleCSSProperties

Ekstra styling til komponenten

reduceClickAreaboolean false

Reduserer klikkflaten for Checkbox’en

Fieldset

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i felt-gruppen.

classNamestring

Ekstra klassenavn

labelReactNode

Labelen til felt-gruppen.

Brukes for å gruppere valg sammen.

Retningslinjer for bruk

Brukes i tilfeller der det er en liste over alternativer, og brukeren kan velge ett eller flere alternativer. En checkbox skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende label tekst, og bør aldri stå alene.

Hvis brukerne bare kan velge ett alternativ fra listen, er det mer passende å bruke Radioknapper. Om du ønsker at valget blir gjenspeilet eller lagret med en gang, bruk heller en Switch istedenfor.

Indeterminate

Det finnes tilfeller der en checkbox hverken er på eller av. Det er typisk når man bruker en checkbox til å velge en rekke andre checkboxes.

Her har du et eksempel hvor det brukes. Prøv å velg ingen, alle eller en blanding.

Jeg vil gjerne reise med

Prinsipper

Innafor
Dersom det er mange checkboxes, bør du liste dem under hverandre i en kolonnegruppe slikt at det gjør det enkelt for brukeren å skanne raskt gjennom listen.
Uttafor
Du bør unngå å plassere checkboxes i flere kolonner.
Rediger denne siden på Bitbucket