Components

Switch

A control that allows the user to toggle between checked and unchecked states.

Installation

pnpm dlx shadcn@latest add @toui/switch

This component is built using Radix UI Switch primitives. For detailed information, please visit the full API reference.

This component is based on the Switch.Root primitive and includes the following custom props:

This is a custom component that provides context for permanent state and layout.

Prop	Type	Default
`permanent`	~~boolean~~	~~false~~
`className`	~~string~~	~~undefined~~

This is a custom component that provides visual indicators for the switch states.

Prop	Type	Default
`state`	~~enum~~	~~"off"~~
`className`	~~string~~	~~undefined~~

On This Page