Skip to content
Rechaj Design

list picker

List picker

Section titled “List picker”

Single-select list rendered inside a bottom sheet. The default for any picker on mobile.

See bottom-sheet.md for the host pattern, and DESIGN.md for the canonical CSS classes.

Anatomy

Section titled “Anatomy”
  • .lp-list — the scrollable list container
  • .lp-row — a single selectable row (left icon, label, optional sub, radio at right)
  • .lp-radio — the radio control. Active state uses --brand.

Rules

Section titled “Rules”
  • Selection commits on tap, not on a separate “Done” button (unless multi-select).
  • Active row gets a subtle --brand-dim background tint.
  • Long lists scroll inside the sheet body, not the sheet itself.