A Collection renders a list of items, automatically managing caching and keys.
export function Collection<T>(props: CollectionProps<T>): ElementBuilds a Collection from the children provided to the content prop, and passes it to the
child render prop function.
An immutable Collection implementation. Updates are only allowed when it is not marked as frozen. This can be subclassed to implement custom collection behaviors.
class BaseCollection<T> implements import("@react-types/shared").Collection<import("@react-types/shared").Node<T>> {An immutable object representing a Node in a Collection.
class CollectionNode<T> implements import("@react-types/shared").Node<T> {Provides the behavior and accessibility implementation for an autocomplete component. An autocomplete combines a text input with a collection, allowing users to filter the collection's contents match a query.
@param — - Props for the autocomplete.
@param — - State for the autocomplete, as returned by useAutocompleteState.
Provides the behavior and accessibility implementation for an in a breadcrumbs component.
See useBreadcrumbs for details about breadcrumbs.
Provides the behavior and accessibility implementation for a breadcrumbs component. Breadcrumbs display a hierarchy of links to the current page or resource in an application.
export function useBreadcrumbs(props: AriaBreadcrumbsProps): BreadcrumbsAriaProvides the behavior and accessibility implementation for a calendar component. A calendar displays one or more date grids and allows users to select a single date.
export function useCalendar<T extends import("react-stately").DateValue, M extends import("react-stately").CalendarSelectionMode = "single">(props: AriaCalendarProps<T, M>, state: import("react-stately").CalendarState<M>): CalendarAriaProvides the behavior and accessibility implementation for a calendar cell component. A calendar cell displays a date cell within a calendar grid which can be selected by the user.
export function useCalendarCell(props: AriaCalendarCellProps, state: import("react-stately").CalendarState<import("react-stately").CalendarSelectionMode> | import("react-stately").RangeCalendarState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): CalendarCellAriaProvides the behavior and accessibility implementation for a calendar grid component. A calendar grid displays a single grid of days within a calendar or range calendar which can be keyboard navigated and selected by the user.
export function useCalendarGrid(props: AriaCalendarGridProps, state: import("react-stately").CalendarState<import("react-stately").CalendarSelectionMode> | import("react-stately").RangeCalendarState): CalendarGridAriaProvides the behavior and accessibility implementation for a range calendar component. A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
export function useRangeCalendar<T extends import("react-stately").DateValue>(props: AriaRangeCalendarProps<T>, state: import("react-stately").RangeCalendarState, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): CalendarAriaProvides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
@param — - Props for the checkbox.
@param — - State for the checkbox, as returned by useToggleState.
@param — - A ref for the HTML input element.
Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options.
@param — - Props for the checkbox group.
@param — - State for the checkbox group, as returned by useCheckboxGroupState.
Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group. Checkbox groups allow users to select multiple items from a list of options.
@param — - Props for the checkbox.
@param — - State for the checkbox, as returned by useCheckboxGroupState.
@param — - A ref for the HTML input element.
Provides the behavior and accessibility implementation for a color area component. Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
export function useColorArea(props: AriaColorAreaOptions, state: import("react-stately").ColorAreaState): ColorAreaAriaProvides the behavior and accessibility implementation for a color channel field, allowing users to edit the value of an individual color channel.
export function useColorChannelField(props: AriaColorChannelFieldProps, state: import("react-stately").ColorChannelFieldState, inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>): ColorChannelFieldAriaProvides the behavior and accessibility implementation for a color field component. Color fields allow users to enter and adjust a hex color value.
export function useColorField(props: AriaColorFieldProps, state: import("react-stately").ColorFieldState, ref: RefObject<HTMLInputElement | null>): ColorFieldAriaProvides the behavior and accessibility implementation for a color slider component. Color sliders allow users to adjust an individual channel of a color value.
export function useColorSlider(props: AriaColorSliderOptions, state: import("react-stately").ColorSliderState): ColorSliderAriaProvides the accessibility implementation for a color swatch component. A color swatch displays a preview of a selected color.
export function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAriaProvides the behavior and accessibility implementation for a color wheel component. Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
export function useColorWheel(props: AriaColorWheelOptions, state: import("react-stately").ColorWheelState, inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>): ColorWheelAriaProvides the behavior and accessibility implementation for a combo box component. A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
@param — - Props for the combo box.
@param — - State for the select, as returned by useComboBoxState.
Provides the behavior and accessibility implementation for a date field component. A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
export function useDateField<T extends import("react-stately").DateValue>(props: AriaDateFieldOptions<T>, state: import("react-stately").DateFieldState, ref: import("@react-types/shared").RefObject<Element | null>): DateFieldAriaProvides the behavior and accessibility implementation for a time field component. A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.
export function useTimeField<T extends import("react-stately").TimeValue>(props: AriaTimeFieldOptions<T>, state: import("react-stately").TimeFieldState, ref: import("@react-types/shared").RefObject<Element | null>): DateFieldAriaProvides the behavior and accessibility implementation for a date picker component. A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
export function useDatePicker<T extends import("react-stately").DateValue>(props: AriaDatePickerProps<T>, state: import("react-stately").DatePickerState, ref: import("@react-types/shared").RefObject<Element | null>): DatePickerAriaProvides the behavior and accessibility implementation for a date picker component. A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.
export function useDateRangePicker<T extends import("react-stately").DateValue>(props: AriaDateRangePickerProps<T>, state: import("react-stately").DateRangePickerState, ref: import("@react-types/shared").RefObject<Element | null>): DateRangePickerAriaProvides the behavior and accessibility implementation for a segment in a date field. A date segment displays an individual unit of a date and time, and allows users to edit the value by typing or using the arrow keys to increment and decrement.
export function useDateSegment(segment: import("react-stately").DateSegment, state: import("react-stately").DateFieldState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): DateSegmentAriaProvides the behavior and accessibility implementation for a dialog component. A dialog is an overlay shown above other content in an application.
export function useDialog(props: AriaDialogProps, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): DialogAriaProvides the behavior and accessibility implementation for a disclosure component.
@param — - Props for the disclosure.
@param — - State for the disclosure, as returned by useDisclosureState.
@param — - A ref for the disclosure panel.
Handles drag interactions for an element, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.
export function useDrag(options: DragOptions): DragResultHandles drop interactions for an element, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.
export function useDrop(options: DropOptions): DropResultHandles drag interactions for a collection component, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.
export function useDraggableCollection(props: DraggableCollectionOptions, state: import("react-stately").DraggableCollectionState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): voidHandles drop interactions for a collection component, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.
export function useDroppableCollection(props: DroppableCollectionOptions, state: import("react-stately").DroppableCollectionState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): DroppableCollectionResultHandles drop interactions for an item within a collection component.
export function useDroppableItem(options: DroppableItemOptions, state: import("react-stately").DroppableCollectionState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): DroppableItemResultHandles drop interactions for a target within a droppable collection.
export function useDropIndicator(props: DropIndicatorProps, state: import("react-stately").DroppableCollectionState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): DropIndicatorAriaHandles drag interactions for an item within a draggable collection.
export function useDraggableItem(props: DraggableItemProps, state: import("react-stately").DraggableCollectionState): DraggableItemResultHandles clipboard interactions for a focusable element. Supports items of multiple data types, and integrates with the operating system native clipboard.
export function useClipboard(options: ClipboardProps): ClipboardResultWhether the items are arranged in a stack or grid.
@default — 'stack'
The primary orientation of the items. Usually this is the direction that the collection scrolls.
@default — 'vertical'
The horizontal layout direction.
@default — 'ltr'
Returns whether a drop item is a directory.
export function isDirectoryDropItem(dropItem: import("@react-types/shared").DropItem): dropItem is import("@react-types/shared").DirectoryDropItemReturns whether a drop item is a file.
export function isFileDropItem(dropItem: import("@react-types/shared").DropItem): dropItem is import("@react-types/shared").FileDropItemReturns whether a drop item contains text data.
export function isTextDropItem(dropItem: import("@react-types/shared").DropItem): dropItem is import("@react-types/shared").TextDropItemA utility component that applies a CSS class when an element has keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.
export function FocusRing(props: FocusRingProps): ReactElement<unknown, string | JSXElementConstructor<any>>A FocusScope manages focus for its descendants. It supports containing focus inside the scope, restoring focus to the previously focused element on unmount, and auto focusing children on mount. It also acts as a container for a programmatic focus management interface that can be used to move focus forward and back in response to user events.
export function FocusScope(props: FocusScopeProps): ElementReturns a FocusManager interface for the parent FocusScope. A FocusManager can be used to programmatically move focus within a FocusScope, e.g. in response to user events like keyboard navigation.
export function useFocusManager(): FocusManager | undefinedDetermines whether a focus ring should be shown to indicate keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.
export function useFocusRing(props?: AriaFocusRingProps): FocusRingAriaProvides the locale for the application to all child components.
export function I18nProvider(props: I18nProviderProps): ElementDetermines if a locale is read right to left using [Intl.Locale]://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale.
export function isRTL(localeString: string): booleanProvides localized string collation for the current locale. Automatically updates when the locale changes, and handles caching of the collator for performance.
@param — - Collator options.
Provides localized date formatting for the current locale. Automatically updates when the locale changes, and handles caching of the date formatter for performance.
@param — - Formatting options.
Provides localized string search functionality that is useful for filtering or matching items in a list. Options can be provided to adjust the sensitivity to case, diacritics, and other parameters.
export function useFilter(options?: CollatorOptions): FilterProvides localized string formatting for the current locale. Supports interpolating variables, selecting the correct pluralization, and formatting numbers. Automatically updates when the locale changes.
@param — - A mapping of languages to localized strings by key.
Returns a cached LocalizedStringDictionary for the given strings.
export function useLocalizedStringDictionary<K extends string = string, T extends LocalizedString = string>(strings: LocalizedStrings<K, T>, packageName?: string): LocalizedStringDictionary<K, T>Provides localized number formatting for the current locale. Automatically updates when the locale changes, and handles caching of the number formatter for performance.
@param — - Formatting options.
Provides localized list formatting for the current locale. Automatically updates when the locale changes, and handles caching of the list formatter for performance.
@param — - Formatting options.
Handles focus events for the immediate target. Focus events on child elements will be ignored.
export function useFocus<Target extends import("@react-types/shared").FocusableElement = import("@react-types/shared").FocusableElement>(props: FocusProps<Target>): FocusResult<Target>Manages focus visible state for the page, and subscribes individual components for updates.
export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResultHandles focus events for the target and its descendants.
export function useFocusWithin(props: FocusWithinProps): FocusWithinResultHandles pointer hover interactions for an element. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices.
export function useHover(props: HoverProps): HoverResultExample, used in components like Dialogs and Popovers so they can close when a user clicks outside them.
export function useInteractOutside(props: InteractOutsideProps): voidHandles keyboard interactions for a focusable element.
export function useKeyboard(props: KeyboardProps): KeyboardResultHandles move interactions across mouse, touch, and keyboard, including dragging with the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices.
export function useMove(props: import("@react-types/shared").MoveEvents): MoveResultHandles press interactions across mouse, touch, keyboard, and screen readers. It normalizes behavior across browsers and platforms, and handles many nuances of dealing with pointer and keyboard events.
export function usePress(props: PressHookProps): PressResultHandles long press interactions across mouse and touch devices. Supports a customizable time threshold, accessibility description, and normalizes behavior across browsers and devices.
export function useLongPress(props: LongPressProps): LongPressResultUsed to make an element focusable and capable of auto focus.
export function useFocusable<T extends import("@react-types/shared").FocusableElement = import("@react-types/shared").FocusableElement>(props: FocusableOptions<T>, domRef: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): FocusableAriaProvides the accessibility implementation for input fields. Fields accept user input, gain context from their label, and may display a description or error message.
@param — - Props for the Field.
Provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.
@param — - The props for labels and fields.
Provides the behavior and accessibility implementation for a list component with interactive children. A grid list displays data in a single column and enables a user to navigate its contents via directional navigation keys.
@param — - Props for the list.
@param — - State for the list, as returned by useListState.
@param — - The ref attached to the list element.
Provides the behavior and accessibility implementation for a row in a grid list.
@param — - Props for the row.
@param — - State of the parent list, as returned by useListState.
@param — - The ref attached to the row element.
Provides the behavior and accessibility implementation for a section in a grid list.
See useGridList for more details about grid list.
@param — - Props for the section.
Provides the behavior and accessibility implementation for a selection checkbox in a grid list.
@param — - Props for the selection checkbox.
@param — - State of the list, as returned by useListState.
Provides landmark navigation in an application. Call this with a role and label to register a landmark navigable with F6.
@param — - Props for the landmark.
@param — - Ref to the landmark.
Provides the behavior and accessibility implementation for a link component. A link allows a user to navigate to another page or resource within a web page or application.
export function useLink(props: AriaLinkOptions, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): LinkAriaProvides the behavior and accessibility implementation for a listbox component. A listbox displays a list of options and allows a user to select one or more of them.
@param — - Props for the listbox.
@param — - State for the listbox, as returned by useListState.
Provides the behavior and accessibility implementation for a section in a listbox.
See useListBox for more details about listboxes.
@param — - Props for the section.
Provides the behavior and accessibility implementation for an option in a listbox.
See useListBox for more details about listboxes.
@param — - Props for the option.
@param — - State for the listbox, as returned by useListState.
Provides the behavior and accessibility implementation for a menu component. A menu displays a list of actions or options that a user can choose.
@param — - Props for the menu.
@param — - State for the menu, as returned by useListState.
Provides the behavior and accessibility implementation for an item in a menu.
See useMenu for more details about menus.
@param — - Props for the item.
@param — - State for the menu, as returned by useTreeState.
Provides the behavior and accessibility implementation for a section in a menu.
See useMenu for more details about menus.
@param — - Props for the section.
Provides the behavior and accessibility implementation for a menu trigger.
@param — - Props for the menu trigger.
@param — - State for the menu trigger.
@param — - Ref to the HTML element trigger for the menu.
Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.
@param — - Props for the submenu trigger and refs attach to its submenu and parent menu.
@param — - State for the submenu trigger.
@param — - Ref to the submenu trigger element.
Provides the accessibility implementation for a meter component. Meters represent a quantity within a known range, or a fractional value.
export function useMeter(props: AriaMeterProps): MeterAriaProvides the behavior and accessibility implementation for a number field component. Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
export function useNumberField(props: AriaNumberFieldProps, state: import("react-stately").NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAriaA visually hidden button that can be used to allow screen reader users to dismiss a modal or popup when there is no visual affordance to do so.
export function DismissButton(props: DismissButtonProps): ElementEach ModalProvider tracks how many modals are open in its subtree. On mount, the modals trigger
addModal to increment the count, and trigger removeModal on unmount to decrement it. This is
done recursively so that all parent providers are incremented and decremented. If the modal count
is greater than zero, we add aria-hidden to this provider to hide its subtree from screen
readers. This is done using React context in order to account for things like portals, which can
cause the React tree and the DOM tree to differ significantly in structure.
A container for overlays like modals and popovers. Renders the overlay into a Portal which is placed at the end of the document body. Also ensures that the overlay is hidden from screen readers if a nested modal is opened. Only the top-most modal or overlay should be accessible at once.
export function OverlayContainer(props: OverlayContainerProps): ReactPortal | nullAn OverlayProvider acts as a container for the top-level application.
Any application that uses modal dialogs or other overlays should
be wrapped in a <OverlayProvider>. This is used to ensure that
the main content of the application is hidden from screen readers
if a modal or other overlay is opened. Only the top-most modal or
overlay should be accessible at once.
Hides content outside the current <OverlayContainer> from screen readers
on mount and restores it on unmount. Typically used by modal dialogs and
other types of overlays to ensure that only the top-most modal is
accessible at once.
Used to determine if the tree should be aria-hidden based on how many modals are open.
export function useModalProvider(): ModalProviderAriaA container which renders an overlay such as a popover or modal in a portal, and provides a focus scope for the child elements.
export function Overlay(props: OverlayProps): ReactPortal | nullProvides the behavior and accessibility implementation for a modal component. A modal is an overlay element which blocks interaction with elements outside it.
export function useModalOverlay(props: AriaModalOverlayProps, state: import("react-stately").OverlayTriggerState, ref: import("@react-types/shared").RefObject<HTMLElement | null>): ModalOverlayAriaProvides the behavior for overlays such as dialogs, popovers, and menus. Hides the overlay when the user interacts outside it, when the Escape key is pressed, or optionally, on blur. Only the top-most overlay will close at once.
export function useOverlay(props: AriaOverlayProps, ref: import("@react-types/shared").RefObject<Element | null>): OverlayAriaHandles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes.
export function useOverlayPosition(props: AriaPositionProps): PositionAriaHandles the behavior and accessibility for an overlay trigger, e.g. a button that opens a popover, menu, or other overlay that is positioned relative to the trigger.
export function useOverlayTrigger(props: OverlayTriggerProps, state: import("react-stately").OverlayTriggerState, ref?: import("@react-types/shared").RefObject<Element | null>): OverlayTriggerAriaProvides the behavior and accessibility implementation for a popover component. A popover is an overlay element positioned relative to a trigger.
export function usePopover(props: AriaPopoverProps, state: import("react-stately").OverlayTriggerState): PopoverAriaPrevents scrolling on the document body on mount, and restores it on unmount. Also ensures that content does not shift due to the scrollbars disappearing.
export function usePreventScroll(options?: PreventScrollOptions): voidWhether the scroll lock is disabled.
isDisabled?: boolean;Sets the portal container for all overlay elements rendered by its children.
export function UNSAFE_PortalProvider(props: PortalProviderProps): ElementProvides the accessibility implementation for a progress bar component. Progress bars show either determinate or indeterminate progress of an operation over time.
export function useProgressBar(props: AriaProgressBarProps): ProgressBarAriaProvides the behavior and accessibility implementation for an individual radio button in a radio group.
@param — - Props for the radio.
@param — - State for the radio group, as returned by useRadioGroupState.
@param — - Ref to the HTML input element.
Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options.
@param — - Props for the radio group.
@param — - State for the radio group, as returned by useRadioGroupState.
Provides the behavior and accessibility implementation for a search field.
@param — - Props for the search field.
@param — - State for the search field, as returned by useSearchFieldState.
@param — - A ref to the input element.
Renders a hidden native <select> element, which can be used to support browser
form autofill, mobile form navigation, and native form submission.
Provides the behavior and accessibility implementation for a hidden <select> element, which
can be used in combination with useSelect to support browser form autofill, mobile form
navigation, and native HTML form submission.
Provides the behavior and accessibility implementation for a select component. A select displays a collapsible list of options and allows a user to select one of them.
@param — - Props for the select.
@param — - State for the select, as returned by useListState.
Provides the accessibility implementation for a separator. A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
export function useSeparator(props: SeparatorProps): SeparatorAriaWhen using SSR with React Aria in React 16 or 17, applications must be wrapped in an SSRProvider. This ensures that auto generated ids are consistent between the client and server.
export function SSRProvider(props: SSRProviderProps): ElementReturns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay browser-specific rendering until after hydration.
export function useIsSSR(): booleanProvides the behavior and accessibility implementation for a slider component representing one or more values.
@param — Props for the slider.
@param — State for the slider, as returned by useSliderState.
@param — Ref for the "track" element. The width of this element provides the "length" of the track -- the span of one dimensional space that the slider thumb can be. It also accepts click and drag motions, so that the closest thumb will follow clicks and drags on the track.
Provides behavior and accessibility for a thumb of a slider component.
@param — Options for this Slider thumb.
@param — Slider state, created via useSliderState.
Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection.
@param — - Props for the switch.
@param — - State for the switch, as returned by useToggleState.
@param — - Ref to the HTML input element.
Provides the behavior and accessibility implementation for a table component. A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
@param — - Props for the table.
@param — - State for the table, as returned by useTableState.
@param — - The ref attached to the table element.
Provides the behavior and accessibility implementation for a cell in a table.
@param — - Props for the cell.
@param — - State of the table, as returned by useTableState.
@param — - The ref attached to the cell element.
Provides the behavior and accessibility implementation for a column header in a table.
@param — - Props for the column header.
@param — - State of the table, as returned by useTableState.
@param — - The ref attached to the column header element.
Provides the behavior and accessibility implementation for a table column resizer element.
@param — - Props for the resizer.
@param — - State for the table's resizable columns, as returned by
useTableColumnResizeState.
@param — - The ref attached to the resizer's visually hidden input element.
Provides the behavior and accessibility implementation for a header row in a table.
@param — - Props for the row.
@param — - State of the table, as returned by useTableState.
Provides the behavior and accessibility implementation for a row in a table.
@param — - Props for the row.
@param — - State of the table, as returned by useTableState.
Provides the behavior and accessibility implementation for the select all checkbox in a table.
@param — - Props for the select all checkbox.
@param — - State of the table, as returned by useTableState.
Provides the behavior and accessibility implementation for a selection checkbox in a table.
@param — - Props for the selection checkbox.
@param — - State of the table, as returned by useTableState.
Provides the behavior and accessibility implementation for a tab. When selected, the associated tab panel is shown.
export function useTab<T>(props: AriaTabProps, state: import("react-stately").TabListState<T>, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): TabAriaProvides the behavior and accessibility implementation for a tab list. Tabs organize content into multiple sections and allow users to navigate between them.
export function useTabList<T>(props: AriaTabListOptions<T>, state: import("react-stately").TabListState<T>, ref: import("@react-types/shared").RefObject<HTMLElement | null>): TabListAriaProvides the behavior and accessibility implementation for a tab panel. A tab panel is a container for the contents of a tab, and is shown when the tab is selected.
export function useTabPanel<T>(props: AriaTabPanelProps, state: import("react-stately").TabListState<T> | null, ref: import("@react-types/shared").RefObject<Element | null>): TabPanelAriaProvides the behavior and accessibility implementation for a tag component.
@param — - Props to be applied to the tag.
@param — - State for the tag group, as returned by useListState.
@param — - A ref to a DOM element for the tag.
Provides the behavior and accessibility implementation for a tag group component. A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
@param — - Props to be applied to the tag group.
@param — - State for the tag group, as returned by useListState.
@param — - A ref to a DOM element for the tag group.
Provides the behavior and accessibility implementation for a text field.
@param — - Props for the text field.
@param — - Ref to the HTML input or textarea element.
The type of ref object that can be passed to useTextField based on the given
intrinsic HTML element name; e.g.RefObject<HTMLInputElement>,
RefObject<HTMLTextAreaElement>.
The intrinsic HTML element names that useTextField supports; e.g. input,
textarea.
A map of HTML element names and their interface types.
For example 'a' -> HTMLAnchorElement.
A map of HTML element names and their attribute interface types.
For example 'a' -> AnchorHTMLAttributes<HTMLAnchorElement>.
Provides the behavior and accessibility implementation for a toast component. Toasts display brief, temporary notifications of actions, errors, or other events in an application.
export function useToast<T>(props: AriaToastProps<T>, state: import("react-stately").ToastState<T>, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): ToastAriaProvides the behavior and accessibility implementation for a toast region containing one or more toasts. Toasts display brief, temporary notifications of actions, errors, or other events in an application.
export function useToastRegion<T>(props: AriaToastRegionProps, state: import("react-stately").ToastState<T>, ref: import("@react-types/shared").RefObject<HTMLElement | null>): ToastRegionAriaProvides the behavior and accessibility implementation for a toolbar. A toolbar is a container for a set of interactive controls with arrow key navigation.
@param — - Props to be applied to the toolbar.
@param — - A ref to a DOM element for the toolbar.
Provides the accessibility implementation for a Tooltip component.
export function useTooltip(props: AriaTooltipProps, state?: import("react-stately").TooltipTriggerState): TooltipAriaProvides the behavior and accessibility implementation for a tooltip trigger, e.g. a button that shows a description when focused or hovered.
export function useTooltipTrigger(props: import("react-stately").TooltipTriggerProps, state: import("react-stately").TooltipTriggerState, ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>): TooltipTriggerAriaProvides the behavior and accessibility implementation for a single column treegrid component with interactive children. A tree grid provides users with a way to navigate nested hierarchical information.
@param — - Props for the treegrid.
@param — - State for the treegrid, as returned by useTreeState.
@param — - The ref attached to the treegrid element.
Provides the behavior and accessibility implementation for a row in a tree grid list.
@param — - Props for the row.
@param — - State of the parent list, as returned by useTreeState.
@param — - The ref attached to the row element.
Calls all functions in the order they were chained with the same arguments.
export function chain(...callbacks: any[]): (...args: any[]) => voidMerges multiple props objects together. Event handlers are chained, classNames are combined, ids are deduplicated, and refs are merged. For all other props, the last prop object overrides all previous ones.
@param — - Multiple sets of props to merge together.
Merges multiple refs into one. Works with either callback or object refs.
export function mergeRefs<T>(...refs: Ref<T> | MutableRefObject<T> | null | undefined[]): Ref<T>If a default is not provided, generate an id.
@param — - Default component id.
Offers an object ref for a given callback ref or an object ref. Especially
helfpul when passing forwarded refs (created using React.forwardRef) to
React Aria hooks.
@param — The original ref intended to be used.
@returns — An object ref that updates the given ref.
@see — ://react.dev/reference/react/forwardRef
A RouterProvider accepts a navigate function from a framework or client side router,
and provides it to all nested React Aria links to enable client side navigation.
VisuallyHidden hides its children visually, while keeping content visible to screen readers.
export function VisuallyHidden(props: VisuallyHiddenProps): ElementProvides props for an element that hides its children visually but keeps content visible to assistive technology.
export function useVisuallyHidden(props?: VisuallyHiddenProps): VisuallyHiddenAriaAn optional filter function used to determine if a option should be included in the autocomplete list. Include this if the items you are providing to your wrapped collection aren't filtered by default.
filter?: (textValue: string, inputValue: string, node: import("@react-types/shared").Node<T>) => boolean;Whether or not to focus the first item in the collection after a filter is performed. Note this
is only applicable if virtual focus behavior is not turned off via disableVirtualFocus.
@default — false
Whether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable.
@default — false
The ref for the wrapped collection element.
inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;The ref for the wrapped collection element.
collectionRef: import("@react-types/shared").RefObject<HTMLElement | null>;Props for the autocomplete input element. These should be passed to the input's aria hooks (e.g. useTextField/useSearchField/etc) respectively.
inputProps: InputProps;Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu).
collectionProps: CollectionOptions;Ref to attach to the wrapped collection.
collectionRef: import("@react-types/shared").RefObject<HTMLElement | null>;A filter function that returns if the provided collection node should be filtered out of the collection.
filter?: (nodeTextValue: string, node: import("@react-types/shared").Node<T>) => boolean;Whether the collection items should use virtual focus instead of being focused directly.
shouldUseVirtualFocus: boolean;Whether typeahead is disabled.
disallowTypeAhead: boolean;The contents of the collection.
children?: ReactNode | ((item: T) => ReactNode);Values that should invalidate the item cache when using dynamic collections.
dependencies?: readonly any[];A scope to prepend to all child item ids to ensure they are unique.
idScope?: import("@react-types/shared").Key;Whether to add id and value props to all child items.
The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
@default — 'a'
Whether the breadcrumb item represents the current page.
isCurrent?: boolean;The type of current location the breadcrumb item represents, if isCurrent is true.
@default — 'page'
Whether the breadcrumb item is disabled.
isDisabled?: boolean;The contents of the breadcrumb item.
children: ReactNode;Props for the button element.
buttonProps: T;Whether the button is currently pressed.
isPressed: boolean;Whether the button is disabled.
isDisabled?: boolean;The content to display in the button.
children?: ReactNode;A URL to link to if elementType="a".
href?: string;The target window for the link.
target?: string;The HTML element or React element used to render the button, e.g. 'div', 'a', or RouterLink.
@default — 'button'
Indicates whether the element is disabled to users of assistive technology.
'aria-disabled'?: boolean | "true" | "false";Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
'aria-expanded'?: boolean | "true" | "false";Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
'aria-haspopup'?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog" | "true" | "false";Identifies the element (or elements) whose contents or presence are controlled by the current element.
'aria-controls'?: string;Indicates the current "pressed" state of toggle buttons.
'aria-pressed'?: boolean | "true" | "false" | "mixed";Indicates whether this element represents the current item within a container or set of related elements.
'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time";The behavior of the button when used in an HTML form.
@default — 'button'
Whether to prevent focus from moving to the button when pressing it.
Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
The <form> element to associate the button with.
The value of this attribute must be the id of a <form> in the same document.
See MDN.
The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
formAction?: ButtonHTMLAttributes<HTMLButtonElement>["formAction"];Indicates how to encode the form data that is submitted.
formEncType?: string;Indicates the HTTP method used to submit the form.
formMethod?: string;Indicates that the form is not to be validated when it is submitted.
formNoValidate?: boolean;Overrides the target attribute of the button's form owner.
formTarget?: string;Submitted as a pair with the button's value as part of the form data.
name?: string;The value associated with the button's name when it's submitted with the form data.
value?: string;Whether the button is selected.
isSelected: boolean;Whether the button is disabled.
isDisabled: boolean;Whether the element should be selected (controlled).
isSelected?: boolean;Whether the element should be selected (uncontrolled).
defaultSelected?: boolean;Handler that is called when the element's selection state changes.
onChange?: (isSelected: boolean) => void;The orientation of the the toggle button group.
@default — 'horizontal'
Props for the toggle button group container.
groupProps: import("@react-types/shared").DOMAttributes;An identifier for the item in the selectedKeys of a ToggleButtonGroup.
The date that this cell represents.
date: CalendarDate;Whether the cell is disabled. By default, this is determined by the
Calendar's minValue, maxValue, and isDisabled props.
Whether the cell is outside of the current month.
isOutsideMonth?: boolean;Props for the button element within the cell.
buttonProps: import("@react-types/shared").DOMAttributes;Whether the cell is currently being pressed.
isPressed: boolean;Whether the cell is selected.
isSelected: boolean;Whether the cell is focused.
isFocused: boolean;Whether the cell is disabled, according to the calendar's minValue, maxValue, and
isDisabled props. Disabled dates are not focusable, and cannot be selected by the user. They
are typically displayed with a dimmed appearance.
Whether the cell is unavailable, according to the calendar's isDateUnavailable prop.
Unavailable dates remain focusable, but cannot be selected by the user. They should be
displayed with a visual affordance to indicate they are unavailable, such as a different color
or a strikethrough.
Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio, as defined by WCAG.
Whether the cell is outside the visible range of the calendar. For example, dates before the first day of a month in the same week.
isOutsideVisibleRange: boolean;Whether the cell is part of an invalid selection.
isInvalid: boolean;The day number formatted according to the current locale.
formattedDate: string;The first date displayed in the calendar grid. Defaults to the first visible date in the calendar. Override this to display multiple date grids in a calendar.
startDate?: CalendarDate;The last date displayed in the calendar grid. Defaults to the last visible date in the calendar. Override this to display multiple date grids in a calendar.
endDate?: CalendarDate;The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.
@default — 'narrow'
The day that starts the week.
firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";Props for the date grid element (e.g. <table>).
Props for the grid header element (e.g. <thead>).
A list of week day abbreviations formatted for the current locale, typically used in column headers.
weekDays: string[];The number of weeks in the month.
weeksInMonth: number;Controls the behavior when a pointer is released outside the calendar or a blur occurs mid selection:
clear: clear the currently selected range of dates.reset: reset the selection to the previously selected range of dates.select: select the currently hovered range of dates.@default — 'select'
Props for the error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;A description of the visible date range, for use in the calendar title.
title: string;The format of the month.
format?: "numeric" | "2-digit" | "long" | "short" | "narrow";The number of years to display.
@default — 20
The number of months from the start of the visible range to display.
@default — 0
Props for the checkbox group wrapper element.
groupProps: import("@react-types/shared").DOMAttributes;Props for the checkbox group's visible label (if any).
labelProps: import("@react-types/shared").DOMAttributes;Props for the checkbox group description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the checkbox group error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Identifies the element (or elements) whose contents or presence are controlled by the current element.
'aria-controls'?: string;Props for the label wrapper element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the checkbox description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributesWithRef<HTMLElement>;Props for the checkbox error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributesWithRef<HTMLElement>;Whether the checkbox is selected.
isSelected: boolean;Whether the checkbox is in a pressed state.
isPressed: boolean;Whether the checkbox is disabled.
isDisabled: boolean;Whether the checkbox is read only.
isReadOnly: boolean;Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
isIndeterminate?: boolean;A ref to the input that represents the x axis of the color area.
inputXRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;A ref to the input that represents the y axis of the color area.
inputYRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;A ref to the color area containing element.
containerRef: import("@react-types/shared").RefObject<Element | null>;The <form> element to associate the ColorArea with.
The value of this attribute must be the id of a <form> in the same document.
See MDN.
Props for the color area container element.
colorAreaProps: import("@react-types/shared").DOMAttributes;Props for the visually hidden horizontal range input element.
xInputProps: InputHTMLAttributes<HTMLInputElement>;Props for the visually hidden vertical range input element.
yInputProps: InputHTMLAttributes<HTMLInputElement>;Enables or disables changing the value with scroll.
isWheelDisabled?: boolean;Props for the label element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the text field's description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the text field's error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;A ref for the input element.
inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;Props for the visually hidden range input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the output element, displaying the value of the color slider.
outputProps: import("@react-types/shared").DOMAttributes;A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).
colorName?: string;Props for the color swatch element.
colorSwatchProps: HTMLAttributes<HTMLElement>;The outer radius of the color wheel.
outerRadius: number;The inner radius of the color wheel.
innerRadius: number;Props for the visually hidden range input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;The ref for the input element.
inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;The ref for the list box popover.
popoverRef: import("@react-types/shared").RefObject<Element | null>;The ref for the optional list box popup trigger button.
buttonRef?: import("@react-types/shared").RefObject<Element | null>;An optional keyboard delegate implementation, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling.
layoutDelegate?: import("@react-types/shared").LayoutDelegate;Whether keyboard navigation is circular.
shouldFocusWrap?: boolean;Props for the combo box input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the element representing the selected value.
valueProps: import("@react-types/shared").DOMAttributes;Props for the combo box description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the combo box error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoComplete?: string;A ref for the hidden input element for HTML form submission.
inputRef?: import("@react-types/shared").RefObject<HTMLInputElement | null>;A ref for the hidden input element for HTML form submission.
inputRef?: import("@react-types/shared").RefObject<HTMLInputElement | null>;Props for the field's visible label element, if any.
labelProps: import("@react-types/shared").DOMAttributes;Props for the hidden input element for HTML form submission.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoComplete?: string;Props for the date picker's visible label element, if any.
labelProps: import("@react-types/shared").DOMAttributes;Props for the grouping element containing the date field and button.
groupProps: import("@react-types/shared").GroupDOMAttributes;Props for the description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Props for the calendar within the popover dialog.
calendarProps: import("react-stately").CalendarProps<import("react-stately").DateValue>;Props for the date range picker's visible label element, if any.
labelProps: import("@react-types/shared").DOMAttributes;Props for the grouping element containing the date fields and button.
groupProps: import("@react-types/shared").GroupDOMAttributes;Props for the start date field.
startFieldProps: AriaDatePickerProps<import("react-stately").DateValue>;Props for the description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Props for the range calendar within the popover dialog.
calendarProps: import("react-stately").RangeCalendarProps<import("react-stately").DateValue>;Props for the segment element.
segmentProps: HTMLAttributes<HTMLDivElement>;The accessibility role for the dialog.
@default — 'dialog'
Props for the disclosure panel.
panelProps: HTMLAttributes<HTMLElement>;Whether the disclosure is disabled.
isDisabled?: boolean;Handler that is called when the disclosure's expanded state changes.
onExpandedChange?: (isExpanded: boolean) => void;Whether the disclosure is expanded (controlled).
isExpanded?: boolean;Whether the disclosure is expanded by default (uncontrolled).
defaultExpanded?: boolean;Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false).
@default — 'false'
Whether the element is a text input.
isTextInput?: boolean;Whether the element will be auto focused.
autoFocus?: boolean;Whether the element is currently focused.
isFocused: boolean;Whether keyboard focus should be visible.
isFocusVisible: boolean;Props to apply to the container element with the focus ring.
focusProps: import("@react-types/shared").DOMAttributes;Whether focus should be disabled.
isDisabled?: boolean;Moves focus to the next focusable or tabbable element in the focus scope.
focusNext(opts?: FocusManagerOptions): import("@react-types/shared").FocusableElement | null;Moves focus to the previous focusable or tabbable element in the focus scope.
focusPrevious(opts?: FocusManagerOptions): import("@react-types/shared").FocusableElement | null;Moves focus to the first focusable or tabbable element in the focus scope.
focusFirst(opts?: FocusManagerOptions): import("@react-types/shared").FocusableElement | null;Moves focus to the last focusable or tabbable element in the focus scope.
focusLast(opts?: FocusManagerOptions): import("@react-types/shared").FocusableElement | null;The element to start searching from. The currently focused element by default.
from?: Element;Whether to only include tabbable elements, or all focusable elements.
tabbable?: boolean;Whether focus should wrap around when it reaches the end of the scope.
wrap?: boolean;A callback that determines whether the given element is focused.
accept?: (node: Element) => boolean;The contents of the focus scope.
children: ReactNode;Whether to contain focus inside the scope, so users cannot move focus outside, for example in a modal dialog.
contain?: boolean;Whether to restore focus back to the element that was focused when the focus scope mounted, after the focus scope unmounts.
restoreFocus?: boolean;Whether to auto focus the first focusable element in the focus scope on mount.
autoFocus?: boolean;Child element to apply CSS classes to.
children: ReactElement;CSS class to apply when the element is focused.
focusClass?: string;CSS class to apply when the element has keyboard focus.
focusRingClass?: string;Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false).
@default — false
Whether the element is a text input.
isTextInput?: boolean;Whether the element will be auto focused.
autoFocus?: boolean;Returns whether a string starts with a given substring.
startsWith: (string: string, substring: string) => boolean;Returns whether a string ends with a given substring.
endsWith: (string: string, substring: string) => boolean;Returns whether a string contains a given substring.
contains: (string: string, substring: string) => boolean;Contents that should have the locale applied.
children: ReactNode;The locale to apply to the children.
locale?: string;A function that returns the items to copy.
getItems?: (details: {Handler that is called when the user triggers a copy interaction.
onCopy?: () => void;Handler that is called when the user triggers a cut interaction.
onCut?: () => void;Handler that is called when the user triggers a paste interaction.
onPaste?: (items: import("@react-types/shared").DropItem[]) => void;Whether the clipboard is disabled.
isDisabled?: boolean;Props for the element that will handle clipboard events.
clipboardProps: import("@react-types/shared").DOMAttributes;Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode. If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
hasDragButton?: boolean;Whether the item has a primary action (e.g. Enter key or long press) that would conflict with initiating accessible drag and drop. If true, the Alt key must be held to start dragging with a keyboard, and long press is disabled until selection mode is entered. This should be passed from the associated collection item hook (e.g. useOption, useGridListItem, etc.).
hasAction?: boolean;Props for the draggable item.
dragProps: HTMLAttributes<HTMLElement>;Handler that is called when a drag operation is started.
onDragStart?: (e: import("@react-types/shared").DragStartEvent) => void;Handler that is called when the drag is moved.
onDragMove?: (e: import("@react-types/shared").DragMoveEvent) => void;Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.
onDragEnd?: (e: import("@react-types/shared").DragEndEvent) => void;A function that returns the items being dragged.
getItems: () => import("@react-types/shared").DragItem[];The ref of the element that will be rendered as the drag preview while dragging.
preview?: import("@react-types/shared").RefObject<import("@react-types/shared").DragPreviewRenderer | null>;Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.
getAllowedDropOperations?: () => import("@react-types/shared").DropOperation[];Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode. If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
hasDragButton?: boolean;Whether the drag operation is disabled. If true, the element will not be draggable.
isDisabled?: boolean;Props for the draggable element.
dragProps: HTMLAttributes<HTMLElement>;Whether the element is currently being dragged.
isDragging: boolean;A render function which returns a preview element, or an object containing the element
and a custom offset. If an object is returned, the provided x and y values will be
used as the drag preview offset instead of the default calculation.
Props for the drop indicator element.
dropIndicatorProps: HTMLAttributes<HTMLElement>;Whether the drop indicator is currently the active drop target.
isDropTarget: boolean;Whether the drop indicator is hidden, both visually and from assistive technology. Use this to determine whether to omit the element from the DOM entirely.
isHidden: boolean;The drop target that the drop indicator represents.
target: import("@react-types/shared").DropTarget;The ref to the activate button.
activateButtonRef?: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>;A ref for the droppable element.
ref: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>;A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
getDropOperation?: (types: import("@react-types/shared").DragTypes, allowedOperations: import("@react-types/shared").DropOperation[]) => import("@react-types/shared").DropOperation;A function that returns the drop operation for a specific point within the target.
getDropOperationForPoint?: (types: import("@react-types/shared").DragTypes, allowedOperations: import("@react-types/shared").DropOperation[], x: number, y: number) => import("@react-types/shared").DropOperation;Handler that is called when a valid drag enters the drop target.
onDropEnter?: (e: import("@react-types/shared").DropEnterEvent) => void;Handler that is called when a valid drag is moved within the drop target.
onDropMove?: (e: import("@react-types/shared").DropMoveEvent) => void;Handler that is called after a valid drag is held over the drop target for a period of time. This typically opens the item so that the user can drop within it.
onDropActivate?: (e: import("@react-types/shared").DropActivateEvent) => void;Handler that is called when a valid drag exits the drop target.
onDropExit?: (e: import("@react-types/shared").DropExitEvent) => void;Handler that is called when a valid drag is dropped on the drop target.
onDrop?: (e: import("@react-types/shared").DropEvent) => void;Whether the item has an explicit focusable drop affordance to initiate accessible drag and drop mode. If true, the dropProps will omit these event handlers, and they will be applied to dropButtonProps instead.
hasDropButton?: boolean;Whether the drop target is disabled. If true, the drop target will not accept any drops.
isDisabled?: boolean;Whether the drop target is currently focused or hovered.
isDropTarget: boolean;A delegate object that implements behavior for keyboard focus movement.
keyboardDelegate: import("@react-types/shared").KeyboardDelegate;A delegate object that provides drop targets for pointer coordinates within the collection.
dropTargetDelegate: import("@react-types/shared").DropTargetDelegate;A custom keyboard event handler for drop targets.
onKeyDown?: (e: KeyboardEvent) => void;Props for the collection element.
collectionProps: HTMLAttributes<HTMLElement>;The ref to the activate button.
activateButtonRef?: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>;Props for the droppable element.
dropProps: HTMLAttributes<HTMLElement>;Whether the item is currently the active drop target.
isDropTarget: boolean;Whether the focus events should be disabled.
isDisabled?: boolean;Props to spread onto the target element.
focusProps: import("@react-types/shared").DOMAttributes<Target>;Whether the element is a text input.
isTextInput?: boolean;Whether the element will be auto focused.
autoFocus?: boolean;Whether keyboard focus is visible globally.
isFocusVisible: boolean;Whether the focus within events should be disabled.
isDisabled?: boolean;Handler that is called when the target element or a descendant receives focus.
onFocusWithin?: (e: FocusEvent) => void;Handler that is called when the target element and all descendants lose focus.
onBlurWithin?: (e: FocusEvent) => void;Handler that is called when the the focus within state changes.
onFocusWithinChange?: (isFocusWithin: boolean) => void;Props to spread onto the target element.
focusWithinProps: import("@react-types/shared").DOMAttributes;Whether the hover events should be disabled.
isDisabled?: boolean;Whether the interact outside events should be disabled.
isDisabled?: boolean;Whether the keyboard events should be disabled.
isDisabled?: boolean;Whether long press events should be disabled.
isDisabled?: boolean;Handler that is called when a long press interaction starts.
onLongPressStart?: (e: import("@react-types/shared").LongPressEvent) => void;Handler that is called when a long press interaction ends, either over the target or when the pointer leaves the target.
onLongPressEnd?: (e: import("@react-types/shared").LongPressEvent) => void;Handler that is called when the threshold time is met while the press is over the target.
onLongPress?: (e: import("@react-types/shared").LongPressEvent) => void;The amount of time in milliseconds to wait before triggering a long press.
@default — 500ms
A description for assistive techology users indicating that a long press action is available, e.g. "Long press to open menu".
accessibilityDescription?: string;Whether the target is in a controlled press state (e.g. an overlay it triggers is open).
isPressed?: boolean;Whether the press events should be disabled.
isDisabled?: boolean;Whether the target should not receive focus on press.
preventFocusOnPress?: boolean;Whether press events should be canceled when the pointer leaves the target while pressed.
By default, this is false, which means if the pointer returns back over the target while
still pressed, onPressStart will be fired again. If set to true, the press is canceled
when the pointer leaves the target and onPressStart will not be fired if the pointer returns.
Whether text selection should be enabled on the pressable element.
allowTextSelectionOnPress?: boolean;Whether the target is currently pressed.
isPressed: boolean;Whether the scroll listener should be disabled.
isDisabled?: boolean;Props for the description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Props to apply to the label container element.
labelProps: import("@react-types/shared").DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>;Props to apply to the field container element being labeled.
fieldProps: import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").DOMProps;The HTML element used to render the label, e.g. 'label', or 'span'.
@default — 'label'
A LandmarkController allows programmatic navigation of landmarks.
export interface LandmarkController {Moves focus to the main landmark.
focusMain(): boolean;Moves focus either forward or backward in the landmark sequence.
navigate(direction: "forward" | "backward", opts?: LandmarkControllerOptions): boolean;Disposes the landmark controller. When no landmarks are registered, and no controllers are active, the landmark keyboard listeners are removed from the page.
dispose(): void;The element from which to start navigating.
@default — document.activeElement
Whether the link is disabled.
isDisabled?: boolean;The HTML element used to render the link, e.g. 'a', or 'span'.
@default — 'a'
Whether the link is currently pressed.
isPressed: boolean;Whether the listbox uses virtual scrolling.
isVirtualized?: boolean;An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling.
layoutDelegate?: import("@react-types/shared").LayoutDelegate;Whether the listbox items should use virtual focus instead of being focused directly.
shouldUseVirtualFocus?: boolean;The behavior of links in the collection.
@default — 'override'
The primary orientation of the items. Usually this is the direction that the collection scrolls.
@default — 'vertical'
An optional visual label for the listbox.
label?: ReactNode;How multiple selection should behave in the collection.
selectionBehavior?: import("@react-types/shared").SelectionBehavior;Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Whether options should be focused when the user hovers over them.
shouldFocusOnHover?: boolean;Handler that is called when a user performs an action on an item. The exact user event depends
on the collection's selectionBehavior prop and the interaction modality.
Props for the listbox's visual label element (if any).
labelProps: import("@react-types/shared").DOMAttributes;Whether to auto focus the listbox or an option.
autoFocus?: boolean | import("@react-types/shared").FocusStrategy;Whether focus should wrap around when the end/start is reached.
shouldFocusWrap?: boolean;Whether pressing the escape key should clear selection in the listbox 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.
@default — 'clearSelection'
The heading for the section.
heading?: ReactNode;An accessibility label for the section. Required if heading is not present.
Whether the option is disabled.
@deprecated —
Whether the option is selected.
@deprecated —
A screen reader only label for the option.
'aria-label'?: string;Whether selection should occur on press up instead of press down.
@deprecated —
Whether the option should be focused when the user hovers over it.
@deprecated —
Whether the option is contained in a virtual scrolling listbox.
@deprecated —
Whether the option should use virtual focus instead of being focused directly.
@deprecated —
Props for the main text element inside the option.
labelProps: import("@react-types/shared").DOMAttributes;Props for the description text element inside the option, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Whether the option is currently focused.
isFocused: boolean;Whether the option is keyboard focused.
isFocusVisible: boolean;Whether the item is currently in a pressed state.
isPressed: boolean;Whether the item is currently selected.
isSelected: boolean;Whether the item is currently focused.
isFocused: boolean;Whether the item is non-interactive, i.e. both selection and actions are disabled and the item
may not be focused. Dependent on disabledKeys and disabledBehavior.
Whether the item may be selected, dependent on selectionMode, disabledKeys, and
disabledBehavior.
Whether the item has an action, dependent on onAction, disabledKeys,
and disabledBehavior. It may also change depending on the current selection state
of the list (e.g. when selection is primary). This can be used to enable or disable hover
styles or other visual indications of interactivity.
Whether the list uses virtual scrolling.
isVirtualized?: boolean;Whether typeahead navigation is disabled.
@default — false
An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling.
layoutDelegate?: import("@react-types/shared").LayoutDelegate;Whether focus should wrap around when the end/start is reached.
@default — false
The behavior of links in the collection.
@default — 'action'
Which item in the collection to focus when tabbing into the collection. Overrides default roving tab index like behavior.
@private —
Whether to auto focus the gridlist or an option.
autoFocus?: boolean | import("@react-types/shared").FocusStrategy;Handler that is called when a user performs an action on an item. The exact user event depends
on the collection's selectionBehavior prop and the interaction modality.
Whether disabledKeys applies to all interactions, or only selection.
@default — 'all'
Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Whether keyboard navigation to focusable elements within grid list items is via the left/right arrow keys or the tab key.
@default — 'arrow'
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.
@default — 'clearSelection'
An object representing the list item. Contains all the relevant information that makes up the list row.
node: import("@react-types/shared").Node<unknown>;Whether the list row is contained in a virtual scroller.
isVirtualized?: boolean;Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Whether this item has children, even if not loaded yet.
hasChildItems?: boolean;Props for the grid cell element within the list row.
gridCellProps: import("@react-types/shared").DOMAttributes;Props for the list item description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;An accessibility label for the section. Required if heading is not present.
Whether pressing the escape key should clear selection in the menu 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.
@default — 'clearSelection'
Whether the menu uses virtual scrolling.
isVirtualized?: boolean;An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;Whether the menu items should use virtual focus instead of being focused directly.
shouldUseVirtualFocus?: boolean;Whether keyboard navigation is circular.
shouldFocusWrap?: boolean;Handler that is called when an item is selected.
onAction?: (key: import("@react-types/shared").Key, value: T) => void;Handler that is called when the menu should close after selecting an item.
onClose?: () => void;Whether the menu item is disabled.
@deprecated — - pass disabledKeys to useTreeState instead.
Whether the menu item is selected.
@deprecated — - pass selectedKeys to useTreeState instead.
A screen reader only label for the menu item.
'aria-label'?: string;Handler that is called when the menu should close after selecting an item.
@deprecated — - pass to the menu instead.
Whether the menu should close when the menu item is selected.
@deprecated — - use shouldCloseOnSelect instead.
Whether the menu should close when the menu item is selected.
shouldCloseOnSelect?: boolean;Whether the menu item is contained in a virtual scrolling menu.
isVirtualized?: boolean;Handler that is called when the user activates the item.
@deprecated — - pass to the menu instead.
What kind of popup the item opens.
'aria-haspopup'?: "menu" | "dialog";Indicates whether the menu item's popup element is expanded or collapsed.
'aria-expanded'?: boolean | "true" | "false";Identifies the menu item's popup element whose contents or presence is controlled by the menu item.
'aria-controls'?: string;Identifies the element(s) that describe the menu item.
'aria-describedby'?: string;Override of the selection manager. By default, state.selectionManager is used.
Props for the main text element inside the menu item.
labelProps: import("@react-types/shared").DOMAttributes;Props for the description text element inside the menu item, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the keyboard shortcut text element inside the item, if any.
keyboardShortcutProps: import("@react-types/shared").DOMAttributes;Whether the item is currently focused.
isFocused: boolean;Whether the item is keyboard focused.
isFocusVisible: boolean;Whether the item is currently selected.
isSelected: boolean;Whether the item is currently in a pressed state.
isPressed: boolean;Whether the item is disabled.
isDisabled: boolean;The heading for the section.
heading?: ReactNode;An accessibility label for the section. Required if heading is not present.
The type of menu that the menu trigger opens.
type?: "menu" | "listbox";Whether menu trigger is disabled.
isDisabled?: boolean;Props for the submenu's popover container.
popoverProps: Pick<AriaPopoverProps, "isNonModal" | "shouldCloseOnInteractOutside"> & Pick<OverlayProps, "disableFocusManagement">;Whether the submenu trigger is in an expanded state.
isOpen: boolean;The level of the submenu.
submenuLevel: number;An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.
@deprecated —
Whether the submenu trigger is disabled.
isDisabled?: boolean;The type of the contents that the submenu trigger opens.
type?: "dialog" | "menu";Ref of the menu that contains the submenu trigger.
parentMenuRef: import("@react-types/shared").RefObject<HTMLElement | null>;Ref of the submenu opened by the submenu trigger.
submenuRef: import("@react-types/shared").RefObject<HTMLElement | null>;The delay time in milliseconds for the submenu to appear after hovering over the trigger.
@default — 200
Whether the submenu trigger uses virtual focus.
shouldUseVirtualFocus?: boolean;Props for the meter's visual label (if any).
labelProps: import("@react-types/shared").DOMAttributes;A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
decrementAriaLabel?: string;A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
incrementAriaLabel?: string;Enables or disables changing the value with scroll.
isWheelDisabled?: boolean;Props for the label element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the group wrapper around the input and stepper buttons.
groupProps: import("@react-types/shared").GroupDOMAttributes;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the number field's description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the number field's error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Data attribute marks the dom node as a modal for the aria-modal-polyfill.
'data-ismodal': boolean;Props to be spread on the container element.
modalProviderProps: AriaAttributes;The container element in which the overlay portal will be placed.
@deprecated — - Use a parent UNSAFE_PortalProvider to set your portal container instead.
@default — document.body
Whether to close the modal when the user interacts outside it.
@default — false
Whether pressing the escape key to close the modal should be disabled.
@default — false
Whether the overlay is currently open.
isOpen?: boolean;Handler that is called when the overlay should close.
onClose?: () => void;Whether to close the overlay when the user interacts outside it.
@default — false
Whether the overlay should close when focus is lost or moves outside it.
shouldCloseOnBlur?: boolean;Whether pressing the escape key to close the overlay should be disabled.
@default — false
When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
shouldCloseOnInteractOutside?: (element: Element) => boolean;Props to apply to the overlay container element.
overlayProps: import("@react-types/shared").DOMAttributes;Props to apply to the underlay element, if any.
underlayProps: import("@react-types/shared").DOMAttributes;The ref for the element which the popover positions itself with respect to.
triggerRef: import("@react-types/shared").RefObject<Element | null>;The ref for the popover element.
popoverRef: import("@react-types/shared").RefObject<Element | null>;A ref for the popover arrow element.
arrowRef?: import("@react-types/shared").RefObject<Element | null>;An optional ref for a group of popovers, e.g. submenus. When provided, this element is used to detect outside interactions and hiding elements from assistive technologies instead of the popoverRef.
groupRef?: import("@react-types/shared").RefObject<Element | null>;Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
Whether pressing the escape key to close the popover should be disabled.
Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
@default — false
When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.
shouldCloseOnInteractOutside?: (element: Element) => boolean;Props to apply to the underlay element, if any.
underlayProps: import("@react-types/shared").DOMAttributes;The origin of the target in the overlay's coordinate system. Useful for animations.
triggerAnchorPoint: {Cross size of the overlay arrow in pixels.
@default — 0
Element that that serves as the positioning boundary.
@default — document.body
The ref for the element which the overlay positions itself with respect to.
targetRef: import("@react-types/shared").RefObject<Element | null>;The ref for the overlay element.
overlayRef: import("@react-types/shared").RefObject<Element | null>;A ref for the scrollable region within the overlay.
@default — overlayRef
Whether the overlay should update its position automatically.
@default — true
Handler that is called when the overlay should close.
onClose?: (() => void) | null;The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
maxHeight?: number;The minimum distance the arrow's edge should be from the edge of the overlay element.
@default — 0
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection.
@default — target.getBoundingClientRect()
@param — - The target element.
The origin of the target in the overlay's coordinate system. Useful for animations.
triggerAnchorPoint: {Updates the position of the overlay.
updatePosition(): void;The placement of the element with respect to its anchor element.
@default — 'bottom'
The placement padding that should be applied between the element and its surrounding container.
@default — 12
The additional offset applied along the main axis between the element and its anchor element.
@default — 0
The additional offset applied along the cross axis between the element and its anchor element.
@default — 0
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
@default — true
Whether the element is rendered.
isOpen?: boolean;Called when the dismiss button is activated.
onDismiss?: () => void;The container element in which the overlay portal will be placed.
@default — document.body
The overlay to render in the portal.
children: ReactNode;Disables default focus management for the overlay, including containment and restoration. This option should be used very carefully. When focus management is disabled, you must implement focus containment and restoration to ensure the overlay is keyboard accessible.
disableFocusManagement?: boolean;Whether to contain focus within the overlay.
shouldContainFocus?: boolean;Whether the overlay is currently performing an exit animation. When true, focus is allowed to move outside.
isExiting?: boolean;Type of overlay that is opened by the trigger.
type: "dialog" | "menu" | "listbox" | "tree" | "grid";Should return the element where we should portal to. Can clear the context by passing null.
getContainer?: (() => HTMLElement | null) | null;The content of the PortalProvider. Should contain all children that want to portal their
overlays to the element returned by the provided getContainer().
Props for the progress bar container element.
progressBarProps: import("@react-types/shared").DOMAttributes;Props for the progress bar's visual label element (if any).
labelProps: import("@react-types/shared").DOMAttributes;Whether presentation is indeterminate when progress isn't known.
isIndeterminate?: boolean;The current value (controlled).
@default — 0
The smallest value allowed for the input.
@default — 0
The largest value allowed for the input.
@default — 100
The content to display as the label.
label?: ReactNode;The display format of the value label.
@default — { style: 'percent' }
The content to display as the value's label (e.g. 1 of 4).
valueLabel?: ReactNode;Props for the radio group wrapper element.
radioGroupProps: import("@react-types/shared").DOMAttributes;Props for the radio group's visible label (if any).
labelProps: import("@react-types/shared").DOMAttributes;Props for the radio group description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the radio group error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Props for the label wrapper element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the checkbox description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributesWithRef<HTMLElement>;Whether the radio is disabled.
isDisabled: boolean;Whether the radio is currently selected.
isSelected: boolean;Whether the radio is in a pressed state.
isPressed: boolean;The label for the Radio. Accepts any renderable node.
children?: ReactNode;Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
isDisabled?: boolean;An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";The type of input to render. See MDN.
@default — 'search'
Props for the text field's visible label element (if any).
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the searchfield's description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the searchfield's error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoComplete?: string;The text label for the select.
label?: ReactNode;HTML form input name.
name?: string;The <form> element to associate the input with.
The value of this attribute must be the id of a <form> in the same document.
See MDN.
Sets the disabled state of the select and input.
isDisabled?: boolean;A ref to the hidden <select> element.
Props for the container element.
containerProps: HTMLAttributes<import("@react-types/shared").FocusableElement>;Props for the hidden input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the hidden select element.
selectProps: SelectHTMLAttributes<HTMLSelectElement>;A ref to the trigger element.
triggerRef: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>;Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoComplete?: string;The name of the input, used when submitting an HTML form.
name?: string;The <form> element to associate the input with.
The value of this attribute must be the id of a <form> in the same document.
See MDN.
An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;Props for the element representing the selected value.
valueProps: import("@react-types/shared").DOMAttributes;Props for the select's description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the select's error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;The orientation of the separator.
@default — 'horizontal'
The HTML element type that will be used to render the separator.
elementType?: string;Your application here.
children: ReactNode;Props for the label element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the root element of the slider component; groups slider inputs.
groupProps: import("@react-types/shared").DOMAttributes;Props for the output element, displaying the value of the slider thumbs.
outputProps: OutputHTMLAttributes<HTMLOutputElement>;A ref to the thumb input element.
inputRef: import("@react-types/shared").RefObject<HTMLInputElement | null>;Props for the root thumb element; handles the dragging motion.
thumbProps: import("@react-types/shared").DOMAttributes;Props for the visually hidden range input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the label element for this thumb (optional).
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Whether this thumb is currently being dragged.
isDragging: boolean;Whether the thumb is currently focused.
isFocused: boolean;Whether the thumb is disabled.
isDisabled: boolean;The orientation of the Slider.
@deprecated — - pass to the slider instead.
@default — 'horizontal'
Whether the Thumb is disabled.
isDisabled?: boolean;Index of the thumb within the slider.
@default — 0
@deprecated —
isRequired?: boolean;@deprecated —
isInvalid?: boolean;Identifies the element (or elements) whose contents or presence are controlled by the current element.
'aria-controls'?: string;Props for the label wrapper element.
labelProps: LabelHTMLAttributes<HTMLLabelElement>;Props for the input element.
inputProps: InputHTMLAttributes<HTMLInputElement>;Props for the switch description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributesWithRef<HTMLElement>;Props for the switch error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributesWithRef<HTMLElement>;Whether the switch is selected.
isSelected: boolean;Whether the switch is in a pressed state.
isPressed: boolean;Whether the switch is disabled.
isDisabled: boolean;Whether the switch is read only.
isReadOnly: boolean;An object representing the table cell. Contains all the relevant information that makes up the row header.
node: import("react-stately").GridNode<unknown>;Whether the cell is contained in a virtual scroller.
isVirtualized?: boolean;Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Handler that is called when a user performs an action on the cell. Please use onCellAction at the collection level instead.
@deprecated —
Whether the cell is currently in a pressed state.
isPressed: boolean;An object representing the column header. Contains all the relevant information that makes up the column header.
node: import("react-stately").GridNode<T>;Whether the column is currently in a pressed state.
isPressed: boolean;An object representing the column header. Contains all the relevant information that makes up the column header.
column: import("react-stately").GridNode<T>;Aria label for the hidden input. Gets read when resizing.
'aria-label': string;Ref to the trigger if resizing was started from a column header menu. If it's provided, focus will be returned there when resizing is done. If it isn't provided, it is assumed that the resizer is visible at all time and keyboard resizing is started via pressing Enter on the resizer and not on focus.
triggerRef?: import("@react-types/shared").RefObject<import("@react-types/shared").FocusableElement | null>;If resizing is disabled.
isDisabled?: boolean;Called when resizing starts.
onResizeStart?: (widths: Map<import("@react-types/shared").Key, import("react-stately").ColumnSize>) => void;Called for every resize event that results in new column sizes.
onResize?: (widths: Map<import("@react-types/shared").Key, import("react-stately").ColumnSize>) => void;Called when resizing ends.
onResizeEnd?: (widths: Map<import("@react-types/shared").Key, import("react-stately").ColumnSize>) => void;Props for the visually hidden input element.
inputProps: import("@react-types/shared").DOMAttributes;Whether this column is currently being resized.
isResizing: boolean;The layout object for the table. Computes what content is visible and how to position and style them.
layoutDelegate?: import("@react-types/shared").LayoutDelegate;Whether the grid uses virtual scrolling.
isVirtualized?: boolean;Whether typeahead navigation is disabled.
@default — false
An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;Whether initial grid focus should be placed on the grid row or grid cell.
@default — 'row'
A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
@default — (key) => state.collection.getItem(key)?.textValue
The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized grids.
scrollRef?: import("@react-types/shared").RefObject<HTMLElement | null>;Handler that is called when a user performs an action on the row.
onRowAction?: (key: import("@react-types/shared").Key) => void;Handler that is called when a user performs an action on the cell.
onCellAction?: (key: import("@react-types/shared").Key) => void;Whether pressing the escape key should clear selection in the grid 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.
@default — 'clearSelection'
Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Whether the row is currently in a pressed state.
isPressed: boolean;An object representing the grid row. Contains all the relevant information that makes up the grid row.
node: import("react-stately").GridNode<T>;Whether the grid row is contained in a virtual scroller.
isVirtualized?: boolean;Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Handler that is called when a user performs an action on the row. Please use onCellAction at the collection level instead.
@deprecated —
Whether tabs are activated automatically on focus or manually.
@default — 'automatic'
The orientation of the tabs.
@default — 'horizontal'
Whether the tab should be disabled.
isDisabled?: boolean;Whether the tab selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Whether the tab is currently selected.
isSelected: boolean;Whether the tab is disabled.
isDisabled: boolean;Whether the tab is currently in a pressed state.
isPressed: boolean;How multiple selection should behave in the collection.
@default — 'toggle'
Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;Handler that is called when a user deletes a tag.
onRemove?: (keys: Set<import("@react-types/shared").Key>) => void;An error message for the field.
errorMessage?: ReactNode;Whether pressing the escape key should clear selection in the TagGroup 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.
@default — 'clearSelection'
An optional keyboard delegate to handle arrow key navigation, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;Props for the tag group's visible label (if any).
labelProps: import("@react-types/shared").DOMAttributes;Props for the tag group description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the tag group error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;An object representing the tag. Contains all the relevant information that makes up the tag.
item: import("@react-types/shared").Node<T>;Whether the tag can be removed.
allowsRemoving: boolean;The HTML element used to render the input, e.g. 'input', or 'textarea'. It determines whether
certain HTML attributes will be included in inputProps. For example,
type.
@default — 'input'
Controls whether inputted text is automatically capitalized and, if so, in what manner. See MDN.
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";The HTML element interfaces that useTextField supports based on what is
defined for TextFieldIntrinsicElements; e.g. HTMLInputElement,
HTMLTextAreaElement.
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
'aria-activedescendant'?: string;Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
'aria-autocomplete'?: "none" | "inline" | "list" | "both";Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";Identifies the element (or elements) whose contents or presence are controlled by the current element.
'aria-controls'?: string;An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";Props for the text field's visible label element, if any.
labelProps: import("@react-types/shared").DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>;Props for the text field's description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;Props for the text field's error message element, if any.
errorMessageProps: import("@react-types/shared").DOMAttributes;The type of inputProps returned by useTextField; e.g. InputHTMLAttributes,
TextareaHTMLAttributes.
The HTML attributes interfaces that useTextField supports based on what
is defined for TextFieldIntrinsicElements; e.g. InputHTMLAttributes,
TextareaHTMLAttributes.
An accessibility label for the toast region.
@default — 'Notifications'
Props for the toast container, non-modal dialog element.
toastProps: import("@react-types/shared").DOMAttributes;Props for the toast content alert message.
contentProps: import("@react-types/shared").DOMAttributes;Props for the toast description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;The orientation of the entire toolbar.
@default — 'horizontal'
Props for the toolbar container.
toolbarProps: HTMLAttributes<HTMLElement>;An optional keyboard delegate implementation for type to select, to override the default.
keyboardDelegate?: import("@react-types/shared").KeyboardDelegate;An object representing the treegrid item. Contains all the relevant information that makes up the treegrid row.
node: import("@react-types/shared").Node<unknown>;Props for the tree grid cell element within the tree grid list row.
gridCellProps: import("@react-types/shared").DOMAttributes;Props for the tree grid row description element, if any.
descriptionProps: import("@react-types/shared").DOMAttributes;The content to visually hide.
children?: ReactNode;The element type for the container.
@default — 'div'
Whether the element should become visible on focus, for example skip links.
isFocusable?: boolean;