Components

Toggle

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

Installation

pnpm dlx shadcn@latest add @reui/base-toggle

This component is based on Base UI Toggle.

Prop	Type	Default	Description
`defaultPressed`	`boolean`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
`pressed`	`boolean`	-	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
`onPressedChange`	`(pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void`	-	Callback fired when the pressed state is changed.
`disabled`	`boolean`	`false`	Whether the component should ignore user interaction.
`className`	`string \| ((state: Toggle.State) => string)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.

Attribute	Type	Description
`data-pressed`	-	Present when the toggle button is pressed.

On This Page

Components

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

pnpm dlx shadcn@latest add @reui/base-toggle

This component is based on Base UI Toggle.

Prop	Type	Default	Description
`defaultPressed`	`boolean`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
`pressed`	`boolean`	-	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
`onPressedChange`	`(pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void`	-	Callback fired when the pressed state is changed.
`disabled`	`boolean`	`false`	Whether the component should ignore user interaction.
`className`	`string \| ((state: Toggle.State) => string)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.

Attribute	Type	Description
`data-pressed`	-	Present when the toggle button is pressed.

On This Page