Switch

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download switch -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Switch } from "@/components/ui/switch";
import * as React from "react";
export default function SwitchExample() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Switch
      disabled={false}
      aria-label="Playground switch"
      checked={checked}
      onCheckedChange={setChecked}
    />
  );
}

Examples

Default

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

Disabled

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

With Label

import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.