Jump to main content

Search box


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.

Caution:

Space is allocated for the .p-search-box__reset and .p-search-box__button buttons, so both must be included in the implementation to avoid the appearance of excess padding.

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 Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework/scss/vanilla';
@include vf-base;

@include vf-p-search-box;

// search box uses icons for its buttons, so you need to include them as well
@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.