CSS Showcase · Live Demo

One picker. Many patterns per device.

Pick a device, then pick a design pattern for that device — desktop offers inline, two-pane, and combobox pickers; mobile offers a bottom sheet and a full-screen page.

Featured demo

mobile · sheet
CSS

mobile design patterns

selects-sheet.css
/* Bottom sheet (mobile) */
.select-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .75rem .75rem 0 0;
  animation: sheet-up .25s ease both;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

CSS features used

  • • Container queries
  • • CSS Grid responsive columns
  • • Custom select panels
  • • Chip / tag styling
  • • Mobile bottom sheet
  • • Semantic tokens