Switch - Shadcn Ui — ContextQMD

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 radix-ui

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

<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

Choice Card

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

Disabled

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

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.

Size

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

RTL

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

API Reference

See the Radix Switch documentation.