Block · C-057 · erp

FilterBar

A filter form inside a search landmark: fields on top and the result with actions (clear, apply) in the bottom bar. Filters should be reflected in the URL.

Install

Blocks compose Koten primitives; install koten-theme first.

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

Anatomy

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

@/components/patterns/filter-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 is a search landmark with aria-label; fields get a visible label through Field or Select.
Clear is type=button, so it never submits; Enter does submit the filters.
resultLabel is not announced on its own: if the result changes live, wrap it in aria-live=polite.

Read the whole page

Markdown page
Agent index (llms.txt)
Full documentation (llms-full.txt)