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.

Component API

SwitchField

The SwitchField component toggles a setting on or off.

Switch

The Switch component renders the switch label.

See the React Aria for the full API reference.