Usage

import { SearchField } from "@opengovsg/oui"

<SearchField aria-label="Search" />

The SearchField component provides an accessible search input with a built-in search icon and clear button. The clear button automatically appears when the field has a value and hides when empty.

If the component does not have a visible label (by passing a label prop), an aria-label or aria-labelledby prop must be passed instead to identify it to assistive technology.

Examples

With Label and Description

Provide clear instructions to users with labels and descriptions.

With Error Message

Combine isInvalid and errorMessage props to show validation errors.

Disabled

Use the isDisabled prop to disable the search field.

Sizes

Use the size prop to change the size of the field. Defaults to "md".

With Placeholder

Use the inputProps prop to pass additional props to the underlying input element, such as a placeholder.

Custom Search Icon

Use the searchIcon prop to replace the default search icon with a custom one.

Hidden Search Icon

Set the searchIcon prop to null to hide the icon entirely.

Custom Clear Icon

Use the clearIcon prop to replace the default clear (X) icon. This is useful for showing a loading spinner during async search operations.

With Action Element

Use the actionElement prop to render an element beside the input group, such as a search button or filter button.

Controlled

Use the value and onChange props to control the input value. The onSubmit callback is invoked when the user presses Enter.

Slots

• base: The root container wrapper.
• label: The label text element.
• fieldWrapper: The wrapper around the field group and the action element.
• group: The field group wrapper containing the search icon, input, and clear button.
• searchIcon: The search icon displayed at the start of the input.
• input: The input element.
• clearButton: The clear button displayed at the end of the input.