Checkbox lists, tri-state checkboxes, select-all patterns, and table row selection.
Custom Tri-State Checkbox
Fully styled custom checkboxes with 3 states: unchecked, checked, and indeterminate
Three States
X Mark Modifier
Size Variants
Select All Pattern
Interactive demo showing indeterminate state for partial selection
How it works:
- When none are selected → "Select All" is unchecked
- When some are selected → count shows partial state
- When all are selected → "Select All" is checked
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
• Locked - 50% opacity on checkbox only, warning color text with 🔒 icon
• Normal - Full opacity, pointer cursor, default text color
• Disabled - 50% opacity on entire item, not-allowed cursor
• Locked - 50% opacity on checkbox only, warning color text with 🔒 icon
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
Interactive Table with Checkboxes
Select-all functionality and row 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 |
|