Switch

typescript

import { Switch } from 'svogg-components';

Component for toggling a binary state. Uses an internal checkbox element which could be used in conjunction with forms.

Not that when overriding styles, CSS variables --width and --border needs to be set with fixed pixel values on the root element in order for the toggle animation to not break. Like so:

css

.svogg-switch {
	/* Overrides variables */
	--width: 48px;
	--border: 2px;
}

Demo

Code

I am NOT checked!

Switch

Props
Name	Type	Required	Default	Description
`checked`	`boolean`	`false`	`false`	Checked state
`name`	`string`	`false`	`-`	HTML `name` attribute for internal checkbox element
`label`	`string`	`false`	`-`	HTML `aria-label` attribute for outer switch element

CSS

Class	Description
`.svogg-switch`	Applied to outer element
`.thumb`	Applied to inner element
`.checked`	Applied to outer element when checked

Enter or Space
1. Toggles checked state

Switch

Switch

CSS

Keyboard navigation