Custom Tri-State Checkbox
Fully styled custom checkboxes with 3 states: unchecked, checked, and indeterminate
Three States
Size Variants
X Mark Modifier
Custom Glyphs via --base-icon-*
The checkmark and indeterminate dash are SVG masks reading --base-icon-check / --base-icon-indeterminate — the same tokens the web components use. Override those CSS variables (inline, on a wrapper, or in a theme) to swap the glyph without touching the component.
Per-checkbox override
Group override (wrapper sets both vars)
Both children inherit the wrapper's --base-icon-* — exactly how a theme would re-skin every checkbox at once.
Select All Pattern
Interactive demo showing isIndeterminate state for partial selection
- 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
• 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 |
CSS Classes Reference
Custom Checkbox Component
pa-checkbox- Base custom checkbox (wraps input + box + label)pa-checkbox__box- Visual checkbox elementpa-checkbox__label- Label textpa-checkbox--xs- Extra small sizepa-checkbox--sm- Small sizepa-checkbox--lg- Large sizepa-checkbox--xl- Extra large sizepa-checkbox--x- X mark instead of checkmarkpa-checkbox--disabled- Disabled appearance
Checkbox List Container
pa-checkbox-list- Base list container (vertical)pa-checkbox-list--compact- Reduced paddingpa-checkbox-list--bordered- Border around listpa-checkbox-list--striped- Zebra stripingpa-checkbox-list--inline- Horizontal wrapping layoutpa-checkbox-list--grid- Auto-fill grid layoutpa-checkbox-list--2col- Two-column gridpa-checkbox-list--3col- Three-column grid
Checkbox List Items
pa-checkbox-list__item- List itempa-checkbox-list__item--selected- Selected statepa-checkbox-list__item--disabled- Disabled (feature unavailable)pa-checkbox-list__item--locked- Locked (requires permission)pa-checkbox-list__label- Clickable label wrapperpa-checkbox-list__text- Text contentpa-checkbox-list__description- Secondary descriptionpa-checkbox-list__actions- Action buttons container
Table Checkboxes
pa-table__checkbox-col- Checkbox column (minimal width)pa-table__row--selected- Selected row highlight
Checkbox States (via input)
:checked- Checked state (checkmark):indeterminate- Indeterminate state (dash) - set via JS:disabled- Disabled state