mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
Danny WhiteandJoshen Lim
e900020014
* basics * code editor * template editor * validator cleanup * validator fixes * style tweaks * validator * style improvements * copy * related setting * clearer ternary * handle path in related setting * copywriting fixes * smtp copy cleanup * fix type * remove related setting work * copy nit * backwards compatability * fix type error * copy cleanup * revert horizontal subject field * remove extraneous hover * remove excess padding * fix whitespace * document whitespace issue * simplify spam check * fix saved value issue * fix spacing * Add console logs * Clean console logs * Small improvements + clean ups --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
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_Shadcn_
|
||
control={form.control}
|
||
name="enabled"
|
||
render={({ field }) => (
|
||
<FormControl_Shadcn_>
|
||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||
</FormControl_Shadcn_>
|
||
)}
|
||
/>
|
||
</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" />
|