Hopp til innhold

Toggle

Veksleknapper gir brukerne mulighet til å bytte mellom to tilstander uten å måtte bekrefte valget. Det finnes to varianter: En ren av/på knapp og en slider variant der man velger mellom to tilstander.

Pris per

100 kr/mnd

Bruk

Bruk veksleknapper dersom du ønsker:

  • Å skru av/på en funksjonalitet uten bekreftelse fra brukeren. Et godt eksempel på det er når man skrur på Bluetooth på en mobiltelefon. Det aktiveres umiddelbart, altså uten bekreftelse.
  • Å endre visning av innhold. For eksempel så kan man bytte mellom å vise pris per måned eller år. Avhengig av situasjonen, bør man vurdere om andre komponenter som Tabs er et bedre valg.

Ikke bruk veksleknapper dersom brukeren skal bekrefte et valg. Et eksempel på det er når veksleknapper benyttes som en Checkbox i et skjema.

Riktig

Skrur av/på mørk modus umidderlbart uten bekreftelse fra brukeren

Feil

Ønsker bekreftelse fra brukeren ved å benytte veksleknapp som CheckBox

Vi tilbyr andre komponenter som kan brukes dersom man ønsker at brukeren skal bekrefte valget sitt. Under ser du noen eksempler:

  • Checkbox: I tilfeller der man ønsker å tilby flere valg og skal velge et eller flere valg.
  • RadioButton: I tilfeller der man ønsker å tilby flere valg og skal kun velge ett valg.
  • Select: I tilfeller der man ønsker å tilby mange valg og skal kun velge ett valg.
  • Autosuggest: I tilfeller der man ønsker å tilby mange valg som forslag via fritekst og skal kun velge ett.

I tillegg bør man etterstrebe å følge disse prinsippene:

  • Bruk korte og beskrivende navn.
  • Mellomrom bør unngås hvis mulig.
Pris per

100 kr/mnd

Riktig

Korte og beskrivende valg uten mellomrom

Vis pris per

Feil

Unødvendig lange valg med mellomrom

Eksempler på bruk

React API

Her finner du en oversikt over props på komponentene i pakken.