Components

Runs an action with a clear label.

Groups related tools for keyboard navigation.

Accepts short text and identifiers.

Picks one option from a fixed list.

Connects existing HTML option markup to the shared Select.

Connects a label, help text, error, and value.

Groups related inputs under a legend.

Reports validation and submission results.

Accepts multi-line descriptions.

Searches a list of options and selects one.

Browses suggestions while keeping the typed text.

Controls a numeric range with increment and decrement.

Adjusts a value within a range.

Accepts a one-time code split into separate slots.

Accepts dates, times, and ranges in locale-specific formats.

Picks the span back from now a monitoring screen shows and how often it refreshes.

Explains file limits and upload status.

Selects any number of independent options.

Connects multiple selections to a select-all checkbox.

Selects one of several mutually exclusive options.

Toggles a setting that applies immediately.

Switches between pressed and unpressed states.

Selects tool modes and display options.

Chooses one value from a few, such as a period or a side.

Chooses light, dark or the device setting, and remembers it.

Offers secondary tasks next to the trigger.

Collects the actions for the current context.

Opens actions on right-click or long press, with a visible menu fallback.

Shows a short supplementary description on focus and hover.

Previews a link's destination.

Opens a standalone task that needs full attention.

Asks for an explicit response before an action that can lose data.

Opens a detail panel anchored to one side.

Opens a task panel that closes with a swipe.

Switches between panels in the same context.

Expands details linked to their headings.

Collapses and expands one section's details.

Navigates related pages hierarchically.

Navigates several action menus in one row.

Navigates to a clear destination.

Shows the current location and its parent path.

Pages through large result sets.

Puts a phone's main destinations along the bottom edge.

Shows images for users and groups, with a fallback.

Shows status with color, icon, and text together.

Shows a resource's properties as terms and their values.

Shows events in time order, such as a deploy history or an audit log.

Writes a key or shortcut the way this platform does.

Groups only related information on a single surface.

Compares information in aligned rows and columns.

Displays long identifiers and code with a copy action.

Renders code in each language safely and legibly.

Renders documents, code, and tables in a shared reading style.

Keeps repeated content and its actions aligned.

Shows a key figure with its change and what it covers.

Navigates nested resources with the keyboard.

Adds horizontal and vertical scrolling within a layout.

Draws a full-width or inset boundary.

Shows how much of a task is complete, or that it's running.

Shows a measurement within a known range.

Announces task results without blocking the flow.

Shows loading, an error with a retry, empty and stale data around any content.

Tells everyone about a state of the whole product, across the app shell.

Explains information, warnings, and errors in the current context.

Indicates progress for short tasks.

Shows the content's structure while it loads.

Explains why there are no results and what to do next.