Thành phần
Checkbox
Tick, untick or mixed choice on Base UI Checkbox; checked is an ink fill plus a check glyph.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Install
bash
npx shadcn add @eloquent/checkboxUsage
tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
<Field orientation="horizontal">
<Checkbox name="newsletter" defaultChecked />
<FieldLabel>Subscribe to the morning edition</FieldLabel>
</Field>Without Field, wrap the checkbox in a <label>. Pass indeterminate for a mixed parent state.
States
Tick to accept before continuing.
You must accept the terms.
| State | Treatment |
|---|---|
| Unchecked | Paper fill, 1px ink border |
| Checked | Solid ink fill and a paper check glyph |
| Indeterminate | Solid ink fill and a paper minus glyph; aria-checked="mixed" |
| Focus | 2px ink outline, 2px offset |
| Invalid | 2px ink border, the Field's 2px ink rule and an ! message |
| Disabled | Halftone border and glyph, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move focus to and from the checkbox (disabled ones are skipped) |
| Space | Toggle between checked and unchecked |
Vietnamese
Ink adaptation
Upstream shadcn's radius, shadow, focus ring glow and primary-colour fill are removed. The 20px box sits in a 44px pointer target built from an ::after layer, so layout does not shift. There is no hover treatment: the control changes on press and focus. Built on Base UI Checkbox.