PedanticDesign System · aCo

Search

One pill input, one labelled Search button, one clear job. Search results report their count in words — never by implication.

Search form

Live example — search form

<form class="pds-search" role="search" action="/search" method="get">
  <label class="visually-hidden" for="site-search">Search the design system</label>
  <input class="pds-search__input" id="site-search" name="q" type="search"
    placeholder="Search components" autocomplete="off">
  <button class="pds-btn pds-btn--primary" type="submit">Search</button>
</form>

Working example — filtering a list

The demo below filters the component index as you search and announces the result count through an aria-live region, so the outcome is available to every reader.

Live example — component index search

Showing all 8 components.

Rules

Do

Give the form role="search" and the input a real label — visually hidden is fine, missing is not.

State the result count on the results view (“8 results for ‘buttons’”) and offer a way to clear the search.

Don’t

Don’t use the placeholder as the label, and don’t use an icon-only submit button.

Don’t filter results on every keystroke without an accessible announcement of what changed.

Accessibility notes