Search input
Compact, controllable search field with leading icon, optional shortcut hint, and a clear affordance that appears once a value is set. Includes a loading state for async queries.
Included in the single kansho full pack. Components are not offered as separate installs.
States
Component documentation
Search Input
components/inputs/search-input.tsxPurpose
Provides a search field with leading icon, loading feedback, clearing, and an optional shortcut hint.
Appropriate use
Use for filtering a local or remote collection when users benefit from a dedicated search affordance.
Example
components/inputs/search-input.tsx has a representative live example in the "States" section on /components/search-input.
States
Supports sm and md sizes, empty and populated value, loading, clearable, error, disabled, and shortcut-hint states.
API and props
SearchInput extends native input attributes with loading, size, onClear, shortcutHint, status, and ref.
Dependencies
React, Lucide icons, Spinner, Kbd, Field, and the Kansho cn utility.
Accessibility
Uses a native text input by default while allowing another input type, marks error state, names the clear action, and announces Loading results through the Spinner's polite status region.
Limitations
The shortcut hint is presentational only; the caller must implement the advertised keyboard shortcut and debounce remote queries.
Source
Source: components/inputs/search-input.tsx.
Full pack
components/inputs/search-input.tsx is documented at /components/search-input and installs only through the single Kansho full pack; no individual component install is offered.