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.
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.
100 kr/mnd
Riktig
Korte og beskrivende valg uten mellomrom
Feil
Unødvendig lange valg med mellomrom
Eksempler på bruk
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
pressed | ingen | Ikke påkrevd | boolean | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
onClick | ingen | Ikke påkrevd | MouseEventHandler<HTMLButtonElement> | undefined | |
disabled | ingen | Ikke påkrevd | boolean | undefined | |
helpLabel | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
labels | ingen | Påkrevd | [string, string] | |
onToggle | ingen | Påkrevd | (value: string) => void | |
defaultValue | ingen | Ikke påkrevd | string | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
hideLegend | false | Ikke påkrevd | boolean | undefined | |
children | ingen | Påkrevd | ReactNode |