Gå til hovedinnhold
KOMPONENTER

Switch

npmv7.0.39

Switch fungerer som en fysisk bryter som lar brukerne slå på eller av en funksjon.

npm install @entur/form
@import '@entur/form/dist/styles.css';

Komponenter

Switch

import { Switch } from '@entur/form';
NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Label for Switch-en.

labelPlacement?"right" | "bottom" "right"

Posisjonen til label for Switch-en.

checked?boolean

Om switch-en er checked eller ikke

icon?ReactNode

Ikonet som skal stå inne i sirkelen på Switch-en

hideIcon?boolean false

Skjul ikonet inne i sikrelen på Switch-en

color?string colors.validation.mint

Farge som settes på ikon og bakgrunn når Switch-en er “checked”

contrastColor?string colors.validation.mintContrast

Farge på bakgrunn når Switch-en er “checked” og står i en kontrast-seksjon

size?"medium" | "large" "medium"

Størrelsen på Switch-en

onChange?(((e: ChangeEvent<HTMLInputElement>) => void) & ChangeEventHandler<HTMLInputElement>)

Callback for når verdien endres

Retningslinjer for bruk

Switch er en kontroll som lar brukerne veksle mellom to mulige tilstander (av eller på). Switch brukes kun for binære handlinger som aktiveres eller deaktiveres umiddelbart etter at brukeren har slått på eller av bryteren. Det vil si at endring i tilstanden ikke skal kreve bekreftelse eller lagring. Switch bør ha en ledetekst som forteller hva brukeren slår av og på.

For handlinger der brukeren må bekrefte valget sitt, bruk Checkboxes istedenfor.

Prinsipper

Innafor
Bruk switch til å slå på eller av en funksjon/innstilling som gir automatisk oppdatering eller automatisk lagring.
Uttafor
Unngå å bruk radioknapper for å slå innstillinger av eller på. Radioknapper indikerer at bare en kan velges om gangen og krever et ekstra steg for lagring.
Rediger denne siden på Bitbucket