GridList - React Aria Components
A grid list displays data in a single column with support for keyboard navigation, selection, and interactive elements within rows.
Item Selection
Single or multiple selection with checkboxes and keyboard support
Interactive Children
List items can contain buttons, links, and other interactive elements
Keyboard Navigation
Full keyboard support with arrow keys, home/end, and typeahead
Drag and Drop
Reorder items and transfer data between lists
Async Loading
Support for loading data asynchronously with loading states
Accessible
Follows ARIA grid pattern with screen reader support
Basic Example
Pokemon List
File System
Drag and Drop Example
Drag items between lists or reorder within the same list:
Adobe Products
Other Software
Async Loading Example
Example with async data loading and infinite scroll:
Empty State Example
File Drop Zone Example
Drop files here to add them to the list:
📁 Drop files here or click to browse
Component API
GridList Props
selectionBehavior: 'toggle' | 'replace'
disallowEmptySelection: boolean
selectedKeys: Set<Key>
defaultSelectedKeys: Set<Key>
onSelectionChange: (keys: Set<Key>) => void
onAction: (key: Key) => void
dragAndDropHooks: DragAndDropHooks
renderEmptyState: () => ReactNode
GridListItem Props
textValue: string
isDisabled: boolean
href: string
onAction: () => void
Accessibility Features
ARIA Grid Pattern
Follows W3C ARIA grid pattern with proper roles and properties
Keyboard Navigation
Arrow keys, Home/End, Page Up/Down, and typeahead support
Screen Reader Support
Proper announcements for selection changes and state updates
Focus Management
Visible focus indicators and proper focus restoration