Expandable

Components

Expandable

A collapse component is a user interface element that is used to hide or display content dynamically.

Preview

Figma

Uses

When to use

To reduce visual overload and improve the organization of content: Collapse components can be used to hide non-essential content and reduce visual overload on a web page or mobile app.

To display content progressively: Collapsing components can be used to progressively display content, allowing the user to access more information as they need it.

To facilitate navigation: Collapse components can be used to create drop-down menus or to display related content dynamically.

When not to use

To reduce visual overload and improve the organization of content: Collapse components can be used to hide non-essential content and reduce visual overload on a web page or mobile app.

To display content progressively: Collapsing components can be used to progressively display content, allowing the user to access more information as they need it.

To facilitate navigation: Collapse components can be used to create drop-down menus or to display related content dynamically.

Behaviour

The collapse component typically has a title or description that makes an introduction to the hidden content and a button that allows the user to expand or collapse the content. When the user clicks on the button the content is displayed or hidden, as appropriate.

Collapse components are often used to reduce visual overload and improve the organization of content on a web page or mobile application. They can also be used to display content progressively, allowing the user to access more information as they need it.

Actions

See less

States

Default

Hover

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 accordion has a defined role="button". This ensures that the assistive technologies advertise it correctly.

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

The accordion reduces the scroll by collapsing non-essential content.

The accordion also uses the aria-expanded and aria-controls attribute to convey expansion and contraction functionality to assistive technologies.

The accordion has the aria-label attribute.