PrimitiveAvailable

Switch

An immediate binary setting with explicit on/off state.

Autosave on

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/switch.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

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

export default function Demo() {
  const [enabled, setEnabled] = useState(true);
  return (
    <div className="flex items-center gap-3">
      <Switch id="auto-save" checked={enabled} onCheckedChange={setEnabled} />
      <Label htmlFor="auto-save">Autosave {enabled ? 'on' : 'off'}</Label>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

CheckedUncheckedDisabled

Document initial, selected, disabled and focus states. Selection changes an indicator or position as well as color.
Use Space for selection controls; arrow keys change radios and sliders. Checkbox supports a mixed state.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
checked	boolean	uncontrolled	Current setting.
onCheckedChange	function	—	Reports the new setting.

Accessibility

Rules that should remain intact when adapting the component to a product.

Use a stable setting label and reflect checked state. A switch changes a setting, not form selection.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.