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 indeterminate 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)

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 table first column for row selection

Name Email 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
0 items selected

CSS Classes Reference

Custom Checkbox Component

  • pa-checkbox - Base custom checkbox (wraps input + box + label)
  • pa-checkbox__box - Visual checkbox element
  • pa-checkbox__label - Label text
  • pa-checkbox--xs - Extra small size
  • pa-checkbox--sm - Small size
  • pa-checkbox--lg - Large size
  • pa-checkbox--xl - Extra large size
  • pa-checkbox--x - X mark instead of checkmark
  • pa-checkbox--disabled - Disabled appearance

Checkbox List Container

  • pa-checkbox-list - Base list container (vertical)
  • pa-checkbox-list--compact - Reduced padding
  • pa-checkbox-list--bordered - Border around list
  • pa-checkbox-list--striped - Zebra striping
  • pa-checkbox-list--inline - Horizontal wrapping layout
  • pa-checkbox-list--grid - Auto-fill grid layout
  • pa-checkbox-list--2col - Two-column grid
  • pa-checkbox-list--3col - Three-column grid

Checkbox List Items

  • pa-checkbox-list__item - List item
  • pa-checkbox-list__item--selected - Selected state
  • pa-checkbox-list__item--disabled - Disabled (feature unavailable)
  • pa-checkbox-list__item--locked - Locked (requires permission)
  • pa-checkbox-list__label - Clickable label wrapper
  • pa-checkbox-list__text - Text content
  • pa-checkbox-list__description - Secondary description
  • pa-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
Type to search or use /p for products, /o for orders, /u for users, /i for invoices
↑↓ Navigate
←→ Pages
↵ Select
Esc Close

Settings

👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
  • 📊 Data Grid