Components

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

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

Displays content within a desired ratio.

An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item.

An image element with a fallback for representing the user.

Displays dates and days of the week, facilitating date-related interactions.

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

An interactive component which expands/collapses a panel.

A two-dimensional area for selecting color values in a specific color space.

An input field for entering and editing color values in various formats.

A slider control for adjusting individual color channels.

A component that allows users to select from a set of predefined colors, often used for themes or branding.

A predefined color block that allows users to quickly select commonly used or brand-specific colors.

Choose from a list of suggested values with full keyboard support.

Displays a menu located at the pointer, triggered by a right-click or a long-press.

Enables users to input specific dates within a designated field.

Facilitates the selection of dates through an input and calendar-based interface.

Allows users to input a range of dates within a designated field.

Facilitates the selection of date ranges through an input and calendar-based interface.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A panel that slides in from the edge of the screen, with support for swipe-to-dismiss, snap points, and nested drawers.

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Displays an input field used for editing a single line of text, rendering as static text on load.

Accessible wiring between a label, control, description, and error message, with built-in validation.

Extends the native form element with server error display and submit-time validation gating.

For sighted users to preview content available behind a link.

Renders an accessible label associated with controls.

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

A visually persistent menu common in desktop applications that provides quick

Presents a calendar view tailored for selecting months.

Presents a calendar view tailored for selecting month ranges.

A collection of links for navigating websites.

A number field allows a user to enter a number and increment or decrement the value using stepper buttons.

Displays data in paged format and provides navigation between pages.

A sequence of one-character alphanumeric inputs.

Displays rich content in a portal, triggered by a button.

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Presents a calendar view tailored for selecting date ranges.

A star-rating input where the user selects a score, with support for fractional values.

Augments native scroll functionality for custom, cross-browser styling.

Displays a list of options for the user to pick from—triggered by a button.

Visually or semantically separates content.

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

A component that divides your layout into resizable sections.

A set of steps that are used to indicate progress through a multi-step process.

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

A set of layered sections of content—known as tab panels—that are displayed one at a time.

A focusable list of tags that can be navigated, selected and removed with the keyboard.

Tags input render tags inside an input, followed by an actual text input.

Enables users to input specific times within a designated field.

Allows users to input a range of times within a designated field.

A succinct message that is displayed temporarily.

A set of two-state buttons that can be toggled on or off.

A two-state button that can be either on or off.

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.

Presents a calendar view tailored for selecting years.

Presents a calendar view tailored for selecting year ranges.