Toggle

@component-controls/components

3.4.5

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

browse

docs

issues

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

Label

with label

	Name	Description	Default
ReactSwitchProps (16 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. @param checked @param event @param id (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	-
	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	-
	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)

package	imports	peer
react ^17.0.1	forwardRefRefFC	*
react-switch ^5.0.1	ReactSwitchReactSwitchProps
theme-ui ^0.6.0-alpha.7	jsxTextLabel

Docs

Toggle

Label

Stories

Overview

Custom Icons

Octicons

Checkbox