SearchBar
Search input component with icon and styling.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
placeholder | string | No | 'Search' | Placeholder text for input |
value | string | No | — | Controlled input value |
onChange | (value: string) => void | No | — | Change handler |
onClear | () => void | No | — | Clear button handler |
showSubmit | boolean | No | false | Show submit (search) button |
showShortcutHint | boolean | No | false | Show / keyboard hint when empty |
inputId | string | No | auto | Input element id |
inputRef | Ref<HTMLInputElement> | No | — | Ref to the input element |
name | string | No | 'search' | Input name |
className | string | No | — | Outer wrapper classes |
containerClassName | string | No | — | Inner container classes |
fieldClassName | string | No | — | Field shell classes |
inputClassName | string | No | — | Input element classes |
Usage
import { SearchBar } from '@/components/molecules/SearchBar';
<SearchBar placeholder="Search articles..." showShortcutHint />Features
- Compact
h-10pill field aligned with the Ask Dex trigger - Search icon on the left
- Optional
/shortcut hint (hidden while the field has a value) - Optional clear and submit controls
- Uses design system colors and typography
Notes
- Client-side component (uses
'use client') - Uses Icons component for search / clear icons
- Keyboard focus-on-
/is handled by consumers (e.g.HeaderSearch), not by SearchBar itself