Switch
Switch turns a setting on or off, taking effect immediately.
Use it for system or app settings that don't need a Save button.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Switch } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
States
off, on, disabled.
Label before
Suits settings lists aligned to the right.
Glass (Yugen Labs)
Press and hold: the thumb turns to glass and stretches, like a switch on a glass bar.
Usage
Do
- The label names what gets turned on, not the action (“Wi-Fi”, not “Turn on Wi-Fi”).
Don't
- Don't use Switch in a form that has a Submit button. Use Checkbox.
Props
| Prop · Type | Default | Description |
|---|---|---|
| labelReactNode | Default: — | Label. |
| checked / defaultCheckedboolean | Default: — | Controlled / uncontrolled. |
| onCheckedChange(checked: boolean) => void | Default: — | Called when the value changes. |
| name / value / required / formstring / string / boolean / string | Default: — | Attributes of the native <input>: the value goes with the form, FormData and autofill. ref points to HTMLInputElement (type="checkbox" role="switch"). |
| labelPosition"after" | "before" | Default: "after" | Label position. |
| material"glass" | Default: — | Yugen Labs — the thumb turns to glass and stretches while pressed. |