Search Input

Variation of a text input specifically for entering search queries.

#

#

#

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

#

#

  • 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.

#

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

#

Inherits margin props.

NameDefaultDescription
autoFocusfalseboolean

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.

On this page

  • Example
  • Usage
  • Sizes
  • Guidelines
  • When to use
  • Content
  • Props