SearchField

Example

Related

• •
  TextField — Use for typical text input.

Props

Label

Every search field must have a label.

If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility.

Description

The description communicates a hint or helpful information, such as specific requirements for correctly filling out the field.

Error message

The errorMessage communicates validation errors when field requirements aren’t met. Prompting the user to adjust their input.

Disabled

A search field can be disabled by setting the isDisabled prop. This can be used to maintain layout continuity and communicate that a field may become available later.

Read only

The isReadOnly prop makes a field’s text content immutable. Unlike isDisabled, the field remains focusable and the contents can still be copied.

Patterns

Event handlers

The search field supports common handlers, like onChange, but also exposes:

• •
  onSubmit — called when the value is submitted by pressing the Enter key, or “Submit” equivalent on a software keyboard.
• •
  onClear — called when the value is cleared by pressing the Esc key, or the clear button.

Current: 

Submitted: