Earth Design System

Toggle API

API reference docs for theTogglecomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Prop	Type	Description	Default
`label`	`ReactNode`	Label for the toggle describing its purpose.	_
`isDisabled?`	`boolean`	Disables the toggle, making it non-interactive and visually styled as disabled.	`false`
`size?`	`'standard'\| 'large'`	The size of the toggle.	`standard`
`value?`	`string`	Defines the value of the toggle input, used when submitting a form.	_
`checked?`	`boolean`	Sets the checked state of the toggle when using controlled components.	_
`id?`	`string`	A unique ID for the toggle.	_
`name?`	`boolean`	The name attribute of the toggle, useful for grouping in forms.	_
`description?`	`ReactNode`	Description text displayed alongside the toggle, providing additional context.	_
`aria-describedby?`	`string`	The ID of the element that describes the toggle for accessibility.	_
`onBlur?`	`function`	Event handler triggered when the toggle loses focus.	_
`onClick?`	`function`	Event handler triggered when the toggle is clicked.	_
`onChange?`	`function`	Event handler triggered when the toggle value changes.	_