Block · C-042 · storefront

SearchBar

Catalogue search with a category select, a search field and a real submit button. Value and category can be controlled or left to the component.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/search-bar.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/search-bar.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The block uses the <search> element with aria-label, so it is announced as a search region.
The select and the input have associated labels; the placeholder is never the only hint.
The submit button keeps its accessible name even when its text is visually hidden on mobile.
Visible focus uses the system outline with a 1 px offset on select, input and button.

Read the whole page