Search Field

View source Report an issue Edit this page

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

Prop	Type	Default	Required
`size`	`"sm"` \| `"md"`	-	-
`state`	`"error"`	-	-
`css`	`CSSProperties`	-	-
`name`	`string`	-
`as`	`JSX.IntrinsicElements`	-	-
`type`	`"number"` \| `"text"` \| `"search"` \| `"email"` \| `"password"` \| `"tel"` \| `"url"`	-	-
`clearText`	`string`	-	-
`label`	`string`	-
`error`	`string`	-	-
`prompt`	`{ link: string; label: string; }`	-	-
`description`	`string`	-	-
`hideLabel`	`boolean`	-	-
`validation`	`ValidationOptions`	-	-