Switch
Switch bật hoặc tắt một trạng thái, có hiệu lực ngay lập tức.
Dùng cho cài đặt hệ thống/ứng dụng không cần bấm Lưu.
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { Switch } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Trạng thái
off, on, disabled.
Label trước
Phù hợp cho danh sách cài đặt căn phải.
Glass (Yugen Labs)
Nhấn giữ: thumb thành glass và dài ra, như công tắc trên thanh glass.
Cách dùng
Nên
- Label mô tả thứ được bật, không mô tả hành động (“Wi-Fi”, không phải “Bật Wi-Fi”).
Không nên
- Không dùng Switch trong form cần bấm Gửi — dùng Checkbox.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| labelReactNode | Mặc định: — | Nhãn. |
| checked / defaultCheckedboolean | Mặc định: — | Controlled / uncontrolled. |
| onCheckedChange(checked: boolean) => void | Mặc định: — | Callback khi đổi. |
| labelPosition"after" | "before" | Mặc định: "after" | Vị trí label. |
| material"glass" | Mặc định: — | Yugen Labs — thumb thành glass và dài ra khi đang nhấn. |