Toggle / Switch

<Toggle
	label='Demo'
	checked={data}
	onChange={(value) => setData(value)}
/>

If you need the toggle switch standalone, you can use the Switch component.

Other props are the same, with the exception of label and related props.

<Switch
	checked={data}
	onChange={(value) => setData(value)}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Icon, subtitle

Augment the label

<Toggle
	icon={icons.emptyRect}
	subtitle='Subtitle'
	label='Demo'
	checked={data}
	onChange={setData}
/>

Disabled

Prevent interactions with the toggle.

<Toggle
	label='Demo'
	checked={data}
	onChange={(value) => setData(value)}
	disabled
/>

Indeterminate state

Whether the toggle should be rendered in an indeterminate state.

<Toggle
	label='Demo'
	checked={data}
	onChange={(value) => setData(value)}
	isIndeterminate={data === null}
/>