A Search bar is a horizontal grouping of a form field with placeholder text and a button. It allows a user to input text and then perform a search.
A search bar includes a narrow but wide form field with placeholder text and a red button that is placed on the right.
A search bar includes a button so a user can perform a search. A call to action link would only direct a user to a results page without actually performing a search, so a button must be used instead.
The light theme search bar includes a light theme form field and red button.
For now, the light theme search bar can also be used in the dark theme.
A search bar is best used to give a user the ability to search for something and then display any relevant search results.
A search bar can be used in most layouts. It has no set width other than the boundaries of whatever container or grid it is placed in.
The text within a search bar indicates how wide or narrow a search will be. If the text is generic (Enter your search term), a user might expect to search through an entire website. If the text is specific (Search all resources), a user might expect to search through an individual page.
When a user selects the form field to input text via cursor or keyboard, the placeholder text will disappear, the form field will have focus, and a blinking cursor will take its place. When a user starts typing, the text styling will change.
Typeahead allows a user to narrow down a displayed list of options when they input text within a form field, it is recommended for lists with more than 10 options.
If focus is moved from the form field to the button, an error will not be displayed. However, if a user tries to perform a search without any text in the form field, an error will be displayed.
A blue line appears at the bottom of the form field indicating it is selectable.
When the focus is moved to the form field via keyboard, the placeholder text will disappear and a blinking cursor will take its place. When the focus is moved away, the placeholder text will be visible again.
When the focus is moved to the form field via cursor, the placeholder text will disappear and a blinking cursor will take its place. When the focus is moved away, the placeholder text will be visible again.
When the Tab key is pressed repeatedly, the focus will highlight the form field first and then the button. A user can move the focus from the form field to the button without an error being displayed.
|Tab||Moves the focus to the button.|
|Shift + Tab||Moves the focus to the form field.|
|Enter (if text)||Triggers a search.|
|Enter (if no text)||Displays an error icon and text requiring a user to input text in the form field.|
A search bar mostly remains the same on large and small screens. While it can stretch horizontally to fit any container or grid, only the form field stretches whereas the button always stays the same size.
Long placeholder text
Do not write placeholder text too long, it should be short and to the point (maximum 30 characters).
Call to action as button
Do not replace the button with a call to action.
Different style or color
Do not use a different button color or style when using a search bar on Red Hat marketing websites.
Do not disable the button until a user inputs text in the form field. The button should always be active and if a user tries to perform a search without any text in the form field, an error should be displayed instead.
Avoid using the search button on its own without a form field.
Rearranging the component
Do not rearrange a search bar by placing the button below the form field or changing its width.
A Search bar uses PatternFly 4 spacers to define spacing values between elements.