An accordion is a vertically stacked set of interactive headings that each contain a title and a content area.

If true, multiple accordion items can be expanded at the same time.

The content shown when the accordion item is expanded.

If true, the accordion item includes an action button.

If true, the accordion item includes a switch.

Whether the accordion item is expanded by default.

The text label displayed for the accordion item.

Accordion

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 bar

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 interfaces where buttons aren't meant to draw a lot of attention.

Icon must be present if the label is not defined.

workflow-icon

hex-color

Static color must not be set for the default version of this component.

Action button

An action group is a grouping of action buttons that are related to each other.

Action group

Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.

If undefined, this button does not appear.

Alert banner

Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.

Alert dialog

An avatar is a thumbnail representation of an entity, such as a user or an organization.

Avatar

Avatar groups display a collection of avatars representing people or entities.

Optional text label displayed with the avatar group (e.g., group name).

Avatar group

Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.

When the label is not defined, the badge appears as icon-only.

Badge

Body is a typography component primarily used within Spectrum components and for blocks of text.

typography-classification

typography-script

Body

Bottom navigation is a top-level navigation control for Android apps.

Bottom navigation (Android)

Breadcrumbs show hierarchy and navigational context for a user’s location within an app.

If true, the breadcrumb items will wrap to multiple lines.

If true, the breadcrumb item is truncated and displayed as icon only.

Optional URL the breadcrumb item links to.

Indicates if the breadcrumb item represents the current page.

The text displayed for the breadcrumb item.

The separator icon used between breadcrumb items.

Controls the overall size of the breadcrumb component.

Overrides the size of the breadcrumb items when isMultiline is true.

Breadcrumbs

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 where a user needs to do something in order to move forward in a flow.

Button

A button group is a grouping of buttons whose actions are related to each other.

Button group

Calendars display days, weeks, and months, allowing users to select dates or ranges.

The month currently displayed in the calendar (1 = January, 12 = December).

The year currently displayed in the calendar (Gregorian year number).

An array of days displayed in the current calendar view.

The date represented by this day (ISO format string).

Whether this day is the end of a selected range.

Whether this day is the start of a selected range.

Whether this day represents the current date.

Whether this day is unavailable for selection. If true, the day appears with a strikethrough.

The maximum allowed date that a user may select (ISO format string).

The minimum allowed date that a user may select (ISO format string).

Controls whether the calendar allows selecting a single date or a date range.

Whether to show a time zone indicator in the calendar.

Calendar

If true, the selection checkbox is hidden.

Cards group related content into distinct layouts depending on context.

Determines which card layout variant is used.

Cards

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

When a checkbox is indeterminate, it overrides the selection state.

When the label is not defined, the checkbox appears as a standalone checkbox.

Checkbox

A checkbox group is a grouping of checkboxes that are related to each other.

Checkbox group

The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.

Close button

Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery.

If not set to white, the coach indicator uses the default color.

Coach indicator

Coach marks provide contextual guidance to users by highlighting specific interface elements.

Optional footer content to display in the dialog footer like a checkbox.

Label for the secondary footer action (optional).

Optional action button displayed at the top, often for a menu.

Coach mark

Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.

Code

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.

This will vary depending on implementation.

Color area

Color handles allow users to select and adjust colors in a color picker.

Which channel of the color this handle controls. Use 'alpha' for opacity.

Color handle

A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

Color loupe

A color slider lets users visually change an individual channel of a color.

Which channel of the color this slider controls. Use 'alpha' for opacity.

Color slider

A color wheel lets users visually change an individual channel of a color on a circular track.

Color wheel

Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.

Combo box

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 experience and can point users to more information elsewhere.

Optional URL within contextual help content like a 'Learn more' link.

Contextual help

A date picker lets users enter a single date or a date range. It includes a calendar popover and a field.

If the calendar popover is in an error state.

The minimum allowed date that a user may select.

Whether to show a time zone indicator in the popover.

Optional start and end time fields displayed within the calendar popover.

The level of time granularity for the time fields.

If true, displays time in 24-hour format instead of AM/PM.

If there is an error, this property overrides show valid icon.

Optional text label displayed with the date field.

The currently selected date. Used when selectionMode is single.

The currently selected date range, used when selectionMode is range.

Controls the number of months displayed in the calendar popover.

Date picker

Detail

Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.

Divider

A drop zone allows users to drag and drop files or other content into a designated area.

File types that are accepted by the drop zone.

Callback function called when a file is dragged out of the drop zone.

Callback function called when a file is dragged over the drop zone.

Callback function called when files are dropped onto the drop zone.

Drop zone

Field labels give context to the information that a user needs to input. They're commonly used in forms.

Field label

Heading is a typography component used to create various levels of hierarchies between text.

Heading

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.

Help text cannot be both disabled and negative variant.

Help text

An illustrated message displays an illustration with a short title and description, often used for empty states or error states.

Secondary descriptive text providing context or instructions.

Optional illustration or icon displayed above the message.

Label for the primary action button. If undefined, no primary action is shown.

Label for the secondary action button. If undefined, no secondary action is shown.

Illustrated message

In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content.

In field progress button

In field progress circles indicate progress for loading states within form fields and input areas.

In field progress circle

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 related to multiple fields.

Optional heading text displayed at the top of the alert.

Optional URL within in-line alert content like a 'Learn more' link.

In-line alert

Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.

Link

List views display rows of data or options that users can browse, select, and interact with.

If true, the list view uses a quiet visual style.

Secondary text displayed under the label (optional).

If true, the navigation indicator is hidden.

Defines the border radius of the list view item.

Defines how text should behave when it overflows the available space.

The interaction state of the list view item.

Defines how many items can be selected at once.

List view

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

Number fields allow users to enter a numeric value, with optional increment and decrement buttons.

If true, hides in-field increment and decrement buttons (stepper).

Number field

Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected.

Opacity Checkerboard

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 the context.

Picker

Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.

Popover

Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.

Static color can only be white, otherwise it is default.

Progress bar

Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.

Progress circle

Radio buttons allow users to select a single option from a list of mutually exclusive options.

The text displayed next to a radio button.

Radio button

A radio group is a grouping of radio buttons that are related to each other.

Radio Group

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.

From 0 to 5, can be a decimal to represent half stars

Rating

Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.

Scroll-zoom bar

A search field is used for searching and filtering items.

Search field

Segmented controls allow users to select one option from a set of mutually exclusive options.

If true, the tracker that indicates the selected item is hidden.

If true, the control takes up the full width of its container. Only applicable to horizontal segmented controls.

Controls whether the segmented control item displays a label, an icon, or both.

Whether the segmented control item is disabled.

The text displayed for the segmented control item.

The interaction state of the segmented control item.

The identifier of the currently selected item.

Segmented Control

Set to true to allow multiple selections.

Select box

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.

Spectrum Components API