Components

Component API schemas for Spectrum.

Accordion — An accordion is a vertically stacked set of interactive headings that each contain a title and a content area.
Action bar — Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
Action button — Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interface
Action group — An action group is a grouping of action buttons that are related to each other.
Alert banner — Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.
Alert dialog — Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is sel
Avatar group — Avatar groups display a collection of avatars representing people or entities.
Avatar — An avatar is a thumbnail representation of an entity, such as a user or an organization.
Badge — Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.
Body — Body is a typography component primarily used within Spectrum components and for blocks of text.
Bottom navigation (Android) — Bottom navigation is a top-level navigation control for Android apps.
Breadcrumbs — Breadcrumbs show hierarchy and navigational context for a user’s location within an app.
Button group — A button group is a grouping of buttons whose actions are related to each other.
Button — Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to whe
Calendar — Calendars display days, weeks, and months, allowing users to select dates or ranges.
Cards — Cards group related content into distinct layouts depending on context.
Checkbox group — A checkbox group is a grouping of checkboxes that are related to each other.
Checkbox — Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Close button — The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.
Coach indicator — Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery.
Coach mark — Coach marks provide contextual guidance to users by highlighting specific interface elements.
Code — Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
Color area — A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.
Color handle — Color handles allow users to select and adjust colors in a color picker.
Color loupe — A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
Color slider — A color slider lets users visually change an individual channel of a color.
Color wheel — A color wheel lets users visually change an individual channel of a color on a circular track.
Combo box — Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
Contextual help — Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experi
Date picker — A date picker lets users enter a single date or a date range. It includes a calendar popover and a field.
Detail — Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
Divider — Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
Drop zone — A drop zone allows users to drag and drop files or other content into a designated area.
Field label — Field labels give context to the information that a user needs to input. They're commonly used in forms.
Heading — Heading is a typography component used to create various levels of hierarchies between text.
Help text — Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.
Illustrated message — An illustrated message displays an illustration with a short title and description, often used for empty states or error states.
In field progress button — In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content.
In field progress circle — In field progress circles indicate progress for loading states within form fields and input areas.
In-line alert — In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback r
Link — Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.
List view — List views display rows of data or options that users can browse, select, and interact with.
Menu — Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.
Meter — Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.
Number field — Number fields allow users to enter a numeric value, with optional increment and decrement buttons.
Opacity Checkerboard — Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected.
Picker — Pickers (sometimes known as "dropdowns" or "selects") allow users to choose from a list of options in a limited space. The list of options can change based on t
Popover — Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop
Progress bar — Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or in
Progress circle — Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or
Radio button — Radio buttons allow users to select a single option from a list of mutually exclusive options.
Radio Group — A radio group is a grouping of radio buttons that are related to each other.
Rating — The rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more.
Scroll-zoom bar — Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.
Search field — A search field is used for searching and filtering items.
Segmented Control — Segmented controls allow users to select one option from a set of mutually exclusive options.
Select box
Side navigation — Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.
Slider — Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
Standard dialog — Standard dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is
Standard Panel — Standard Panels provide a flexible container for grouping related content and actions.
Status light — Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.
Steplist — Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete.
Swatch group — A swatch group is a grouping of swatches that are related to each other.
Swatch — A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
Switch — Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.
Tab bar (iOS) — Tab bar is a top-level navigation control for iOS apps.
Table — Tables display information in rows and columns, allowing users to compare and scan structured data.
Tabs — Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent u
Tag field — A tag field is an input field that allows users to enter and manage tags.
Tag group — A tag group is a collection of tags that represent a set of related items.
Tag — Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Takeover dialog — Takeover dialogs are larger, flexible dialogs that contain other components to support complex workflows.
Text area — A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text fi
Text field — Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
Thumbnail — Thumbnails are small representations of images or content used for previews and navigation in galleries, lists, and media collections.
Toast — Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
Tooltip — Tooltips show contextual help or information about specific components when a user hovers or focuses on them.
Tray — Trays are containers that display transient content such as menus, options, additional actions, and more. They only exist on mobile experiences and are used for
Tree view — A tree view provides users with a way to navigate nested hierarchical information.