React Aria

A library of React Hooks that provides accessible UI primitives for your design system.

Get started GitHub

React Aria hero image

Accessible

React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.

Adaptive

React Aria ensures consistent behavior, no matter the UI. It supports mouse, touch, keyboard, and screen reader interactions that have been tested across a wide variety of browsers, devices, and platforms.

International

React Aria supports over 30 languages, including right-to-left-specific behavior, internationalized date and number formatting, and more.

Fully customizable

React Aria doesn’t implement any rendering or impose a DOM structure, styling methodology, or design-specific details. It provides behavior, accessibility, and interactions and lets you focus on your design.

Components#

Buttons#

A button allows a user to perform an action with a mouse, touch, or keyboard.

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

Pickers#

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

A select 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 grid list displays a list of interactive items, with keyboard navigation, row selection, and actions.

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

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.

Overlays#

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

A popover displays interactive content in context with a trigger element.

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

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 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 slider allows a user to select one or more values within a 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 heirarchy of links to the current page or resource.

Status#

A progress bar shows progress of an operation over time.

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

Interactions#

Handles press interactions across mouse, touch, keyboard, and screen reader input.

Handles long press interactions for mouse and touch devices.

Handles mouse hover interactions, ignoring touch emulation.

Handles move interactions, including mouse and touch drag gestures, and arrow key equivalents.

Handles keyboard interactions for a focusable element.

Handles focus interactions for an element, ignoring its descendants.

Handles focus interactions for an element and its descendants.

A focus ring is an indication of the active element when interacting with a keyboard.

A focus scope contains, restores, and manages focus for its descendant elements.