Search Bar

A search bar accepts text from users, which can be used as input for a search (shown here with placeholder text).

Search Bar

Search Bar

Search Bar in Focus

Search Bar in Focus


Specs

Font, Color and Usage:

  • Default background fill: White (#FFFFFF)
  • Default background fill: Off White (#F7FAFD)
  • Search Bar: 44 tall
  • Search Title: SF UI Text, 16 points, Off White (#7F8F97)
  • Text: 8 padding
  • Text Alignment: centerY

Search Bar with redlines Search Bar without redlines

Redlines with Search Bar