Components

A basic action for running commands or moving to the next step.

A binary control for turning a setting on or off.

Adjust a value within a continuous range.

Choose one option from a mutually exclusive set.

Select or deselect independent options from a list.

Choose one option from a predefined list.

Group tools for the current task.

A field for entering and editing text.

Find items using a keyword.

Enter a password and reveal it when needed.

Enter a phone number in a readable format.

Enter a one-time numeric verification code.

Increase or decrease a quantity within a range.

Choose a date for an event.

Choose a time by adjusting the period, hour and minute separately.

Record audio and listen back.

Draw a signature with a finger or mouse.

Drop a file or browse to select it.

Group related information and actions around one topic.

Place a title and tag over a full-background image.

Arrange related items in a vertical list.

Compare data with shared attributes in rows and columns.

Arrange content in consistent columns with even spacing.

Compare a collection of images and open a larger view.

Browse a sequence of images in one area.

Content expands or contracts with the available width.

Expand details in the document flow, pushing following content down. Use for accordions or additional form fields.

A panel takes layout space and resizes the main content. Show navigation or supporting tasks without covering the page.

Open contextual information beside a trigger.

Handle a focused editing task on the current page.

Open supporting tasks or choices from the bottom of the screen.

Show details and supporting tasks beside the page.

Briefly announce the result of an action.

Ask for a decision alongside the current task without blocking it.

Switch between related views using tabs.

Switch between related content panels.

Narrow visible results by selecting conditions.

Navigate between main destinations.

Show the current location and its parent pages.

Show a document's heading hierarchy and navigate to a section.

Expand related information when needed.

Explore a hierarchy of folders and items.

Show the current position and image count in an image carousel using dots.

Navigate through results split across pages.

Label content topics or applied conditions.

Display a status or short supporting information.

Show a loading state while waiting for the system to respond.

Preview the shape and position of content while it loads.

Show how much of a task has been completed.

Identify a person or team with a compact visual.

Show a group of participants.

Show goal progress in a ring.

Show daily progress and challenge completion.

Show daily activity as a contribution grid.

Show the current position in a multi-step process.

Explore events and progress in chronological order.