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#

Combines a text input with a listbox, allowing users to filter a list of options.

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.

A table displays data in rows and columns, with support for row selection, sorting, and keyboard navigation.

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 users to enter and edit date values using a keyboard.

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

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

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

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.

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

A slider allows a user to select a one or more values within a range.

Tabs organize content into multiple sections.

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.

Overlays#

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

A tooltip displays a description of an element on hover.

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