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	booleanAutofocus input on mount.
placeholder	—	stringPlaceholder to show inside input when value is blank.
value	—	stringInput value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%"Input width.
size	"md"	"sm" | "md" | "lg"Input size.
onChange	—	InputHTMLAttributes<HTMLInputElement>["onChange"]Called when the input value changes.
onKeyDown	—	InputHTMLAttributes<HTMLInputElement>["onKeyDown"]Called on key down inside the input.
onKeyUp	—	InputHTMLAttributes<HTMLInputElement>["onKeyUp"]Called on key up inside the input.
onFocus	—	InputHTMLAttributes<HTMLInputElement>["onFocus"]Called when the input receives focus.
onBlur	—	InputHTMLAttributes<HTMLInputElement>["onBlur"]Called when the input loses focus.