Search bar

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.