SearchInput

Use the SearchInput component for search queries. It includes a built-in Clear button for quick resets.

OverviewPropertiesUsage

When to use

• Users need to search or filter content within a simple, specific context (a table, a list, a page section).
• You need search styling and search affordances, such as the magnifying glass icon and clear button, which are built into the component.

When not to use

• Users need to enter general text data unrelated to search or filtering. Use TextInput instead.
• Users need structured filtering with multiple criteria (facets, date ranges, categories). Use FilterBar instead.
• Users are technical and need advanced filtering features. Use FilterField instead.

Position

• Make SearchInput the first input of the relevant section, list, or form, so users see it right away.
• Only use one SearchInput per section. Multiple search fields would be confusing and may indicate the need for better organization or different filtering options.

Content guidelines

Label (optional)

Include a label if the purpose or scope of the search field isn't obvious from the context or to align it with nearby form fields. The label should be descriptive but short (1-2 words).

• Do: Search all records
• Don't: Search (It's understood from the component and the default placeholder text.)

Placeholder (required)

Default text: Search

The default placeholder text works for most use cases, but if you customize the placeholder, do the following:

• Use the formula Add + [subject] or [Verb] + [subject].
• “Add” is the default verb for our placeholders. Don't replace it with alternatives such as “Enter,” “Fill,” or “Type,” unless there's a good reason to do so.
• Omit unnecessary articles (a, an, the).
• Don't add periods, ellipses, or exclamation marks.

Examples:

• Search all records
• Search name or ID

Use hint for essential information

Don't use the placeholder for information users need to complete the task, as placeholders disappear when users start typing.

Hint (optional)

Use the hint (FormFieldMessages component) for information users need to avoid errors or work efficiently. Always provide any error messages here too.

• Keep the hint short.
• Only add periods after sentences.