Switch

Installation

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

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

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 [isSelected, setSelected] = React.useState(false);
  return (
    <Switch
      isDisabled={false}
      aria-label="Playground switch"
      isSelected={isSelected}
      onChange={setSelected}
    />
  );
}

Examples

Default

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

Disabled

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

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 React Aria.

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