Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Eyelashes

Eyelashes

The Tabs component is used to group different contents of the same theme within a section. It allows the user to easily navigate between the different sections of a page.

Preview

Figma
Preview tabs

Uses

When to use

Use tabs to group related information into different categories, which helps reduce cognitive load. Tabs can be used to organize content such as forms, settings, and boards so that a user does not have to navigate out of their workflow to complete their task.

When not to use

The tabs should never be used for the main navigation. If the tabs become too complex, consider using another navigation pattern. The tabs should not be used to indicate progress. Use steps instead.

Behaviour

Type

Display tab type only text
Text Only
Display icon type tab on the left
Icon Left
Display tab type text plus label
Text + Tag
Display tab type icon on the left more label
Icon Left + Tag

States

Display of the tab with default status
Default
Display of the tab with hover status
Hover
Display of the tab with focus status
Focus
Display of the tab with selected status
Selected
Isualization of the tab with disabled status
Disabled

Responsive

The behavior in its mobile version changes in the last element, grouping in a dropdown the tabs that do not enter the screen being able to access and select them. The tabs to be displayed will be 1 or 2 depending on the length of your texts.

Display tab behavior when displaying a tab for long texts
Display a tab for long texts
Display tab behavior when displaying two tabs for short texts
Show 2 tabs for short texts

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 tab group component uses role="tablist" to correctly convey its functionality to assistive technologies. Each item that serves as a tab has role="tab" and is contained within the item with role="tablist". Each item that contains the content pane of a tab has the role="tabpanel". Because the tab list has a visible label, the tablist item has aria-labelledby set to a value that refers to the labeling item. Each element with role="tab" has the aria-controls property that refers to its associated tabpanel element. The active tab element has the aria-selected state set to true and all other tab elements have it set to false. Each element with role="tabpanel" has the aria-labelledby property that refers to its associated tab element.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.