Switch - Supabase — ContextQMD

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>

<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