Toggle

A high-quality, unstyled React toggle component that displays a two-state button that can be on or off.

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

Anatomy

Import the component and use it as a single part:

Anatomy

import { Toggle } from '@base-ui/react/toggle';

<Toggle />;

Name	Type	Default	Description
`pressed`Optional	`boolean \| undefined`	—	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
`defaultPressed`Optional	`boolean \| undefined`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
`disabled`Optional	`boolean \| undefined`	`false`	Whether the component should ignore user interaction.
`value`Optional	`Value \| undefined`	—	A unique string that identifies the toggle when used inside a toggle group.