Switch
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/switch
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components cn
Anatomy
import { Description } from "@/components/ui/field"
import { SwitchField, Switch } from "@/components/ui/switch"<>
<SwitchField value="profileVisible">
<Switch>Public profile</Switch>
<Description>Allow others to see your profile.</Description>
</SwitchField>
<SwitchField value="searchEngineIndexing">
<Switch>Search engine indexing</Switch>
<Description>
Allow search engines to index your profile.
</Description>
</SwitchField>
</>Examples
Description
You can add a description to the switch by passing the description prop or using the Description component.
Controlled
You can manage the switch's state by setting the isSelected prop.
Uncontrolled
You can also use the uncontrolled version of the switch.
Disabled
A disabled switch cannot be toggled and is non-interactive.
Custom layout
Place the switch control on the left and its label on the right.
Component API
SwitchField
SwitchField extends the React Aria Components <SwitchField> component.
classNamestringSwitch
Switch extends the React Aria Components <SwitchButton> component.
classNamestringSee the React Aria for the full API reference.
