Search bar

  1. Overview
  2. Sample pattern
  3. Style
  4. Theme
  5. Usage
  6. Behavior
  7. Interaction states
  8. Accessibility
  9. Responsive design
  10. Best practices
  11. Spacing
  1. Overview
  2. Sample pattern
  3. Style
  4. Theme
  5. Usage
  6. Behavior
  7. Interaction states
  8. Accessibility
  9. Responsive design
  10. Best practices
  11. Spacing

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

Search bar component sample

Style

A search bar includes a narrow but wide form field with placeholder text and a red button that is placed on the right.

Search bar component blueprint

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.

Search bar component button vs. CTA

Theme

Light theme

The light theme search bar includes a light theme form field and red button.

Search bar component, light theme

Dark theme

For now, the light theme search bar can also be used in the dark theme.

Search bar component, 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.

Search bar component usage

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.

Search bar component placeholder text options

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.

Search bar component styling changes

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.

Search bar component typeahead

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.

Search bar component form field errors

Interaction states

Learn more

Visit the Form or Button pages to learn more about interaction states.

Search bar component interaction state, link

Hover

A blue line appears at the bottom of the form field indicating it is selectable.

Search bar component interaction state, hover

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.

Search bar component interaction state, focus

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.

Search bar component interaction state, active

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.

Search bar component tab order

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

Search bar component responsive design, desktop

Tablet

Search bar component responsive design, tablet

Mobile

Search bar component responsive design, mobile

Best practices

Long placeholder text

Do not write placeholder text too long, it should be short and to the point (maximum 30 characters).

Search component best practice 1

Call to action as button

Do not replace the button with a call to action.

Search component best practice 2

Different style or color

Do not use a different button color or style when using a search bar on Red Hat marketing websites.

Search component best practice 3

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.

Search component best practice 4

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.

Search component best practice 5

Rearranging the component

Do not rearrange a search bar by placing the button below the form field or changing its width.

Search component best practice 6

Spacing

A search bar uses space tokens to define spacing values between elements.

Search bar spacing
Example Token Description
6 --rh-space-sm 6px spacer
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer