Search
A search field is a text input with a leading magnifier. Its label is a required prop.
Search
Show code
<KbSearch label="Search requests" placeholder="Search requests" />When to use
- Use it at the top of a list or table to narrow it as the person types.
- Say what is searched: Search requests, not Search.
- Show results in place and keep the person's other filters.
Import
import { KbSearch } from "@/components/ui/KbField";
<KbSearch label="Search requests" placeholder="Search requests" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Required. The accessible name. |
…input props | InputHTMLAttributes | None | Everything native except className and style. |
Keyboard and screen readers
- Renders an input with type search and the label as its aria-label.
- The magnifier is decorative and hidden from assistive tech.
- Announce result counts politely with a status message where results change.