Nexus DSdocs

Switch

Installation

npm install @radix-ui/react-switch@^1.2.6 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/utils.ts
components/switch/index.ts
components/switch/switch.tsx

The code below also uses:

npm install @radix-ui/react-label@^2.1.7
components/label/index.ts
components/label/label.tsx

Code

'use client';

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

export default function SwitchDemo() {
  return (
    <div className="nx:flex nx:items-center nx:gap-2">
      <Switch id="switch-demo-airplane" />
      <Label htmlFor="switch-demo-airplane">Airplane mode</Label>
    </div>
  );
}

Props

Switch

Switch props
PropTypeDefaultDescription
size"default" | "sm" | null"default"No description

Examples

Sizes

'use client';

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

export default function SwitchSizes() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-sizes-sm" size="sm" />
        <Label htmlFor="switch-sizes-sm">Small</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-sizes-default" size="default" />
        <Label htmlFor="switch-sizes-default">Default</Label>
      </div>
    </div>
  );
}

Checked

'use client';

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

export default function SwitchChecked() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-checked-wifi" />
        <Label htmlFor="switch-checked-wifi">Wi-Fi</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-checked-bluetooth" defaultChecked />
        <Label htmlFor="switch-checked-bluetooth">Bluetooth</Label>
      </div>
    </div>
  );
}

Disabled

'use client';

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

export default function SwitchDisabled() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-disabled-location" disabled />
        <Label htmlFor="switch-disabled-location">Location services</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Switch id="switch-disabled-updates" disabled defaultChecked />
        <Label htmlFor="switch-disabled-updates">Automatic updates</Label>
      </div>
    </div>
  );
}

With description

Receive emails about new products and features.

'use client';

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

export default function SwitchWithDescription() {
  return (
    <div className="nx:flex nx:items-center nx:justify-between nx:gap-4 nx:rounded-lg nx:border-default nx:border-border-default nx:p-4">
      <div className="nx:space-y-0.5">
        <Label htmlFor="switch-with-description-marketing">
          Marketing emails
        </Label>
        <p
          id="switch-with-description-marketing-description"
          className="nx:typography-body-default nx:text-muted-foreground"
        >
          Receive emails about new products and features.
        </p>
      </div>
      <Switch
        id="switch-with-description-marketing"
        aria-describedby="switch-with-description-marketing-description"
      />
    </div>
  );
}