# React Aria Components Documentation

> Plain-text markdown documentation for React Aria components.

## Documentation
- [Accessible Color Descriptions for Improved Color Pickers](react-aria/blog/accessible-color-descriptions.md): Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D [ColorArea](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need.
- [Autocomplete](react-aria/Autocomplete.md): An autocomplete allows users to search or filter a list of suggestions.
- [Blog](react-aria/blog/index.md): <PostList
- [Breadcrumbs](react-aria/Breadcrumbs.md): Breadcrumbs display a hierarchy of links to the current page or resource in an application.
- [Building a Button Part 1: Press Events](react-aria/blog/building-a-button-part-1.md): UI development is really hard. While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very [long tail](https://en.wikipedia.org/wiki/Long_tail): it's fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work.
- [Building a Button Part 2: Hover Interactions](react-aria/blog/building-a-button-part-2.md): This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we'll cover hover interactions.
- [Building a Button Part 3: Keyboard Focus Behavior](react-aria/blog/building-a-button-part-3.md): This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we'll cover keyboard focus behavior.
- [Button](react-aria/Button.md): A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
- [Calendar](react-aria/Calendar.md): A calendar displays one or more date grids and allows users to select a single date.
- [Checkbox](react-aria/Checkbox.md): A checkbox allows a user to select multiple items from a list of individual items, or
- [CheckboxGroup](react-aria/CheckboxGroup.md): A CheckboxGroup allows users to select one or more items from a list of choices.
- [Collections](react-aria/collections.md): Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. Learn how to load and render collections using React Aria's compositional API.
- [ColorArea](react-aria/ColorArea.md): A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- [ColorField](react-aria/ColorField.md): A color field allows users to edit a hex color or individual color channel value.
- [ColorPicker](react-aria/ColorPicker.md): A ColorPicker synchronizes a color value between multiple React Aria color components.
- [ColorSlider](react-aria/ColorSlider.md): A color slider allows users to adjust an individual channel of a color value.
- [ColorSwatch](react-aria/ColorSwatch.md): A ColorSwatch displays a preview of a selected color.
- [ColorSwatchPicker](react-aria/ColorSwatchPicker.md): A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- [ColorWheel](react-aria/ColorWheel.md): A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- [ComboBox](react-aria/ComboBox.md): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- [Creating a pointer-friendly submenu experience](react-aria/blog/creating-a-pointer-friendly-submenu-experience.md): We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.
- [Creating an accessible autocomplete experience](react-aria/blog/building-a-combobox.md): After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.
- [Customization](react-aria/customization.md): React Aria is built using a flexible and composable API. Learn how to use contexts and slots to create custom component patterns, or mix and match with the lower level Hook-based API for even more control over rendering and behavior.
- [Date and Time Pickers for All](react-aria/blog/date-and-time-pickers-for-all.md): We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation.
- [DateField](react-aria/DateField.md): A date field allows users to enter and edit date and time values using a keyboard.
- [DatePicker](react-aria/DatePicker.md): A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
- [DateRangePicker](react-aria/DateRangePicker.md): DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
- [Disclosure](react-aria/Disclosure.md): A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- [DisclosureGroup](react-aria/DisclosureGroup.md)
- [Drag and Drop](react-aria/dnd.md): React Aria collection components support drag and drop with mouse and touch interactions, and full keyboard and screen reader accessibility. Learn how to provide drag data and handle drop events to move, insert, or reorder items.
- [DropZone](react-aria/DropZone.md): A drop zone is an area into which one or multiple objects can be dragged and dropped.
- [Emoji Picker](react-aria/examples/emoji-picker.md): An emoji picker with autocomplete, virtualized scrolling, and arrow key navigation.
- [Examples](react-aria/examples/index.md): <ExampleList pages={props.pages}/>
- [FileTrigger](react-aria/FileTrigger.md): A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
- [Filterable CRUD Table](react-aria/examples/crud.md): A plant tracking app with CRUD operations, search, filters, table column resizing, form validation, and more.
- [FocusRing](react-aria/FocusRing.md)
- [FocusScope](react-aria/FocusScope.md)
- [Form](react-aria/Form.md): A form is a group of inputs that allows users to submit data to a server,
- [Forms](react-aria/forms.md): Learn how to integrate with HTML forms, validate and submit data, and use React Aria with form libraries.
- [Framework setup](react-aria/frameworks.md): Learn how to integrate React Aria with your framework.
- [Gesture Driven Sheet](react-aria/examples/sheet.md): An iOS-style gesture driven sheet built with React Aria Components, , and .
- [Getting started](react-aria/getting-started.md): How to install React Aria and build your first component.
- [GridList](react-aria/GridList.md): A grid list displays a list of interactive items, with support for keyboard navigation,
- [Group](react-aria/Group.md): A group represents a set of related UI controls, and supports interactive states for styling.
- [How we internationalized our number field](react-aria/blog/how-we-internationalized-our-numberfield.md): Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind.
- [I18nProvider](react-aria/I18nProvider.md): ## Introduction
- [Improving Internationalization Support in Our Date and Time Components](react-aria/blog/rtl-date-time.md): Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue in our support for several right-to-left (RTL) languages where in some, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring accurate date and time representation in RTL languages and implemented various strategies that we'd like to share.
- [index](react-aria/index.md)
- [Introducing React Spectrum](react-aria/blog/introducing-react-spectrum.md): We're excited to announce [React Spectrum](https://react-spectrum.adobe.com/index.html), a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. [Check it out on Github](https://github.com/adobe/react-spectrum)! React Spectrum includes three libraries:
- [iOS List View](react-aria/examples/ios-list.md): A re-creation of the iOS List View built with React Aria Components, , and  with support for swipe gestures, layout animations, and multiple selection mode.
- [Kanban Board](react-aria/examples/kanban.md): A kanban board with accessible drag and drop, styled with Tailwind CSS.
- [Link](react-aria/Link.md): A link allows a user to navigate to another page or resource within a web page
- [ListBox](react-aria/ListBox.md): A listbox displays a list of options and allows a user to select one or more of them.
- [MCP Server](react-aria/mcp.md): Learn how to use the React Aria  server to help AI agents browse the documentation.
- [Menu](react-aria/Menu.md): A menu displays a list of actions or options that a user can choose.
- [mergeProps](react-aria/mergeProps.md)
- [Meter](react-aria/Meter.md): A meter represents a quantity within a known range, or a fractional value.
- [Modal](react-aria/Modal.md): A modal is an overlay element which blocks interaction with elements outside it.
- [NumberField](react-aria/NumberField.md): A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
- [Photo Library](react-aria/examples/photos.md): A photo library app with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop.
- [Popover](react-aria/Popover.md): A popover is an overlay element positioned relative to a trigger.
- [PortalProvider](react-aria/PortalProvider.md)
- [ProgressBar](react-aria/ProgressBar.md): Progress bars show either determinate or indeterminate progress of an operation
- [Quality](react-aria/quality.md): React Aria is built around three core principles: , , and . Learn how to apply these tools to build high quality UIs that work for everyone, everywhere, and on every device.
- [RadioGroup](react-aria/RadioGroup.md): A radio group allows a user to select a single item from a list of mutually exclusive options.
- [RangeCalendar](react-aria/RangeCalendar.md): RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
- [Releases](react-aria/releases/index.md): <PostList
- [Ripple Button](react-aria/examples/ripple-button.md): A  with an animated ripple effect styled with .
- [SearchField](react-aria/SearchField.md): A search field allows a user to enter and clear a search query.
- [Select](react-aria/Select.md): A select displays a collapsible list of options and allows a user to select one of them.
- [Selection](react-aria/selection.md): Many collection components support selecting items by clicking or tapping them, or by using the keyboard. Learn how to handle selection events, how to control selection programmatically, and the data structures used to represent a selection.
- [Slider](react-aria/Slider.md): A slider allows a user to select one or more values within a range.
- [SSRProvider](react-aria/SSRProvider.md): ## Introduction
- [Styling](react-aria/styling.md): React Aria does not include any styles by default. Learn how to build custom designs to fit your application or design system using any styling solution.
- [Swipeable Tabs](react-aria/examples/swipeable-tabs.md): A swipeable  component with , , and .
- [Switch](react-aria/Switch.md): A switch allows a user to turn a setting on or off.
- [Table](react-aria/Table.md): A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
- [Tabs](react-aria/Tabs.md): Tabs organize content into multiple sections and allow users to navigate between them.
- [TagGroup](react-aria/TagGroup.md): A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
- [Taming the dragon: Accessible drag and drop](react-aria/blog/drag-and-drop.md): We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:
- [TextField](react-aria/TextField.md): A text field allows a user to enter a plain text value with a keyboard.
- [TimeField](react-aria/TimeField.md): TimeFields allow users to enter and edit time values using a keyboard.
- [Toast](react-aria/Toast.md)
- [ToggleButton](react-aria/ToggleButton.md): A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
- [ToggleButtonGroup](react-aria/ToggleButtonGroup.md): A toggle button group allows a user to toggle multiple options, with single or multiple selection.
- [Toolbar](react-aria/Toolbar.md): A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes,
- [Tooltip](react-aria/Tooltip.md): A tooltip displays a description of an element on hover or focus.
- [Tree](react-aria/Tree.md): A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation
- [useClipboard](react-aria/useClipboard.md)
- [useCollator](react-aria/useCollator.md): ## Introduction
- [useDateFormatter](react-aria/useDateFormatter.md): ## Introduction
- [useDrag](react-aria/useDrag.md)
- [useDrop](react-aria/useDrop.md)
- [useField](react-aria/useField.md)
- [useFilter](react-aria/useFilter.md): ## Introduction
- [useFocus](react-aria/useFocus.md)
- [useFocusRing](react-aria/useFocusRing.md)
- [useFocusVisible](react-aria/useFocusVisible.md)
- [useFocusWithin](react-aria/useFocusWithin.md)
- [useHover](react-aria/useHover.md)
- [useId](react-aria/useId.md)
- [useIsSSR](react-aria/useIsSSR.md)
- [useKeyboard](react-aria/useKeyboard.md)
- [useLabel](react-aria/useLabel.md)
- [useLandmark](react-aria/useLandmark.md)
- [useLocale](react-aria/useLocale.md): ## Introduction
- [useLongPress](react-aria/useLongPress.md)
- [useMove](react-aria/useMove.md)
- [useNumberFormatter](react-aria/useNumberFormatter.md): ## Introduction
- [useObjectRef](react-aria/useObjectRef.md)
- [usePress](react-aria/usePress.md)
- [v1.0.0](react-aria/releases/v1-0-0.md): Welcome to the last release of the year! After a year of work, we are happy to announce the GA release of React Aria Components 🎉 This component library, built on top of our React Aria hooks, provides a simpler way to craft world-class accessible components with custom styles. See our new React Aria [landing page](https://react-spectrum.adobe.com/react-aria/index.html) for all of the details, including interactive examples. To help get you started even faster, we now also have a downloadable Storybook [starter kit](../getting-started.html#starter-kit) including an example CSS theme.
- [v1.1.0](react-aria/releases/v1-1-0.md): Welcome to the first release of the new year! We have had a great response to our GA release of React Aria Components. If you haven't tried it out, visit [our docs](https://react-spectrum.adobe.com/react-aria/index.html) to explore the examples. To help get you started, we have also created a few starter kits. These downloadable [starter kits](../getting-started.html#starter-kits) contain beautifully styled implementations of every available component and includes a working storybook. Available in vanilla and Tailwind CSS!
- [v1.10.0](react-aria/releases/v1-10-0.md): Drop everything! Drag and drop support in React Aria Tree has been released! 🫳🎤 This supports moving items within a tree or between collection components, with full keyboard and screen reader accessibility. It's interoperable with our existing drag and drop support in components like Table and GridList, and with third party apps via native HTML APIs. Check out our [previous blog post](../blog/drag-and-drop.html) on drag and drop to learn about the interactions, and our new [Tree drag and drop documentation](../Tree.html#drag-and-drop).
- [v1.11.0](react-aria/releases/v1-11-0.md): Happy summer! This release adds support for async loading and infinite scrolling, improves form integration and drag and drop interactions, and adds support for additional DOM events and attributes.
- [v1.12.0](react-aria/releases/v1-12-0.md): Summer might be winding down but we're definitely not! Back with another release, we have added support for origin-aware overlay animations in [Popover](../Popover.html) and [Tooltip](../Tooltip.html), which enable scale transitions to appear as if they are emerging from the trigger. We have also advanced Autocomplete to RC, and added support for filtering GridList, Table, and TagGroup (virtual focus support is still to come). Section support in [GridList](../GridList.html#sections) has also been added as an alpha, laying the groundwork for similar support in Tree and Table.
- [v1.13.0](react-aria/releases/v1-13-0.md): Happy fall! This release brings some long-awaited features, including multi-selection in [React Aria Select](../Select.html#multiple-selection) and enhanced animation support across our components. For example, [Disclosure](../Disclosure.html) now provides CSS variables to easily animate expanding and collapsing. We’ve also added a new `<SelectionIndicator>` component that can be used within components that support single selection such as [Tabs](../Tabs.html) and [ToggleButtonGroup](../ToggleButtonGroup.html#animation) to animate selection changes. In addition, we have significantly improved the behavior of scrolling modals on iOS 26. Lastly, `onAction` can now be used on a [`ComboBoxItem`](../ComboBox.html#item-actions), enabling you to add a “create” option.
- [v1.2.0](react-aria/releases/v1-2-0.md): We have a huge release today! Its a GA bonanza 🎊 – [Submenu](../Menu.html#submenus), [unavailable menu items](../Menu.html#unavailable-items), [DropZone](../DropZone.html) and [FileTrigger](../FileTrigger.html) components are now in GA. Check our [blog post](/blog/creating-a-pointer-friendly-submenu-experience.html) on the intricacies of the submenu interactions and how we handled them.
- [v1.3.0](react-aria/releases/v1-3-0.md): For this summer release, we have been busy working on improving virtualization in many of our Spectrum components including TableView, ListView, and ListBox. We have significantly reduced the complexity of our implementation, resulting in smaller bundle size, better performance, and improved stability. In our testing, this resulted in 14x faster per-frame render times on large tables due to better reuse of DOM nodes as you scroll. We are also working on bringing virtualization support to React Aria Components, which is available as an unstable API in this version.
- [v1.4.0](react-aria/releases/v1-4-0.md): Happy fall! 🍁 We're excited to announce that our color picker components are now generally available! This includes [ColorPicker](../ColorPicker.html), [ColorArea](../ColorArea.html), [ColorField](../ColorField.html), [ColorSlider](../ColorSlider.html), [ColorSwatch](../ColorSwatch.html), [ColorSwatchPicker](../ColorSwatchPicker.html), and [ColorWheel](../ColorWheel.html). These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.
- [v1.5.0](react-aria/releases/v1-5-0.md): We're excited to announce that our Disclosure components are now generally available! This includes [Disclosure](../Disclosure.html) and [DisclosureGroup](../DisclosureGroup.html) in React Aria. These components now also use the `hidden="until-found"` API currently supported in Chrome to enable searching collapsed content with ctrl + F.
- [v1.6.0](react-aria/releases/v1-6-0.md): Happy New Year! Our first release of 2025 includes a new [firstDayOfWeek](../Calendar.html#custom-first-day-of-week) prop for our calendar and date picker components, support for [CSS transitions](../styling.html#animation) in our overlay components, a new [Autocomplete](../Autocomplete.html) component in alpha, and a new [React Aria test utils](../testing.html#react-aria-test-utils) package.
- [v1.7.0](react-aria/releases/v1-7-0.md): Buckle in because this is a big one! In this React Aria release, we’re excited to announce three new components: [Toast](../Toast.html), [Tree](../Tree.html), and [Virtualizer](../Virtualizer.html). In addition, we have improved [Autocomplete](../Autocomplete.html) to enable UI patterns like [Searchable Menus](../Menu.html#complex-content), [Searchable Selects](../examples/searchable-select.html), and [Command Palettes](../examples/command-palette.html), added support for custom [Menu](../Menu.html#custom-trigger), [Popover](../Popover.html#custom-trigger), and [Tooltip](../Tooltip.html#custom-trigger) triggers, introduced `colSpan` support in Table, and upgraded to Tailwind CSS v4. Last but not least, we have a major refactor of [usePress](../usePress.html), which fixes many longstanding issues and improves compatibility with third party libraries.
- [v1.8.0](react-aria/releases/v1-8-0.md): In today's release, we are excited to announce custom calendar support in React Aria Components! This feature allows you to create your own calendar that implements custom business logic, such as a [4-5-4 fiscal calendar](https://nrf.com/resources/4-5-4-calendar), either by extending an existing Calendar implementation or building from scratch. Please see the [React Aria docs](../Calendar.html#custom-calendar-systems) for an example implementation. A special shout out to [@ToyWalrus](https://github.com/ToyWalrus) for all the hard work that went into this contribution!
- [v1.9.0](react-aria/releases/v1-9-0.md): This release includes a range of enhancements and fixes such as improved keyboard accessibility in TagGroup and increased stability for dynamic table updates. It also brings support for React 19's ref cleanup behavior, performance improvements for collection updates in React transitions and pressable elements, and TypeScript updates including backwards compatibility with older TypeScript and `@types/react` versions.
- [Virtualizer](react-aria/Virtualizer.md): A Virtualizer renders a scrollable collection of data using customizable layouts.
- [VisuallyHidden](react-aria/VisuallyHidden.md)