@react-types/shared

property 'aria-describedby'

'aria-describedby'?: string;

• Identifies the element (or elements) that describes the object.

property 'aria-details'

'aria-details'?: string;

• Identifies the element (or elements) that provide a detailed, extended description for the object.

property 'aria-label'

'aria-label'?: string;

• Defines a string value that labels the current element.

property 'aria-labelledby'

'aria-labelledby'?: string;

• Identifies the element (or elements) that labels the current element.

property 'aria-errormessage'

'aria-errormessage'?: string;

• Identifies the element that provides an error message for the object.

property isLoading

isLoading?: boolean;

• Whether the items are currently loading.

property onLoadMore

onLoadMore?: () => any;

• Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

property altKey

altKey: boolean;

• Whether the alt keyboard modifier was held during the move event.

property ctrlKey

ctrlKey: boolean;

• Whether the ctrl keyboard modifier was held during the move event.

property metaKey

metaKey: boolean;

• Whether the meta keyboard modifier was held during the move event.

property pointerType

pointerType: PointerType;

• The pointer type that triggered the move event.

property shiftKey

shiftKey: boolean;

• Whether the shift keyboard modifier was held during the move event.

property alignContent

alignContent?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).

property alignItems

alignItems?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'stretch'
    | 'self-start'
    | 'self-end'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).

property columnGap

columnGap?: Responsive<DimensionValue>;

• The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).

property gap

gap?: Responsive<DimensionValue>;

• The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).

property justifyContent

justifyContent?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'left'
    | 'right'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).

property rowGap

rowGap?: Responsive<DimensionValue>;

• The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).

property size

readonly size: number;

• The number of items in the collection.

method at

at: (idx: number) => T | null;

• Get an item by the index of its key.

method filter

filter: (filterFn: (nodeValue: string, node: T) => boolean) => Collection<T>;

• Filters the collection using the given function.

method getChildren

getChildren: (key: Key) => Iterable<T>;

• Iterate over the child items of the given key.

method getFirstKey

getFirstKey: () => Key | null;

• Get the first key in the collection.

method getItem

getItem: (key: Key) => T | null;

• Get an item by its key.

method getKeyAfter

getKeyAfter: (key: Key) => Key | null;

• Get the key that comes after the given key in the collection.

method getKeyBefore

getKeyBefore: (key: Key) => Key | null;

• Get the key that comes before the given key in the collection.

method getKeys

getKeys: () => Iterable<Key>;

• Iterate over all keys in the collection.

method getLastKey

getLastKey: () => Key | null;

• Get the last key in the collection.

method getTextValue

getTextValue: (key: Key) => string;

• Returns a string representation of the item's contents.

property children

children: CollectionChildren<T>;

• The contents of the collection.

property disabledKeys

disabledKeys?: Iterable<Key>;

• The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

property items

items?: Iterable<T>;

• Item objects in the collection.

property collection

collection?: C;

• A pre-constructed collection to use instead of building one from items and children.

property kind

kind: 'directory';

• The item kind.

property name

name: string;

• The directory name.

method getEntries

getEntries: () => AsyncIterable<FileDropItem | DirectoryDropItem>;

• Returns the entries contained within the directory.

property className

className?: string | undefined;

property id

id?: string | undefined;

property role

role?: AriaRole | undefined;

property style

style?: CSSProperties | undefined;

property tabIndex

tabIndex?: number | undefined;

property id

id?: string;

• The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

method UNSAFE_getDOMNode

UNSAFE_getDOMNode: () => T | null;

property x

x: number;

• The x coordinate of the event, relative to the target element.

property y

y: number;

• The y coordinate of the event, relative to the target element.

property dropOperation

dropOperation: DropOperation;

• The drop operation that occurred.

property type

type: 'dragend';

• The event type.

property isInternal

isInternal: boolean;

• Whether the drop ended within the same collection as it originated.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

property getAllowedDropOperations

getAllowedDropOperations?: () => DropOperation[];

• Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

property getItems

getItems: (keys: Set<Key>, items: T[]) => DragItem[];

• A function that returns the items being dragged.

property onDragEnd

onDragEnd?: (e: DraggableCollectionEndEvent) => void;

• Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.

property onDragMove

onDragMove?: (e: DraggableCollectionMoveEvent) => void;

• Handler that is called when the drag is moved.

property onDragStart

onDragStart?: (e: DraggableCollectionStartEvent) => void;

• Handler that is called when a drag operation is started.

property preview

preview?: RefObject<DragPreviewRenderer | null>;

• The ref of the element that will be rendered as the drag preview while dragging.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

index signature

[type: string]: string;

property type

type: 'dragmove';

• The event type.

property type

type: 'dragstart';

• The event type.

method has

has: (type: string | symbol) => boolean;

• Returns whether the drag contains data of the given type.

property type

type: 'dropactivate';

• The event type.

property type

type: 'dropenter';

• The event type.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property type

type: 'drop';

• The event type.

property type

type: 'dropexit';

• The event type.

property type

type: 'dropmove';

• The event type.

property target

target: DropTarget;

• The drop target.

property getDropOperation

getDropOperation?: (
    target: DropTarget,
    types: DragTypes,
    allowedOperations: DropOperation[]
) => DropOperation;

• A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.

property onDrop

onDrop?: (e: DroppableCollectionDropEvent) => void;

• Handler that is called when a valid drag is dropped on a drop target. When defined, this overrides other drop handlers such as onInsert, and onItemDrop.

property onDropActivate

onDropActivate?: (e: DroppableCollectionActivateEvent) => void;

• Handler that is called after a valid drag is held over a drop target for a period of time.

property onDropEnter

onDropEnter?: (e: DroppableCollectionEnterEvent) => void;

• Handler that is called when a valid drag enters a drop target.

property onDropExit

onDropExit?: (e: DroppableCollectionExitEvent) => void;

• Handler that is called when a valid drag exits a drop target.

property target

target: DropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property target

target: ItemDropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property isInternal

isInternal: boolean;

• Whether the drag originated within the same collection as the drop.

property items

items: DropItem[];

• The dropped items.

property target

target: ItemDropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property keys

keys: Set<Key>;

• The keys of the items that were reordered.

property target

target: ItemDropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property acceptedDragTypes

acceptedDragTypes?: 'all' | Array<string | symbol>;

• The drag types that the droppable collection accepts. If the collection accepts directories, include DIRECTORY_DRAG_TYPE in your array of allowed types. 'all'

property onInsert

onInsert?: (e: DroppableCollectionInsertDropEvent) => void;

• Handler that is called when external items are dropped "between" items.

property onItemDrop

onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void;

• Handler that is called when items are dropped "on" an item.

property onMove

onMove?: (e: DroppableCollectionReorderEvent) => void;

• Handler that is called when items are moved within the source collection. This handler allows dropping both on or between items, and items may be moved to a different parent item within a tree.

property onReorder

onReorder?: (e: DroppableCollectionReorderEvent) => void;

• Handler that is called when items are reordered within the collection. This handler only allows dropping between items, not on items. It does not allow moving items to a different parent item within a tree.

property onRootDrop

onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;

• Handler that is called when external items are dropped on the droppable collection's root.

property shouldAcceptItemDrop

shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;

• A function returning whether a given target in the droppable collection is a valid "on" drop target for the current drag types.

method getDropTargetFromPoint

getDropTargetFromPoint: (
    x: number,
    y: number,
    isValidDropTarget: (target: DropTarget) => boolean
) => DropTarget | null;

• Returns a drop target within a collection for the given x and y coordinates. The point is provided relative to the top left corner of the collection container. A drop target can be checked to see if it is valid using the provided isValidDropTarget function.

property defaultExpandedKeys

defaultExpandedKeys?: Iterable<Key>;

• The initial expanded keys in the collection (uncontrolled).

property expandedKeys

expandedKeys?: Iterable<Key>;

• The currently expanded keys in the collection (controlled).

property onExpandedChange

onExpandedChange?: (keys: Set<Key>) => any;

• Handler that is called when items are expanded or collapsed.

property kind

kind: 'file';

• The item kind.

property name

name: string;

• The file name.

property type

type: string;

• The file type (usually a mime type).

method getFile

getFile: () => Promise<File>;

• Returns the contents of the file as a blob.

method getText

getText: () => Promise<string>;

• Returns the contents of the file as a string.

property direction

direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;

• The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). 'row'

property wrap

wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>;

• Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap). false

property excludeFromTabOrder

excludeFromTabOrder?: boolean;

• Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

property autoFocus

autoFocus?: boolean;

• Whether the element should receive focus on render.

method focus

focus: () => void;

property onBlur

onBlur?: (e: FocusEvent<Target>) => void;

• Handler that is called when the element loses focus.

property onFocus

onFocus?: (e: FocusEvent<Target>) => void;

• Handler that is called when the element receives focus.

property onFocusChange

onFocusChange?: (isFocused: boolean) => void;

• Handler that is called when the element's focus status changes.

property action

action?: string | FormHTMLAttributes<HTMLFormElement>['action'];

• Where to send the form-data when the form is submitted. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action).

property autoCapitalize

autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';

• Controls whether inputted text is automatically capitalized and, if so, in what manner. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).

property autoComplete

autoComplete?: 'off' | 'on';

• Indicates whether input elements can by default have their values automatically completed by the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete).

property encType

encType?:
    | 'application/x-www-form-urlencoded'
    | 'multipart/form-data'
    | 'text/plain';

• The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype).

property method

method?: 'get' | 'post' | 'dialog';

• The HTTP method to submit the form with. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method).

property onInvalid

onInvalid?: (event: FormEvent<HTMLFormElement>) => void;

• Triggered for each invalid field when a user submits the form.

property onReset

onReset?: (event: FormEvent<HTMLFormElement>) => void;

• Triggered when a user resets the form.

property onSubmit

onSubmit?: (event: FormEvent<HTMLFormElement>) => void;

• Triggered when a user submits the form.

property role

role?: 'search' | 'presentation';

• An ARIA role override to apply to the form element.

property target

target?: '_blank' | '_self' | '_parent' | '_top';

• The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target).

property validationErrors

validationErrors?: ValidationErrors;

• Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.

property dir

dir?: string | undefined;

property hidden

hidden?: boolean | undefined;

property inert

inert?: boolean | undefined;

property lang

lang?: string | undefined;

property translate

translate?: 'yes' | 'no' | undefined;

property onAnimationEnd

onAnimationEnd?: AnimationEventHandler<T> | undefined;

property onAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<T> | undefined;

property onAnimationIteration

onAnimationIteration?: AnimationEventHandler<T> | undefined;

property onAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<T> | undefined;

property onAnimationStart

onAnimationStart?: AnimationEventHandler<T> | undefined;

property onAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<T> | undefined;

property onAuxClick

onAuxClick?: MouseEventHandler<T> | undefined;

property onAuxClickCapture

onAuxClickCapture?: MouseEventHandler<T> | undefined;

property onClick

onClick?: MouseEventHandler<T> | undefined;

property onClickCapture

onClickCapture?: MouseEventHandler<T> | undefined;

property onContextMenu

onContextMenu?: MouseEventHandler<T> | undefined;

property onContextMenuCapture

onContextMenuCapture?: MouseEventHandler<T> | undefined;

property onDoubleClick

onDoubleClick?: MouseEventHandler<T> | undefined;

property onDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<T> | undefined;

property onGotPointerCapture

onGotPointerCapture?: PointerEventHandler<T> | undefined;

property onGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined;

property onLostPointerCapture

onLostPointerCapture?: PointerEventHandler<T> | undefined;

property onLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined;

property onMouseDown

onMouseDown?: MouseEventHandler<T> | undefined;

property onMouseDownCapture

onMouseDownCapture?: MouseEventHandler<T> | undefined;

property onMouseEnter

onMouseEnter?: MouseEventHandler<T> | undefined;

property onMouseLeave

onMouseLeave?: MouseEventHandler<T> | undefined;

property onMouseMove

onMouseMove?: MouseEventHandler<T> | undefined;

property onMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<T> | undefined;

property onMouseOut

onMouseOut?: MouseEventHandler<T> | undefined;

property onMouseOutCapture

onMouseOutCapture?: MouseEventHandler<T> | undefined;

property onMouseOver

onMouseOver?: MouseEventHandler<T> | undefined;

property onMouseOverCapture

onMouseOverCapture?: MouseEventHandler<T> | undefined;

property onMouseUp

onMouseUp?: MouseEventHandler<T> | undefined;

property onMouseUpCapture

onMouseUpCapture?: MouseEventHandler<T> | undefined;

property onPointerCancel

onPointerCancel?: PointerEventHandler<T> | undefined;

property onPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<T> | undefined;

property onPointerDown

onPointerDown?: PointerEventHandler<T> | undefined;

property onPointerDownCapture

onPointerDownCapture?: PointerEventHandler<T> | undefined;

property onPointerEnter

onPointerEnter?: PointerEventHandler<T> | undefined;

property onPointerLeave

onPointerLeave?: PointerEventHandler<T> | undefined;

property onPointerMove

onPointerMove?: PointerEventHandler<T> | undefined;

property onPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<T> | undefined;

property onPointerOut

onPointerOut?: PointerEventHandler<T> | undefined;

property onPointerOutCapture

onPointerOutCapture?: PointerEventHandler<T> | undefined;

property onPointerOver

onPointerOver?: PointerEventHandler<T> | undefined;

property onPointerOverCapture

onPointerOverCapture?: PointerEventHandler<T> | undefined;

property onPointerUp

onPointerUp?: PointerEventHandler<T> | undefined;

property onPointerUpCapture

onPointerUpCapture?: PointerEventHandler<T> | undefined;

property onScroll

onScroll?: UIEventHandler<T> | undefined;

property onScrollCapture

onScrollCapture?: UIEventHandler<T> | undefined;

property onTouchCancel

onTouchCancel?: TouchEventHandler<T> | undefined;

property onTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<T> | undefined;

property onTouchEnd

onTouchEnd?: TouchEventHandler<T> | undefined;

property onTouchEndCapture

onTouchEndCapture?: TouchEventHandler<T> | undefined;

property onTouchMove

onTouchMove?: TouchEventHandler<T> | undefined;