Government of Spain Dintel 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.
NextGenerationEU European Union Funding Logo Transformation and Resiuliency Recovery Plan Logo Spain digital logo Support Accesibility Sitemap Privacy Policy Cookie Policy

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