Toggle

ReactSass

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.

<ToggleSwitch
        helpLabel={undefined}
        disabled={false}
    />

<ToggleSlider
        defaultValue="måned"
        labels={["måned", "år"]}
    />

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.

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.

Eksempler på bruk

Toggle som bytter mellom å vise hva forsikringen dekker og ikke dekker. Klikk for å se større.

Toggle som bytter mellom priser vist per måned eller per år. Klikk for å se større.