Yugen UI

Checkbox

Checkbox cho phép chọn một hoặc nhiều lựa chọn độc lập trong một tập hợp.

Hỗ trợ trạng thái indeterminate cho checkbox “chọn tất cả” khi chỉ một phần mục con được chọn.

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 { Checkbox } 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

unchecked, checked, indeterminate, disabled.

Kích thước & vị trí label

medium (16px), large (20px); label trước hoặc sau.

Cách dùng

Nên
  • Xếp danh sách checkbox theo chiều dọc.
  • Label mô tả trạng thái khi được chọn.
Không nên
  • Không dùng Checkbox cho thay đổi có hiệu lực tức thì — dùng Switch.
  • Không dùng cho lựa chọn loại trừ nhau — dùng RadioGroup.

Props

Prop · KiểuMặc địnhMô tả
labelReactNodeMặc định: —Nhãn bấm được.
checked / defaultCheckedboolean | "indeterminate"Mặc định: —Controlled / uncontrolled.
onCheckedChange(checked: boolean | "indeterminate") => voidMặc định: —Callback khi đổi.
size"medium" | "large"Mặc định: "medium"Ô 16 / 20px.
labelPosition"after" | "before"Mặc định: "after"Vị trí label.