Search boxes enable search functionality on a page and are typically used in a navigation bar.

Default

The component expands to the full width of its container by default.

View examples of search box patterns

This component integrates with .p-navigation__nav for both small and large screens.

View examples of search box navigation patterns

Design

For more information view the search design spec, which includes the specification in markdown format and a PNG image.

For more interactive information adding search view the navigation component.