mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Gildas Garcia
0facd341a6
## Problem We used to have a `_Shadcn_` suffix for all the shadcn form components because we also had `formik` form components. This is not needed anymore. ## Solution - Remove the suffix - Update all usages
88 lines
1.7 KiB
Plaintext
88 lines
1.7 KiB
Plaintext
---
|
||
title: Switch
|
||
description: A control for toggling between unchecked and checked.
|
||
component: true
|
||
links:
|
||
doc: https://www.radix-ui.com/docs/primitives/components/switch
|
||
api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
|
||
source:
|
||
radix: true
|
||
shadcn: true
|
||
---
|
||
|
||
<ComponentPreview name="switch-demo" peekCode wide />
|
||
|
||
## Installation
|
||
|
||
<Tabs defaultValue="cli">
|
||
|
||
<TabsList>
|
||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="cli">
|
||
|
||
```bash
|
||
npx shadcn-ui@latest add switch
|
||
```
|
||
|
||
</TabsContent>
|
||
|
||
<TabsContent value="manual">
|
||
|
||
<Steps>
|
||
|
||
<Step>Install the following dependencies:</Step>
|
||
|
||
```bash
|
||
npm install @radix-ui/react-switch
|
||
```
|
||
|
||
<Step>Copy and paste the following code into your project.</Step>
|
||
|
||
<ComponentSource name="switch" />
|
||
|
||
<Step>Update the import paths to match your project setup.</Step>
|
||
|
||
</Steps>
|
||
|
||
</TabsContent>
|
||
|
||
</Tabs>
|
||
|
||
## Usage
|
||
|
||
```tsx
|
||
import { Switch } from '@/components/ui/switch'
|
||
```
|
||
|
||
```tsx
|
||
<Switch />
|
||
```
|
||
|
||
### Relative positioning
|
||
|
||
When using Switch in custom flex layouts (especially with height constraints like `h-full`), you may need to add `relative` positioning to the parent container to ensure proper rendering of focus rings, form validation messages, and overflow.
|
||
|
||
```tsx
|
||
<div className="relative">
|
||
<FormField
|
||
control={form.control}
|
||
name="enabled"
|
||
render={({ field }) => (
|
||
<FormControl>
|
||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
</div>
|
||
```
|
||
|
||
You don’t need to add `relative` manually when using FormItemLayout as it provides the necessary positioning context automatically.
|
||
|
||
## Examples
|
||
|
||
### Form
|
||
|
||
<ComponentPreview name="switch-form" />
|