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.

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.
• 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.