SearchInput

ReactProps

Github Storybook Markdown Copy for LLM

The SearchInput component is a specialized input field designed for search functionality, featuring a label, input field, and optional description. It supports built-in accessibility attributes and validation states.

Import

import { SearchInput } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• SearchInput is for free-text search queries, such as site search or database term filters.

Do

• Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
• Pressing Esc clears the input value.

Avoid

• Using SearchInput to pick from a predefined option list. Use Combobox or Select.

Examples

Default

With Placeholder

With Description

Use the description prop to provide additional context below the input.

Sizes

Use the size prop to control height, padding, and typography. Options are sm, md (default), and lg. Pass size="lg" to match the previous default height.

Controlled

Use the value or defaultValue prop to set the text value, and onChange to handle user input.

States