Search input

Variation of a text input specifically for entering search queries.

#Example

#Usage

#Sizes

The size prop impacts font-size and height. Default is set to md.

#Guidelines

#When to use

• When entering a value in a text input immediately filters the content on page.
• Inside a form, which takes the user to the next page where content is filtered according to the entered search query.

#When not to use

• If you're collecting a value that gets validated and submitted, use a text input instead — search input is a filter, not a form field.

#Content

• Use sentence case for placeholder text.
• End placeholder text with three dots.

#Props

Inherits margin props.

Name	Default	Description
autoFocus	false	boolean Autofocus input on mount.
placeholder	—	string Placeholder to show inside input when value is blank.
value	—	string Input value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%" Input width.
size	"md"	"sm" | "md" | "lg" Input size.