CSS Showcase · Live Demo

Checkboxes & multi-select.

A single selection component that shows classic checkboxes, bulk select, table rows, toggle switches, and chips — pick a device, then pick a design pattern for that device.

Featured demo

mobile · checklist
Select all flavors

mobile design patterns

checkboxes-checklist.css
/* Checklist grid */
.selection-list[data-pattern="checklist"] {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}

@container (min-width: 420px) {
  .selection-list[data-pattern="checklist"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 680px) {
  .selection-list[data-pattern="checklist"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

CSS features used

  • • Container queries
  • • CSS Grid auto-placement
  • • Custom checkbox styling
  • • Indeterminate state
  • • Toggle switch animation
  • • Semantic tokens