09 • Patterns · Search bar

Search bar with filters

Search primitive for logs, incidents, workers. Includes severity filter pills with role=checkbox (multi-select). Clear button appears when query is present.

Results
6 of 6
  • warning
    Camera offline — Gate B
    S-012 · 14m ago
  • danger
    PPE violation detected
    S-007 · 2h ago
  • info
    Shift handover completed
    S-003 · 3h ago
  • success
    Evacuation drill passed
    S-018 · 5h ago
  • warning
    Worker count anomaly
    S-007 · 6h ago
  • info
    Maintenance scheduled
    S-012 · 1d ago

Accessibility

  • role="search" on form; role="searchbox" on input.
  • Filter pills use role="checkbox" + aria-checked (multi-select semantics over radio).
  • Filter group has role="group" + aria-label for screen reader context.
  • Clear button has aria-label="Clear search"; only rendered when query is non-empty.
  • 3px focus ring on input and all controls (global WCAG 2.2 spec).