Search Field

import { SearchField } from "@hel/ui/search-field"

export function SearchFieldDemo() {

When to use it#

Use a search field to filter a list or find a record: a table of customers, a list of files, a help center. It is a text input with a search icon in front and a clear button at the end that shows up as soon as there is text. Clearing empties the field and puts the focus back in it, so people can type again straight away.

If the search should suggest answers as you type, use an Autocomplete instead.

Import#

Copyimport { SearchField } from "@hel/ui/search-field"

Usage#

SearchField is a complete Field by itself, so you do not wrap it in one. It has no visible label, which means you must give it an aria-label so a screen reader can name it.

Copy<SearchField placeholder="Search customers" aria-label="Search customers" />

Set the width with className, as the examples do with w-72.

Examples#

Filtering a list#

Control the text with value and onValueChange, and filter on every change. onValueChange receives the text as a string, and an empty string when the field is cleared, so the full list comes back on its own.

import * as React from "react"

import { SearchField } from "@hel/ui/search-field"

States#

disabled turns the field off and hides the clear button. defaultValue sets the text to start with when you do not control it.

Clear button label#

The clear button is named "Clear search" by default, and apps can translate it in their config. Use messages to change it for one field:

Copy<SearchField aria-label="Search" messages={{ clear: "Reset search" }} />

Props#

It also takes the props of an input, such as placeholder, name, autoFocus and onKeyDown. The type is always search.