# React Aria

> An accordion is a container for multiple accordion items.

## Pages

- [Accordion](accordion.md): An accordion is a container for multiple accordion items.
- [ActionBar](actionbar.md): Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items...
- [ActionButton](actionbutton.md): ActionButtons allow users to perform an action.
- [ActionButtonGroup](actionbuttongroup.md): An ActionButtonGroup is a grouping of related ActionButtons.
- [ActionMenu](actionmenu.md): ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
- [Avatar](avatar.md): An avatar is a thumbnail representation of an entity, such as a user or an organization.
- [AvatarGroup](avatargroup.md): An avatar group is a grouping of avatars that are related to each other.
- [Badge](badge.md): Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
- [Breadcrumbs](breadcrumbs.md): Breadcrumbs show hierarchy and navigational context for a user's location within an application.
- [Button](button.md): Buttons allow users to perform an action.
- [ButtonGroup](buttongroup.md): ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
- [Calendar](calendar.md): Calendars display a grid of days in one or more months and allow users to select a single date.
- [Card](card.md): A Card summarizes an object that a user can select or navigate to.
- [CardView](cardview.md): A CardView displays a group of related objects, with support for selection and bulk actions.
- [Checkbox](checkbox.md): Checkboxes allow users to select multiple items from a list of individual items,
- [CheckboxGroup](checkboxgroup.md): A CheckboxGroup allows users to select one or more items from a list of choices.
- [ColorArea](colorarea.md): A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient ...
- [ColorField](colorfield.md): A color field allows users to edit a hex color or individual color channel value.
- [ColorSlider](colorslider.md): A ColorSlider allows users to adjust an individual channel of a color value.
- [ColorSwatch](colorswatch.md): A ColorSwatch displays a preview of a selected color.
- [ColorSwatchPicker](colorswatchpicker.md): A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- [ColorWheel](colorwheel.md): A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- [ComboBox](combobox.md): ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
- [ContextualHelp](contextualhelp.md): Contextual help shows a user extra information about the state of an adjacent component, or a total view.
- [DateField](datefield.md): DateFields allow users to enter and edit date and time values using a keyboard.
- [DatePicker](datepicker.md): DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
- [DateRangePicker](daterangepicker.md): DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
- [Dialog](dialog.md): Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- [Disclosure](disclosure.md): A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a...
- [Divider](divider.md): Dividers bring clarity to a layout by grouping and dividing content in close proximity.
- [DropZone](dropzone.md): A drop zone is an area into which one or multiple objects can be dragged and dropped.
- [Form](form.md): Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
- [IllustratedMessage](illustratedmessage.md): An IllustratedMessage displays an illustration and a message, usually
- [Image](image.md): An image with support for skeleton loading and custom error states.
- [InlineAlert](inlinealert.md): Inline alerts display a non-modal message associated with objects in a view.
- [Link](link.md): Links allow users to navigate to a different location.
- [LinkButton](linkbutton.md): import {LinkButton} from '@react-spectrum/s2';
- [Menu](menu.md): Menus display a list of actions or options that a user can choose.
- [Meter](meter.md): Meters are visual representations of a quantity or an achievement.
- [NumberField](numberfield.md): NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
- [Picker](picker.md): Pickers allow users to choose a single option from a collapsible list of options when space is limited.
- [Popover](popover.md): A popover is an overlay element positioned relative to a trigger.
- [ProgressBar](progressbar.md): ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
- [ProgressCircle](progresscircle.md): ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual...
- [Provider](provider.md): Provider is the container for all React Spectrum components.
- [RadioGroup](radiogroup.md): Radio groups allow users to select a single option from a list of mutually exclusive options.
- [RangeCalendar](rangecalendar.md): RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
- [RangeSlider](rangeslider.md): RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the...
- [SearchField](searchfield.md): A SearchField is a text field designed for searches.
- [SegmentedControl](segmentedcontrol.md): A SegmentedControl is a mutually exclusive group of buttons used for view switching.
- [SelectBoxGroup](selectboxgroup.md): SelectBoxGroup allows users to select one or more options from a list.
- [Skeleton](skeleton.md): A Skeleton wraps around content to render it as a placeholder.
- [Slider](slider.md): Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to ...
- [StatusLight](statuslight.md): Status lights are used to color code categories and labels commonly found in data visualization.
- [Switch](switch.md): Switches allow users to turn an individual option on or off.
- [TableView](tableview.md): Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on...
- [Tabs](tabs.md): Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of t...
- [TagGroup](taggroup.md): Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or...
- [TextArea](textarea.md): A textarea allows a user to input mult-line text.
- [TextField](textfield.md): TextFields are text inputs that allow users to input custom text entries
- [TimeField](timefield.md): TimeFields allow users to enter and edit time values using a keyboard.
- [Toast](toast.md): import {ToastContainer, ButtonGroup, Button, ToastQueue} from '@react-spectrum/s2';
- [ToggleButton](togglebutton.md): ToggleButtons allow users to toggle a selection on or off, for example
- [ToggleButtonGroup](togglebuttongroup.md): A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
- [Tooltip](tooltip.md): Display container for Tooltip content. Has a directional arrow dependent on its placement.
- [TreeView](treeview.md): A tree view provides users with a way to navigate nested hierarchical information.
- [Collections](collections.md): Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. ...
- [Error](error.md)
- [Forms](forms.md): Learn how to integrate with HTML forms, validate and submit data, and use React Spectrum with form libraries.
- [Getting started](getting-started.md): Install React Spectrum with your preferred package manager.
- [Icons](icons.md): React Spectrum offers a set of open source icons that can be imported from .
- [Illustrations](illustrations.md): React Spectrum offers a collection of illustrations that can be imported from .
- [Index](index.md): elementType="html"
- [MCP Server](mcp.md): Learn how to use the React Spectrum server to help AI agents browse the documentation.
- [Migrating to Spectrum 2](migrating.md): Learn how to migrate from React Spectrum v3 to Spectrum 2.
- [Selection](selection.md): Many collection components support selecting items by clicking or tapping them, or by using the keyboard. Learn how t...
- [Style Macro](style-macro.md): The`style`macro supports a constrained set of values per property that conform to Spectrum 2.
- [Styling](styling.md): Learn how to use the macro to apply Spectrum tokens directly in your components with type-safe autocompletion.
- [Testing CheckboxGroup](testing.md): `@react-spectrum/test-utils`offers common checkbox group interaction testing utilities. Install it with your preferr...
- [v0.1.0](v0-1-0.md): Version 0.1.0 introduces the first version of Spectrum 2, including new Badge, ComboBox, Meter, and Picker components.
- [v0.10.0](v0-10-0.md): Version 0.10.0 introduces a new font for Spectrum 2: Adobe Clean Spectrum VF, along with new date and time components...
- [v0.11.0](v0-11-0.md): Version 0.11.0 introduces the new SelectBoxGroup component (alpha), fixes ComboBox empty state rendering, improves Pi...
- [v0.12.0](v0-12-0.md): Version 0.12.0 adds pending states to ActionButton, avatar support in ComboBox and Picker, Dialog XL size, and Popove...
- [v0.2.0](v0-2-0.md): Version 0.2.0 introduces new color and range components, adds ESBuild starter, updates InlineAlert iconography, and i...
- [v0.3.0](v0-3-0.md): Version 0.3.0 introduces NumberField, AlertDialog, and Tabs components, along with new linear and gradient illustrati...
- [v0.4.0](v0-4-0.md): Version 0.4.0 introduces six new components including Accordion, Card, CardView, and TableView. This release includes...
- [v0.5.0](v0-5-0.md): Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four new dialog components: Dialog, Fullsc...
- [v0.6.0](v0-6-0.md): Version 0.6.0 introduces the ActionBar component and adds staticColor="auto" support to multiple components. This rel...
- [v0.7.0](v0-7-0.md): Version 0.7.0 introduces the TreeView component and includes important CSS updates to fix Safari issues. This release...
- [v0.8.0](v0-8-0.md): Version 0.8.0 introduces NotificationBadge and Toast (alpha) components, along with updates to Disclosure design sizi...
- [v0.9.0](v0-9-0.md): Version 0.9.0 adds virtualization and async loading support to ComboBox and Picker, updates Dialog sizes, and introdu...
- [v0.9.1](v0-9-1.md): Version 0.9.1 is a patch release that fixes focus visible styles in Button and TagGroup, updates ContextualHelp width...
- [v1.0.0](v1-0-0.md): Welcome to Spectrum 2 v1.0! This milestone marks the first stable version of our implementation of the updated [Adobe...