KOMPONENTER

Switch

npmv7.0.0

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

Komponenter

Switch

Navn	Type	Default-verdi	Beskrivelse
`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.