Custom Tri-State Checkbox
Three States
Size Variants
X Mark Modifier
Select All Pattern
How it works:
- When none are selected → "Select All" is unchecked
- When some are selected → "Select All" shows indeterminate state (dash)
- When all are selected → "Select All" is checked
checkbox.indeterminate = true is set via JavaScript. The CSS :indeterminate pseudo-class handles the styling.
Disabled Checkboxes
Checkbox Lists
Basic Checkbox Lists
Default List
With Descriptions
Item States
State Comparison
State differences:
• Normal - Full opacity, pointer cursor, default text color
• Disabled - 50% opacity on entire item, not-allowed cursor, muted color (feature unavailable)
• Locked - 50% opacity on checkbox only, not-allowed cursor, warning color text with 🔒 icon (requires permission)
• Normal - Full opacity, pointer cursor, default text color
• Disabled - 50% opacity on entire item, not-allowed cursor, muted color (feature unavailable)
• Locked - 50% opacity on checkbox only, not-allowed cursor, warning color text with 🔒 icon (requires permission)
List Variants
Compact
Bordered
Striped
Checkbox Lists with Actions
Task List
Alternative Layouts
Inline Layout
Grid Layout
Two-Column Layout
Three-Column Layout
Tables with Checkboxes
| Name | Status | Actions | ||
|---|---|---|---|---|
| John Doe | john@example.com | Active | ||
| Jane Smith | jane@example.com | Active | ||
| Bob Johnson | bob@example.com | Pending | ||
| Alice Williams | alice@example.com | Active | ||
| Charlie Brown | charlie@example.com | Inactive |
Interactive Demo
| Product | SKU | Price | Stock | |
|---|---|---|---|---|
| Laptop Pro 15" | LPT-001 | $1,299 | In Stock | |
| Wireless Mouse | MSE-042 | $29 | In Stock | |
| USB-C Hub | HUB-123 | $49 | Low Stock | |
| Monitor 27" | MON-789 | $399 | Out of Stock | |
| Keyboard Mechanical | KBD-555 | $89 | In Stock |