Custom Tri-State Checkbox
Fully styled custom checkboxes with 3 states: unchecked, checked, and indeterminate
Three States
Size Variants
X Mark Modifier
Select All Pattern
Interactive demo showing isIndeterminate state for partial selection
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
Disabled state with reduced opacity
Checkbox Lists
Basic Checkbox Lists
Simple vertical checkbox lists with hover effects - full item area is clickable
Default List
With Descriptions
Item States
Clickable, disabled, and locked states with different visual feedback
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
Different styles for checkbox lists
Compact
Bordered
Striped
Checkbox Lists with Actions
Lists with action buttons for each item
Task List
Alternative Layouts
Inline, grid, and multi-column layouts
Inline Layout
Grid Layout
Two-Column Layout
Three-Column Layout
Tables with Checkboxes
Checkboxes in isTable first column for isRow selection
| 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
Select-all functionality and row selection
| 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 |