SearchField renders a field composed of an SearchInput, a Label and a InlineMessage

SearchField 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 css prop will be applied to a containing Box—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="[email protected]"
type="email"
css={{ width: 320 }}
/>
</Form>

API Reference

PropTypeDefaultRequired
size
"sm" | "md"

-

-

state
"error"

-

-

cssCSSProperties

-

-

namestring

-

asJSX.IntrinsicElements

-

-

type
"number" | "text" | "search" | "email" | "password" | "tel" | "url"

-

-

clearText
string

-

-

labelstring

-

error
string

-

-

prompt
{ link: string; label: string; }

-

-

description
string

-

-

hideLabel
boolean

-

-

validation
ValidationOptions

-

-