Jump to main content

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.

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.

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';
@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.

React

You can use search box in React by installing our react-component library and importing SearchBox component.

See the documentation for our React SearchBox component

For more interactive information adding search view the navigation component.