Search Input
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Input field: The main text input for entering search queries.
- Search icon: Icon (usually a magnifying glass) indicating search functionality, typically at the start or end of the input.
- Clear button: Optional button to clear the current input value.
- Placeholder: Hint text for the expected search input.
- Dropdown/results panel (optional): Area below the input for displaying search suggestions or results.
States
- Default: Standard state, ready for input.
- Hover: Visual feedback when hovering over the input or icon.
- Focus: Highlighted border or shadow when the input is focused.
- Filled: Input contains a search query.
- Disabled: Input is non-interactive and visually muted.
- Error: Error state with warning border and message (if supported).
- With results: Dropdown or panel is visible with search suggestions/results.
Options
- value: Controlled value of the search input.
- placeholder: Placeholder text for the input.
- onChange: Callback when the input value changes.
- onSearch: Callback when a search is triggered (e.g., Enter key or icon click).
- isClearable: Show clear button to clear the input.
- disabled: Disable the input.
- error: Error state.
- icon: Custom search icon.
- results: Array of search suggestions or results to display.
- onResultSelect: Callback when a result is selected.
- theme: Theme (
default,alternative). - className: Custom class names for styling.
Behaviors
- Search trigger: Initiates search on Enter key, icon click, or programmatically.
- Clear: Clears the input value with the clear button or ESC key (if clearable).
- Keyboard navigation: Supports navigation through results with arrow keys and selection with Enter.
- Dropdown/results: Shows/hides suggestions or results based on input and focus.
- Accessibility: Uses ARIA attributes for screen readers and supports keyboard interaction.
- Disabled: Prevents interaction and visually mutes the component.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |