Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Tabs
Tabs
The Tabs component is used to group different contents of the same theme within a section. It allows the user to navigate easily between the different sections of a page.
Uses
How to use
Use tabs to group related information into different categories, which helps reduce cognitive load.
Tabs can be used to organise content such as forms, settings and dashboards so that a user does not have to navigate outside their workflow to complete their task.
How not to use
Tabs should never be used for the main navigation. If tabs become too complex, consider using another navigation pattern.
Tabs should not be used to indicate progress. Use steps instead.
Behaviour
Types
Text Only
Icon Left
Text + Tag
Icon Left + Tag
States
Default
Hover
Focus
Selected
Disabled
Responsive
The behaviour in its mobile version changes in the last element, grouping in a dropdown the tabs that do not fit on the screen and being able to access and select them. The tabs to be displayed will be 1 or 2 depending on the length of their texts.
Display a tab for long texts
Show 2 tabs for short texts
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The tab group component uses role="tablist" to correctly convey its functionality to assistive technologies.
Each tab element has role="tab" and is contained within the element with role="tablist".
Each element that contains the content panel of a tab has the role="tabpanel".
As the tablist has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labelled element.
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 status set to true and all other tab elements have the aria-selected status set to false.
Each element with role="tabpanel" has the property aria-labelledby which refers to its associated tab element.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
