Components

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a desired aspect ratio.

An image element with a fallback for representing a user.

Displays a small status descriptor.

Displays the path to the current resource using a hierarchy of links.

Displays a button or a component that looks like a button.

A date field component that allows users to enter and edit date.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

A control that allows the user to toggle between checked and not checked.

A window overlaid on either the primary window or another dialog window.

Displays a form input field.

Accessible one-time password component with copy paste functionality.

Renders an accessible label associated with controls.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons where only one can be checked at a time.

Displays a list of options for the user to pick from.

Visually or semantically separates content.

Use to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

A control that allows the user to toggle between checked and unchecked states.

A set of layered sections of content, also known as tab panels.

Displays a form textarea or a component that looks like a textarea.

A popup that displays information related to an element when it receives keyboard focus.