fab uifab ui

Switch

A toggle control for switching between two states.

'use client';

import { Switch } from '@/components/ui/switch';

export function SwitchDefault() {
  return <Switch />;
}

Installation

pnpm dlx shadcn@latest add @fab-ui/switch

Usage

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

Examples

With Label

'use client';

import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';

export function SwitchWithLabel() {
  return (
    <div className='flex items-center gap-2'>
      <Switch id='airplane-mode' />
      <Label htmlFor='airplane-mode'>Airplane Mode</Label>
    </div>
  );
}