Toggle

@component-controls/components

3.15.0

Toggle components can be used to edit boolean values. Uses react-switch component.

browse

docs

issues

import { Toggle } from '@component-controls/components';

Custom Icons

	Name	Description	Default
ReactSwitchProps(19 properties)
	checked	The checked state of the switch. If true, the switch is set to checked. If false, it is not checked. boolean	false
	onChange	Invoked when the user clicks or drags the switch. checked describes the presumed future state of the checked prop. event is a native MouseEvent when the handle is clicked or dragged, and a SyntheticEvent at all other times. id is the ID prop of the switch. (checked: boolean, event: MouseEvent \| SyntheticEvent<MouseEvent \| KeyboardEvent, Event>, id: string) => void	-
	disabled	When true, the switch will no longer be interactive and its colors will be greyed out. boolean	-
	offColor	The switch will take on this color when it is not checked. Only accepts 3 or 6 digit hex colors, e.g., #888, #45abcd. Defaults to #888. string	-
	onColor	The switch will take on this color when it is checked. Only accepts 3 or 6 digit hex colors, e.g., #080, #45abcd. Defaults to #080. string	-
	offHandleColor	The color of the handle of the switch when not checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. string	-
	onHandleColor	The color of the handle of the switch when checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. string	-
	handleDiameter	The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. Defaults to undefined. number	-
	uncheckedHandleIcon	Icon to display on the handle while switch is unchecked. Defaults to undefined. Element	-
	checkedHandleIcon	Icon to display on the handle while switch is checked. Defaults to undefined. Element	-
	uncheckedIcon	An icon that will be shown on the switch when it is not checked. Set to false to show no icon. Defaults to an x icon. booleanElement	-
	checkedIcon	An icon that will be shown on the switch when it is checked. Set to false to show no icon. Defaults to a checked icon. booleanElement	-
	boxShadow	The box-shadow of the handle of the switch. Defaults to undefined. string	-
	activeBoxShadow	The box-shadow of the handle of the switch when it is active or focused. Do not set this to null as it is important for accessibility. Defaults to '0px 0px 2px 3px #33bbff'. string	-
	height	The height of the background of the switch, measured in pixels. Defaults to 28. number	-
	width	The width of the background of the switch, measured in pixels. Defaults to 56. number	-
	borderRadius	Border radius of the switch and the handle. Defaults to undefined. number	-
	className	The className of the outer shell of the switch. Defaults to undefined. string	-
	id	The id of the embedded checkbox. Defaults to undefined. string	-
ToggleOwnProps(2 properties)

Commits

Date	Author	Commit Message
4/27/2021	atanasster	fix: toggle default aria-label
12/28/2020	atanasster	feat: custom esm pages
5/14/2020	atanasster	feat: deque's axe-core ally testing plugin
3/21/2020	atanasster	docs: update Toggle component
2/28/2020	atanasster	chore: move to @component-controls/components