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

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_search-box';

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

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.