Switch

3.4.4

Switches toggle the state of a single item on or off.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

Namn	Typ	Beskrivning
checked	`boolean`	If true, the component is checked.
className	`string`	Optional CSS class name.
customAttribute	`{ attribute: string; value: string \| number }`	Used for testing. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
disabled	`boolean`	If true, the component is disabled.
inputProps	`InputHTMLAttributes`	Additional input properties to be applied to the switch element.
isInCard	`boolean`	If true, removes focus styling when the switch is part of a SwitchCard.
listOffset	`boolean`	Adjusts the list offset for the switch component.
name *	`string`	The name attribute of the switch. Used to distinguish elements when a form changes.
onChange	`(event: ChangeEvent, checked: boolean) => void`	Callback fired when the switch is clicked.
checked	`boolean`	If true, the component is checked.
className	`string`	Optional CSS class name.
customAttribute	`{ attribute: string; value: string \| number }`	Used for testing. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
disabled	`boolean`	If true, the component is disabled.
inputProps	`InputHTMLAttributes`	Additional input properties to be applied to the switch element.
isInCard	`boolean`	If true, removes focus styling when the switch is part of a SwitchCard.
listOffset	`boolean`	Adjusts the list offset for the switch component.
name *	`string`	The name attribute of the switch. Used to distinguish elements when a form changes.
onChange	`(event: ChangeEvent, checked: boolean) => void`	Callback fired when the switch is clicked.

Installation

npm install @sj-ab/component-library.ui.switch

Länkar

Best practices

Tillgänglighet

Visuell design

När en Switch aktiveras blir den grön, dess reglage flyttas till höger och vi visar en kryssikon i det gröna fältet. Alla dessa tre indikatorer behövs för att ovana användare inte ska missförstå komponentens status.

Switch som inte är aktiverad, med reglaget till vänster och utan grön färg.

Switch i inaktivt läge.

Switch i aktivt läge, med reglaget till höger, grön färg och en kryssikon.

Switch i aktivt (kryssat) läge.

Klickyta

Switch har en inbyggd minsta klickyta på 68px x 44px som aldrig får underskridas. Denna yta behövs för att reglaget ska vara enkelt att träffa med fingret för användare med nedsatt motorik.

Switch med sin minska klickyta.

Semantik

Switch presenteras för hjälpmedel som en vanlig HTML-kryssruta, det vill säga <input type="checkbox">. Den kan antingen vara kryssad eller inte kryssad.

Textetikett

Switch ska alltid kombineras med en synlig text så att användaren förstår vad det är som reglaget slår av eller på.

Texten ska vara kodad i ett <label>-element så dess namn även framgår för skärmläsare. Använd komponenten <FormControlLabel> för detta.