Components

Components

Unstyled, accessible UI primitives for building high-quality design systems and web apps.

  • Accordion

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

  • Alert Dialog

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

  • Aspect Ratio

    Displays content within a desired ratio.

  • Avatar

    An image element with a fallback for representing the user.

  • Checkbox

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

  • Collapsible

    An interactive component which expands/collapses a panel.

  • Context Menu

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

  • Dialog

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

  • Dropdown Menu

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

  • Form

    Collect information from your users using validation rules.

  • Hover Card

    For sighted users to preview content available behind a link.

  • Label

    Renders an accessible label associated with controls.

  • Menubar

    A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

  • Navigation Menu

    A collection of links for navigating websites.

  • One-Time Password Field

    A group of single-character text inputs to handle one-time password verification

  • Password Toggle Field

    A password input field with an integrated button to toggle the value's visibility

  • Popover

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

  • Progress

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

  • Radio Group

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

  • Scroll Area

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

  • Select

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

  • Separator

    Visually or semantically separates content.

  • Slider

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

  • Switch

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

  • Tabs

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

  • Toast

    A succinct message that is displayed temporarily.

  • Toggle

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

  • Toggle Group

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

  • Toolbar

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

  • Tooltip

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