Search Field

Type and search, exploring your data like searching for stars with a telescope, quick and responsive.

Basic

A search field is a box where you can type in keywords to search for something, like finding content on a website.

Installation

In the terminal, run the following command to begin:
npx hq-kit add search-field

Controlled

Like other fields, the search field can be controlled by managing its value through the value prop.

You have typed:

With Label

You can add a label to the search field by using the label prop.

Validation

Add a validation message to the search field by setting the validationMessage prop.

Pending

Show a loading indicator to indicate that the search field is in a pending state by using the isPending prop.

Disabled

Disable the search field by using the isDisabled prop.

Text FieldTextarea