Search
A native search input. You choose what it searches.
Button · Checkbox · Heading · Modal · Sidebar · Table
Usage
import { Search, Label, Button } from '@fwenthehunter/friendly-ui';
<form action="/search" role="search">
<Label htmlFor="query">Search articles</Label>
<Search id="query" name="q" placeholder="Search…" />
<Button type="submit">Search</Button>
</form>Renders input type="search" with the same styles as Input. In Chromium and Safari, the native clear control uses a themed cross instead of the blue browser icon. Override --fui-search-clear to change its color; browsers without this native control keep their own behavior. Pair it with a label, or provide aria-label. A named search input submits normally in a form.
The preview uses a small client wrapper to filter local items with value and onChange. The primitive itself does not fetch data, debounce requests, or provide autocomplete.
Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.