Components

Search

Search allows users to specify a word or phrase to find relevant content without the use of navigation; that is, a way to explore a website or application using keywords.

It can be used as the main medium for discovering content or as a filter to help the user find content.

This type of search engine will be used within the content of the web, such as a Hero or in tables.

Preview

Figma

Uses

When to use

In listings with many columns and content.

On screens with a lot of information.

To filter data within a data table.

It is recommended to use the placeholder text to guide and suggest to the user what queries can be used.

When not to use

When the screen has little information.

Behaviour

Action

Delete content

Type

Without button

With button

States

Default

Filled

Focus

Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The search component consists of an input with role="searchbox".

The search component has tabindex="0" to make it possible to access it using the tab key or to move the focus by programming.

It has the aria-controls property that identifies the element (or elements) whose content or presence is controlled by the element to which this attribute is assigned.

In its advanced version, it has a series of filters, whose button responsible for expanding or collapsing that content has the aria-expanded and aria-collapse properties.