The Filter Input component is an accessible, responsive component that allows users to filter (real-time with a visual list). The interactive portions require JavaScript , which needs to be implemented separately from the static component.

Default Filter Input

The default implementation of the Filter Input component is meant to client-side filtering of an existing list in real-time. For accessibility purposes, to tie the Filter Input with the results, the Filter Input should include aria-controls="filter-results-container-id" where the ID matches the results container ID.

The input placeholder is required and should be descriptive of the filtering action. The 'Clear' button show/hide uses CSS to show/hide the button when the input is empty or filled. Without the placeholder, that interaction would break.

Filter Input Size Variations

The Filter Input component can be used in different sizes. The default size is medium. The small size can be implemented by adding the modifier, filter-input--small and is used when the Filter Input is used in a smaller context.

The larger size can be implemented by adding the modifier, filter-input--large . The large size is used when the Filter Input is used in a larger context, such as potentially a full-page implementation.