Theme

SwitchHealthy

A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on.

Basic usage

Tapping a toggle switch is a two-step action: selection and execution, whereas checkbox is just selection of an option and its execution usually requires another control.

Props

Switch

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>`	-
`checked`	`boolean`	Whether the switch is on or off.
`className`	`string`	The class attached to the <label> element that wraps the switch checkbox.
`defaultChecked`	`boolean`	The default checked value, useful for uncontrolled switches. https://reactjs.org/docs/uncontrolled-components.html#default-values
`disabled`	`boolean`	Will make switch read only.
`inputProps`	`Partial<Pick<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size" \| ... 285 more ... \| "onTransitionEndCapture"> & { ...; } & { ...; } & { ...; }, "size" \| ... 286 more ... \| "wrapperSize"> & Partial<...>, "size" \| ... 287 more ... \| "wrapperSize"> & { ...; }, "size" \| .....`	These props will be passed down into the hidden input checkbox element. `type` prop is not accepted since its hardcoded to "checkbox".
`labelText`	`string`	Label text that describes the switch option.
`labelPosition`	`"left" \| "right"`	Label text position relative to the switch. By default it's placed on the right.
`labelAlignment`	`"top" \| "middle"`	Sets the vertical alignment of the control with multi-line, wrapped labels. By default, it's aligned to middle.
`name`	`string`	Name of the input form control. Submitted with the form as part of a name/value pair.
`onChange`	`(event: FormEvent<HTMLInputElement>) => void`	Event handler for the switch. You can access its state with event.currentTarget.checked
`size`	`"medium" \| "small"`	Size variant
`value`	`string`	Current value of the form control. Submitted with the form as part of a name/value pair.

Accessibility

Switch renders a input type="checkbox"
By default, Switch will wrap the input with a label. If a different UI is desired, ensure id is provided to Switch and properly associate a Label with htmlFor
In the special case when no visual label text is required, make sure to set inputProps={{ 'aria-label': '> Your Accessible Label Text <' }} on the Switch component.