Search Field

Related components

Search input

SearchField renders a field composed of an SearchInput, a Label and a InlineMessage. It is the preferred way to render a form field for search inputs.

In addition to text Label (required) and a validation error (optional), SearchField accepts all the same props as SearchInput and will pass them on to the SearchInput it renders. However, as with all our composed components, SearchField’s className prop will be applied to a containing div—the styling of the individual components inside SearchField cannot be altered.

Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the SearchInput, Label and InlineMessage components.

<Form>
  <SearchField
    name="Email address"
    label="Email address"
    placeholder="your.name@example.com"
    type="email"
    className="w-80"
  />
</Form>

API Reference