Switch

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/switch

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-merge

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

Sometimes you may want a switch to use a checkbox-like layout, with the control on the left and the label on the right.

Component API

SwitchField

Switch