Toggle

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

Anatomy

<Toggle.Root>
  <Toggle.Indicator />
</Toggle.Root>

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

Use the disabled prop to disable the toggle.

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

Renders a <button> element.

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.

Renders a <div> element.

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.

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.