React Spectrum

A React implementation of Spectrum, Adobe’s design system.

Get started GitHub

React Spectrum hero image

Accessible

React Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support.

Adaptive

React Spectrum components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.

Color schemes

React Spectrum includes automatic support for dark and light mode based on operating system settings.

International

React Spectrum components are designed to support over 30 languages, including support for right-to-left languages, date and number formatting, and more.

Components#

Buttons#

A button allows a user to perform an action or to navigate to another page.

An action button allows a user to perform an action.

A toggle button allows a user to toggle between two states.

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

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

A file trigger allows a user to access the file system with a Button.

Pickers#

A combobox combines a text input with a listbox, and allows a user to filter a list of options.

A picker displays a collapsible list of options, and allows a user to select one of them.

Collections#

A menu displays a list of actions or options that a user can choose.

A listbox displays a list of options, and allows a user to select one or more of them.

A ListView displays a list of interactive items, with keyboard navigation, row selection, and actions.

A table view displays data in rows and columns, with row selection and sorting.

A tag group displays a list of items, with support for keyboard navigation and removal.

Date and time#

A date picker combines a DateField and a Calendar popover.

DateRangePicker

A date range picker combines two DateFields and a RangeCalendar popover.

A date field allows a user to enter and edit date values using a keyboard.

A time field allows a user to enter and edit time values using a keyboard.

A calendar allows a user to select a single date from a date grid.

A range calendar allows a user to select a contiguous range of dates.

Color#

A color picker combines a swatch with a customizable popover for editing a color.

A color area allows users to adjust two channels of a color value.

A color slider allows users to adjust an individual channel of a color value.

A color wheel allows users to adjust the hue of a color value on a circular track.

A color field allows users to edit a hex color or individual color channel value.

A color swatch displays a preview of a selected color.

ColorSwatchPicker

A color swatch picker displays a list of color swatches and allows a user to select one of them.

Overlays#

A dialog is an overlay shown above other content in an application.

Displays a dialog in a popover, modal, or tray in response to a trigger.

A tooltip displays a description of an element on hover or focus.

Contextual help shows extra information about an adjacent component.

Forms#

A checkbox allows a user to select an individual option.

A checkbox group allows a user to select one or more items in a list of options.

A radio group allows a user to select a single item from a list of options.

A switch allows a user to turn a setting on or off.

A text field allows a user to enter a plain text value with a keyboard.

A text area allows a user to enter a multi-line text value with a keyboard.

A search field allows a user to enter and clear a search query.

A number field allows a user to enter, increment, or decrement a numeric value.

A form provides layout and alignment for a grouping of fields.

A slider allows a user to select a numeric value within a range.

A range slider allows a user to select a range of values within a larger range.

Tabs organize content into multiple sections, and allow a user to view one at a time.

A link allows a user to navigate to another page.

Breadcrumbs display a hierarchy of links to the current page or resource.

A disclosure is a collapsible section of content.

An accordion is a grouping of related disclosures.

Status#

A progress bar shows progress of an operation over time with a linear representation.

A progress circle shows progress of an operation over time with a circular representation.

A meter represents a quantity within a known range, or a fractional value.

A labeled value displays a non-editable value with a label, with locale-specific formatting.

A status light displays the status or category of an entity.

A badge displays color-categorized metadata for an object.

Drag and drop#

A drop zone is an area into which one or multiple objects can be dragged and dropped.