/// Inputs

SearchInput

An Input specialised for queries — leading magnifier, sunken field, and a clear button once text is present.

import { SearchInput } from "@protocore/pds";

View as Markdown

Basics

A query field built on Input: it carries a leading magnifier, reports edits through onValueChange, and reveals a clear × once there's text. Works uncontrolled with defaultValue.

Controlled filter

The everyday use: control value, filter a list on every keystroke, and let the built-in clear button reset the query. Clearing also fires onValueChange("") and refocuses the field.

eu-central-1
eu-central-3
us-east-1
ap-south-2
sa-east-1

Sizes

Inherits Input's sm · md · lg heights — size it to sit in a toolbar, a filter bar, or a page header.

When to use

Use SearchInput for free-text filtering over a set you already show — a table, a list, a grid of nodes. It's a presentation-level query box: you own the matching logic.

Need type-ahead that *selects* one item from a list of options? Use Combobox.
Building an app-wide, keyboard-summoned launcher (⌘K)? Use CommandPalette.
Assembling several filters (chips, selects) plus a query? Compose SearchInput inside a FilterBar.

Do & don't

Use it to filter content that's already on screen.
Debounce expensive queries in your onValueChange handler.
Let the built-in clear button reset the query rather than adding your own.
Give it a descriptive placeholder ("Filter nodes…").

Don't

Don't use SearchInput to pick one option from a set — that's Combobox.
Don't reimplement the magnifier or clear affordance; they're built in.
Don't pass startAdornment/endAdornment — the specialisation owns those slots.
Don't treat it as a global launcher; that's CommandPalette.

Accessibility

Keys	Action
`Type`	Update the query; fires onValueChange on each edit.
`Tab`	Move focus to the clear button once text is present.
`Enter / Space (on ×)`	Clear the query and refocus the field.

Renders a `type="search"` input with `role="searchbox"`.
The clear button is labelled "Clear search" and only appears when there's text.
Controlled via `value` + `onValueChange`; uncontrolled via `defaultValue`.
When `disabled`, the clear button is removed from the tab order.

`SearchInput` props

Prop	Type	Default	Description
`className`	`string`	—
`defaultValue`	`string`	—	Initial query value when uncontrolled.
`invalid`	`boolean`	—	Mark the field invalid — danger border plus `aria-invalid`.
`onValueChange`	`((value: string) => void)`	—	Fires with the new query string on every edit and when cleared.
`size`	`enum`	—	Control height: `sm` (32) · `md` (36, default) · `lg` (40).
`style`	`CSSProperties`	—
`value`	`string`	—	Controlled query value.