React Aria 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.

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 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.

A tag group displays a list of items, with support for keyboard navigation, selection, 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 synchronizes a color value between multiple React Aria color components.

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.

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.

A form allows users to submit data to a server, with support for validation.

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.

Status#

A progress bar shows progress of an operation over time.

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

Drag and drop#

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

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.