Forms & Accessibility

Accessible markup first; style second. Ensure keyboard and screen‑reader users can complete tasks easily.

Mobile‑Friendly Inputs

Stacked Table Pattern

Turn wide tables into cards on small screens.

.stack-table {{ display: block; overflow: auto; }}
@media (max-width: 40rem) {{
  .stack-table table, .stack-table thead {{ display: none; }}
  .stack-table tr {{ display: grid; grid-template-columns: 10ch 1fr; padding: var(--space-2); }}
  .stack-table td::before {{ content: attr(data-label) ": "; font-weight: 600; }}
}}