Toggle

A two-state button that can be toggled on or off.

Examples

Here's a basic example of how to use the Toggle component:

Example not found

Example not found

Example not found

Example not found

Use the pressed and onPressedChange props to control the toggle's state.

Example not found

Example not found

Example not found

Example not found

Use the disabled prop to disable the toggle.

Example not found

Example not found

Example not found

Example not found

Use the Toggle.Indicator component to render different indicators based on the state of the toggle.

Example not found

Example not found

Example not found

Example not found

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultPressed`		`boolean` The default pressed state of the toggle.
`onPressedChange`		`(pressed: boolean) => void` Event handler called when the pressed state of the toggle changes.
`pressed`		`boolean` The pressed state of the toggle.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The fallback content to render when the toggle is not pressed.

These are the properties available when using Toggle.Context, useToggleContext hook or useToggle hook.

Property	Type
`pressed`	`boolean` Whether the toggle is pressed.
`disabled`	`boolean` Whether the toggle is disabled.
`setPressed`	`(pressed: boolean) => void` Sets the pressed state of the toggle.