A React implementation of Spectrum, Adobe's design system.
Getting StartedGet started with React Spectrum S2.
StylingLearn how to style React Spectrum components.
MigratingLearn how to migrate from React Spectrum v3 to S2.
AccordionAn accordion is a grouping of related disclosures.
ActionBarUsed for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
ActionButtonAn action button allows a user to perform an action.
ActionButtonGroupA grouping of related ActionButtons.
ActionMenuCombines an ActionButton with a Menu for simple "more actions" use cases.
AvatarA thumbnail representation of an entity, such as a user or an organization.
AvatarGroupA grouping of avatars that are related to each other.
BadgeA badge displays color-categorized metadata for an object.
BreadcrumbsBreadcrumbs display a hierarchy of links to the current page or resource.
ButtonA button allows a user to perform an action or to navigate to another page.
ButtonGroupA button group is a grouping of buttons whose actions are related to each other.
CalendarA calendar allows a user to select a single date from a date grid.
CardSummarizes an object that a user can select or navigate to.
CardViewDisplays a group of related objects, with support for selection and bulk actions.
CheckboxA checkbox allows a user to select an individual option.
CheckboxGroupA checkbox group allows a user to select one or more items in a list of options.
ColorAreaA color area allows users to adjust two channels of a color value.
ColorFieldA color field allows users to edit a hex color or individual color channel value.
ColorSliderA color slider allows users to adjust an individual channel of a color value.
ColorSwatchA color swatch displays a preview of a selected color.
ColorSwatchPickerA color swatch picker displays a list of color swatches and allows a user to select one of them.
ColorWheelA color wheel allows users to adjust the hue of a color value on a circular track.
ComboBoxA combobox combines a text input with a listbox, and allows a user to filter a list of options.
ContextualHelpContextual help shows extra information about an adjacent component.
DateFieldA date field allows a user to enter and edit date values using a keyboard.
DatePickerA date picker combines a DateField and a Calendar popover.
DateRangePickerA date range picker combines two DateFields and a RangeCalendar popover.
DialogA dialog is an overlay shown above other content in an application.
DisclosureA disclosure is a collapsible section of content.
DividerBrings clarity to a layout by grouping and dividing content in close proximity.
DropZoneA drop zone is an area into which one or multiple objects can be dragged and dropped.
FormA form provides layout and alignment for a grouping of fields.
IconsA collection of workflow icons that can be imported from @react-spectrum/s2/icons.
IllustratedMessageDisplays an illustration and a message, usually for an empty state or an error page.
IllustrationsA collection of illustrations that can be imported from @react-spectrum/s2/illustrations.
ImageAn image with support for skeleton loading and custom error states.
InlineAlertDisplays a non-modal message associated with objects in a view.
LinkA link allows a user to navigate to another page.
LinkButtonCombines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
MenuA menu displays a list of actions or options that a user can choose.
MeterA meter represents a quantity within a known range, or a fractional value.
NumberFieldA number field allows a user to enter, increment, or decrement a numeric value.
PickerA picker displays a collapsible list of options, and allows a user to select one of them.
PopoverA popover displays interactive content in context with a trigger element.
ProgressBarA progress bar shows progress of an operation over time with a linear representation.
ProgressCircleA progress circle shows progress of an operation over time with a circular representation.
RadioGroupA radio group allows a user to select a single item from a list of options.
RangeCalendarA range calendar allows a user to select a contiguous range of dates.
RangeSliderA range slider allows a user to select a range of values within a larger range.
SearchFieldA search field allows a user to enter and clear a search query.
SegmentedControlA mutually exclusive group of buttons used for view switching.
SelectBoxGroupAllows users to select one or more options from a list.
SkeletonWraps around content to render it as a placeholder.
SliderA slider allows a user to select a numeric value within a range.
StatusLightA status light displays the status or category of an entity.
SwitchA switch allows a user to turn a setting on or off.
TableViewA table view displays data in rows and columns, with row selection and sorting.
TabsTabs organize content into multiple sections, and allow a user to view one at a time.
TagGroupA tag group displays a list of items, with support for keyboard navigation and removal.
TextAreaA text area allows a user to enter a multi-line text value with a keyboard.
TextFieldA text field allows a user to enter a plain text value with a keyboard.
TimeFieldA time field allows a user to enter and edit time values using a keyboard.
ToastA toast displays a temporary notification of an action, error, or other event.
ToggleButtonA toggle button allows a user to toggle between two states.
ToggleButtonGroupA toggle button group allows a user to toggle multiple options, with single or multiple selection.
TooltipA tooltip displays a description of an element on hover or focus.
TreeViewA tree view displays hierarchical data with selection and collapsing.
Release NotesRelease notes for React Spectrum.