GridList

ReactProps

Props

API reference for GridList. For usage examples, see the React tab.

GridList.Root

Name	Type	Default
children	((item: T) => ReactNode) | ReactNode	—
The contents of the collection.
dependencies	readonly any[]	—
Values that should invalidate the item cache when using dynamic collections.
disabledBehavior	DisabledBehavior	'all'
Whether disabledKeys applies to all interactions, or only selection.
disabledKeys	Iterable<Key>	—
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
disallowEmptySelection	boolean	—
Whether the collection allows empty selection.
disallowTypeAhead	boolean	false
Whether typeahead navigation is disabled.
dragAndDropHooks	DragAndDropHooks<NoInfer<T>>	—
The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the GridList.
escapeKeyBehavior	"clearSelection" | "none"	'clearSelection'
Whether pressing the escape key should clear selection in the grid list or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
items	Iterable<T>	—
Item objects in the collection.
keyboardNavigationBehavior	"arrow" | "tab"	'arrow'
Whether keyboard navigation to focusable elements within grid list items is via the left/right arrow keys or the tab key.
layout	"grid" | "stack"	'stack'
Whether the items are arranged in a stack or grid.
orientation	Orientation	'vertical'
The primary orientation of the items. Usually this is the direction that the collection scrolls.
renderEmptyState	((props: GridListRenderProps) => ReactNode)	—
Provides content to display when there are no items in the list.
selectionBehavior	SelectionBehavior	'toggle'
How multiple selection should behave in the collection.
selectionMode	SelectionMode	—
The type of selection that is allowed in the collection.
shouldSelectOnPressUp	boolean	—
Whether selection should occur on press up instead of press down.
UNSTABLE_focusOnEntry	"first" | "last"	—
Which item in the collection to focus when tabbing into the collection. Overrides default roving tab index like behavior.

Accessibility (5)(5 props)

Advanced (9)(9 props)

Events (66)(66 props)

Forms (2)(2 props)

Styling (2)(2 props)

GridList.Item

Name	Type	Default
allowsArrowNavigation	boolean	—
Whether the row should support arrow key navigation even when the containing collection uses tab keyboard navigation. Allows users to navigate between rows with arrow keys while focus is on an interactive child element within the row.
children	ChildrenOrFunction<GridListItemRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
download	string | boolean	—
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN (opens in new tab).
focusMode	"child" | "row"	—
Whether the row or its first focusable child element should be focused when navigating to the row. Defaults to 'row'.
href	string	—
A URL to link to. See MDN (opens in new tab).
hrefLang	string	—
Hints at the human language of the linked URL. SeeMDN (opens in new tab).
isDisabled	boolean	—
Whether the item is disabled.
ping	string	—
A space-separated list of URLs to ping when the link is followed. See MDN (opens in new tab).
referrerPolicy	HTMLAttributeReferrerPolicy	—
How much of the referrer to send when following the link. See MDN (opens in new tab).
rel	string	—
The relationship between the linked resource and the current page. See MDN (opens in new tab).
routerOptions	undefined	—
Options for the configured client side router.
target	HTMLAttributeAnchorTarget	—
The target window for the link. See MDN (opens in new tab).
textValue	string	—
A string representation of the item's contents, used for features like typeahead.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (73)(73 props)

Forms (1)(1 prop)

Styling (2)(2 props)

GridList.Section

Name	Type	Default
children	((item: unknown) => ReactElement<unknown, string | JSXElementConstructor<any>>) | ReactNode	—
Static child items or a function to render children.
dependencies	readonly any[]	—
Values that should invalidate the item cache when using dynamic collections.
items	Iterable<unknown>	—
Item objects in the section.

Accessibility (2)(2 props)

Advanced (9)(9 props)

Events (64)(64 props)

Forms (1)(1 prop)

Styling (2)(2 props)

GridList.SectionHeader

Name	Type	Default
about	string	—
accessKey	string	—
autoSave	string	—
children	ReactNode	—
color	string	—
content	string	—
contextMenu	string	—
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	—
datatype	string	—
defaultChecked	boolean	—
exportparts	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)
inlist	any	—
inputMode	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"	—
Hints at the type of data that might be entered by the user while editing the element or its contents See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)
itemID	string	—
itemProp	string	—
itemRef	string	—
itemScope	boolean	—
itemType	string	—
part	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)
prefix	string	—
property	string	—
radioGroup	string	—
rel	string	—
resource	string	—
results	number	—
rev	string	—
security	string	—
title	string	—
typeof	string	—
unselectable	"off" | "on"	—
vocab	string	—

Accessibility (55)(55 props)

Advanced (21)(21 props)

Events (168)(168 props)

Forms (1)(1 prop)

Styling (2)(2 props)