Search bar
On this page
Overview
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.
Sample pattern
Style
A search bar includes a narrow but wide form field with placeholder text and a red button that is placed on the right.
Button
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.
Learn more
Visit the Button or Call to action element pages to learn more about how to use buttons and calls to action.
Theme
Light theme
The light theme search bar includes a light theme form field and red button.
Dark theme
For now, the light theme search bar can also be used in the dark theme.
Usage
A search bar is best used to give a user the ability to search for something and then display any relevant search results.
Layout
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.
Content
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.
Behavior
Form field
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.
Learn more
Visit the Form pattern page to learn more about form fields.
Typeahead
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.
Errors
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.
Learn more
Visit the Form pattern page to learn more about form field errors.
Interaction states
Learn more
Visit the Form or Button pages to learn more about interaction states.
Link
Hover
A blue line appears at the bottom of the form field indicating it is selectable.
Focus
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.
Active
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.
Tab order
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.
Accessibility
Key | Action |
---|---|
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. |
Responsive design
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.
Desktop
Tablet
Mobile
Best practices
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.
Disabled
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.
Solo button
Avoid using the search button on its own without a form field.
Learn more
Visit the Button component page to learn more about how to use buttons.
Rearranging the component
Do not rearrange a search bar by placing the button below the form field or changing its width.
Spacing
A search bar uses space tokens to define spacing values between elements.
Example | Token | Description |
---|---|---|
6 | --rh-space-sm | 6px spacer |
8 | --rh-space-md | 8px spacer |
16 | --rh-space-lg | 16px spacer |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.