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


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

A cancel button is shown when the input has content, and a small amount of JavaScript is required to ensure that focus is returned to the relevant input field when the cancel button is clicked.

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


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

@import 'patterns_search-box';
@include vf-p-search-box;

// search box uses icons for its buttons, so you need to include them as well
@import 'patterns_icons';
@include vf-p-icons-common;
@include vf-p-icon-close;
@include vf-p-icon-search;

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


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.