Switch
A spring-driven thumb that stretches while pressed, like a real toggle under your thumb.
- Category: Inputs
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Switch
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | |
defaultChecked | boolean | false | |
onCheckedChange | (checked: boolean) => void | — | |
size | "sm" | "md" | "md" | |
disabled | boolean | — |
About Switch
Switch is an on and off control with a thumb that stretches while you press it and springs across when you let go, so it feels like a physical toggle rather than a coloured box. It is a real switch role with full keyboard support.
Switch is an input component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Switch
- Settings pages: notifications, privacy and feature flags.
- Inline toggles in tables and lists.
- Dark mode and preference controls.
- Forms where a boolean should read as on or off rather than checked.
How it works
The thumb's position and width are animated with a spring; pressing widens it toward the side it will travel. It is a button with role switch and aria-checked, so Space and Enter toggle it and screen readers announce the state.
It is a real form control: it has an accessible name, works with the keyboard alone, shows a visible focus ring and announces its state to screen readers. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Switch
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change size, disabled live, and the Code tab updates to match, so the snippet you copy already carries your values.
- checked (boolean).
- defaultChecked (boolean, default false).
- size ("sm" | "md", default "md").
- disabled (boolean).
Goes well with Switch
Switch is already composed into 2 ready-made sections, so you can see it in context or install the whole block.
- Features Bento: Features section
- Pricing Calculator: Pricing section
- Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Checkbox: An animated React checkbox: the check draws itself in, the box pops, indeterminate morphs to a dash
- Radio Group: An animated React radio group with roving focus and a highlight that glides between card options
- Input: An animated React text input with icons, a shake-once error and a success check that draws in
Install Switch
npx shadcn@latest add https://charcoalui.com/r/switch.jsonSwitch is free and MIT licensed. The command copies switch.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Gooey, a Pro piece: Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.
Frequently asked questions
- Does it work in a form?
- Yes. Control it with checked and onCheckedChange, or let it manage itself with defaultChecked, and pair it with a label element for an accessible name.
- How do I install Switch?
- Run npx shadcn@latest add https://charcoalui.com/r/switch.json. The shadcn CLI copies switch.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Switch free for commercial use?
- Yes. Switch is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Switch work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Switch?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Switch's props and source and get_install_command returns the exact command.