ContextQMD
Back to Shadcn Ui

Switch

apps/v4/content/docs/components/base/switch.mdx

latest1.9 KB
Original Source
<ComponentPreview styleName="base-nova" name="switch-demo" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add switch
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="switch" title="components/ui/switch.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { Switch } from "@/components/ui/switch"
tsx
<Switch />

Examples

Description

<ComponentPreview styleName="base-nova" name="switch-description" />

Choice Card

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

<ComponentPreview styleName="base-nova" name="switch-choice-card" />

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

<ComponentPreview styleName="base-nova" name="switch-disabled" />

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

<ComponentPreview styleName="base-nova" name="switch-invalid" />

Size

Use the size prop to change the size of the switch.

<ComponentPreview styleName="base-nova" name="switch-sizes" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="switch-rtl" direction="rtl" />

API Reference

See the Base UI Switch documentation.