Switch

An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring through the data-checked:* utilities. Re-exports SwitchPrimitive for advanced composition.

Cby Cnippet

Install

npx @21st-dev/cli add cnippet.dev/cnippet-switch

Loading preview...

import { Switch } from "@/components/ui/cnippet-switch";

export default function SwitchDemo() {
  return (
    <label
      className="flex items-center gap-2 font-medium text-sm"
      data-slot="label"
    >
      <Switch />
      Marketing emails
    </label>
  );
}

More examples

CheckedOpen page →

Loading preview...

SizesOpen page →

Loading preview...

ColorsOpen page →

Loading preview...

DisabledOpen page →

Loading preview...

Theme toggleOpen page →

Loading preview...

Do not disturbOpen page →

Loading preview...

Privacy settingsOpen page →

Loading preview...

Dependencies

@base-ui-components/react

Source

ui.cnippet.dev

Published

7/9/2026

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Switch

Install

More examples

Dependencies

Tags

Source

Published

Similar components