Defines a string value that labels the current element.
'aria-label'?: string;Identifies the element (or elements) that labels the current element.
'aria-labelledby'?: string;Identifies the element (or elements) that describes the object.
'aria-describedby'?: string;Identifies the element (or elements) that provide a detailed, extended description for the object.
'aria-details'?: string;Identifies the element that provides an error message for the object.
'aria-errormessage'?: string;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.
excludeFromTabOrder?: boolean;Handler that is called when a text composition system starts a new text composition session. See MDN.
onCompositionStart?: CompositionEventHandler<T>;Handler that is called when a text composition system completes or cancels the current text composition session. See MDN.
onCompositionEnd?: CompositionEventHandler<T>;Handler that is called when a new character is received in the current text composition session. See MDN.
onCompositionUpdate?: CompositionEventHandler<T>;Handler that is called when the input value is about to be modified. See MDN.
onBeforeInput?: FormEventHandler<T>;Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoComplete?: string;The type of input to render. See MDN.
@default — 'text'
Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See MDN.
autoCorrect?: string;An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.
spellCheck?: string;This type allows configuring link props with router options and type-safe URLs via TS module
augmentation. By default, this is an empty type. Extend with href and routerOptions
properties to configure your router.
Any focusable element, including both HTML and SVG elements.
export interface FocusableElement extends Element, HTMLOrSVGElement {}All DOM attributes supported across both HTML and SVG elements.
export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {Global attributes that can be applied to any DOM element.
@private —
Global DOM events that are supported on all DOM elements.
@private —
Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.
validationErrors?: ValidationErrors;Where to send the form-data when the form is submitted. See MDN.
action?: string | FormHTMLAttributes<HTMLFormElement>["action"];The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See MDN.
encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";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.
target?: "_blank" | "_self" | "_parent" | "_top";Triggered when a user submits the form.
onSubmit?: (event: FormEvent<HTMLFormElement>) => void;Triggered when a user resets the form.
onReset?: (event: FormEvent<HTMLFormElement>) => void;Triggered for each invalid field when a user submits the form.
onInvalid?: (event: FormEvent<HTMLFormElement>) => void;Indicates whether input elements can by default have their values automatically completed by the browser. See MDN.
autoComplete?: "off" | "on";Controls whether inputted text is automatically capitalized and, if so, in what manner. See MDN.
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";An ARIA role override to apply to the form element.
role?: "search" | "presentation";Whether user input is required on the input before form submission.
isRequired?: boolean;Whether the input value is invalid.
isInvalid?: boolean;Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
@default — 'aria'
A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if validationBehavior="native". For realtime validation, use the isInvalid
prop instead.
Whether the input value is invalid.
isInvalid: boolean;The current error messages for the input if it is invalid, otherwise an empty array.
validationErrors: string[];The native validation details for the input.
validationDetails: ValidityState;Whether the input should display its "valid" or "invalid" visual styling.
validationState?: ValidationState;Whether the input is disabled.
isDisabled?: boolean;Whether the input can be selected but not changed by the user.
isReadOnly?: boolean;The current value (controlled).
value?: T;The default value (uncontrolled).
defaultValue?: T;Handler that is called when the value changes.
onChange?: (value: C) => void;Temporary text that occupies the text input when it is empty.
placeholder?: string;Temporary text that occupies the text input when it is empty. Please use help text instead.
@deprecated —
The start value of the range.
start: T;The end value of the range.
end: T;The smallest value allowed for the input.
minValue?: T;The largest value allowed for the input.
maxValue?: T;The amount that the input value changes with each increment or decrement "tick".
step?: T;A description for the field. Provides a hint such as specific requirements for what to choose.
description?: ReactNode;Whether the description is displayed with lighter text.
isDisabled?: boolean;Whether an error icon is rendered.
showErrorIcon?: boolean;Whether the collection allows empty selection.
disallowEmptySelection?: boolean;How selection should be displayed.
selectionStyle?: "checkbox" | "highlight";The x coordinate of the event, relative to the target element.
x: number;The y coordinate of the event, relative to the target element.
y: number;The item kind.
kind: "text";The drag types available for this item. These are often mime types, but may be custom app-specific types.
types: Set<string>;The item kind.
kind: "directory";The directory name.
name: string;Returns the entries contained within the directory.
getEntries(): AsyncIterable<FileDropItem | DirectoryDropItem>;The event type.
type: "root";The drop target type.
type: "item";Whether the drag originated within the same collection as the drop.
isInternal: boolean;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.
The drag types that the droppable collection accepts. If the collection accepts directories,
include DIRECTORY_DRAG_TYPE in your array of allowed types.
@default — 'all'
Handler that is called when external items are dropped "between" items.
onInsert?: (e: DroppableCollectionInsertDropEvent) => void;Handler that is called when external items are dropped on the droppable collection's root.
onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;Handler that is called when items are dropped "on" an item.
onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => 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.
onReorder?: (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.
onMove?: (e: DroppableCollectionReorderEvent) => void;A function returning whether a given target in the droppable collection is a valid "on" drop target for the current drag types.
shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;Handler that is called when a valid drag enters a drop target.
onDropEnter?: (e: DroppableCollectionEnterEvent) => void;Handler that is called after a valid drag is held over a drop target for a period of time.
onDropActivate?: (e: DroppableCollectionActivateEvent) => void;Handler that is called when a valid drag exits a drop target.
onDropExit?: (e: DroppableCollectionExitEvent) => 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.
A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;Whether the drop ended within the same collection as it originated.
isInternal: boolean;Handler that is called when a drag operation is started.
onDragStart?: (e: DraggableCollectionStartEvent) => void;Handler that is called when the drag is moved.
onDragMove?: (e: DraggableCollectionMoveEvent) => void;Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.
onDragEnd?: (e: DraggableCollectionEndEvent) => void;A function that returns the items being dragged.
getItems: (keys: Set<Key>, items: T[]) => DragItem[];The ref of the element that will be rendered as the drag preview while dragging.
preview?: RefObject<DragPreviewRenderer | null>;Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.
getAllowedDropOperations?: () => DropOperation[];Rendered contents of the item or child items.
children: ReactNode;Rendered contents of the item if children contains child items.
A string representation of the item's contents, used for features like typeahead.
textValue?: string;An accessibility label for this item.
'aria-label'?: string;Whether this item has children, even if not loaded yet.
hasChildItems?: boolean;Whether the items are currently loading.
isLoading?: boolean;Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
onLoadMore?: () => any;Rendered contents of the section, e.g. a header.
title?: ReactNode;An accessibility label for the section.
'aria-label'?: string;Static child items or a function to render children.
children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>;A pre-constructed collection to use instead of building one from items and children.
collection?: C;Handler that is called when items are expanded or collapsed.
onExpandedChange?: (keys: Set<Key>) => any;Handler that is called when the sorted column or direction changes.
onSortChange?: (descriptor: SortDescriptor) => any;Returns the key visually below the given one, or null for none.
Returns the key visually above the given one, or null for none.
Returns the key visually to the left of the given one, or null for none.
Returns the key visually to the right of the given one, or null for none.
Returns the key visually one page below the given one, or null for none.
Returns the key visually one page above the given one, or null for none.
Returns the first key, or null for none.
Returns the next key after fromKey that matches the given search string, or null for none.
A LayoutDelegate provides layout information for collection items.
export interface LayoutDelegate { }A generic interface to access a readonly sequential collection of unique keyed items.
export interface Collection<T> extends Iterable<T> {The number of items in the collection.
readonly size: number;Get an item by the index of its key.
at(idx: number): T | null;Filters the collection using the given function.
filter(filterFn: (nodeValue: string, node: T) => boolean): Collection<T>;The type of item this node represents.
type: string;The object value the node was created from.
value: T | null;The level of depth this node is at in the hierarchy.
level: number;Whether this item has children, even if not loaded yet.
hasChildNodes: boolean;The loaded children of this node.
@deprecated — Use collection.getChildren(node.key) instead.
The rendered contents of this node (e.g. JSX).
rendered: ReactNode;A string value for this node, used for features like typeahead.
textValue: string;An accessibility label for this node.
'aria-label'?: string;The index of this node within its parent.
index: number;A function that should be called to wrap the rendered node.
wrapper?: (element: ReactElement) => ReactElement;Additional properties specific to a particular node type.
props?: any;@private —
shouldInvalidate?: (context: any) => boolean;A function that renders this node to a React Element in the DOM.
render?: (node: Node<any>) => ReactElement;Use continuePropagation.
@deprecated —
The type of press event being fired.
type: "pressstart" | "pressend" | "pressup" | "press";The target element of the press event.
target: Element;Whether the shift keyboard modifier was held during the press event.
shiftKey: boolean;Whether the ctrl keyboard modifier was held during the press event.
ctrlKey: boolean;Whether the meta keyboard modifier was held during the press event.
metaKey: boolean;Whether the alt keyboard modifier was held during the press event.
altKey: boolean;X position relative to the target.
x: number;Y position relative to the target.
y: number;The key that triggered the press event, if it was triggered by a keyboard interaction. This is useful for differentiating between Space and Enter key presses.
key?: string;By default, press events stop propagation to parent elements.
In cases where a handler decides not to handle a specific event,
it can call continuePropagation() to allow a parent to handle it.
The type of long press event being fired.
type: "longpressstart" | "longpressend" | "longpress";The type of hover event being fired.
type: "hoverstart" | "hoverend";The pointer type that triggered the hover event.
pointerType: "mouse" | "pen";The target element of the hover event.
target: HTMLElement;Handler that is called when the element receives focus.
onFocus?: (e: FocusEvent<Target>) => void;Handler that is called when the element loses focus.
onBlur?: (e: FocusEvent<Target>) => void;Handler that is called when the element's focus status changes.
onFocusChange?: (isFocused: boolean) => void;Handler that is called when the hover state changes.
onHoverChange?: (isHovering: boolean) => void;Handler that is called when the press is released over the target.
onPress?: (e: PressEvent) => void;Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressEnd?: (e: PressEvent) => void;Handler that is called when the press state changes.
onPressChange?: (isPressed: boolean) => void;Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onPressUp?: (e: PressEvent) => void;Not recommended – use onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions.
Whether the element should receive focus on render.
autoFocus?: boolean;Whether the shift keyboard modifier was held during the move event.
shiftKey: boolean;Whether the ctrl keyboard modifier was held during the move event.
ctrlKey: boolean;Whether the meta keyboard modifier was held during the move event.
metaKey: boolean;Whether the alt keyboard modifier was held during the move event.
altKey: boolean;The type of move event being fired.
type: "movestart";The type of move event being fired.
type: "move";The amount moved in the X direction since the last event.
deltaX: number;The amount moved in the Y direction since the last event.
deltaY: number;The type of move event being fired.
type: "moveend";The amount moved in the X direction since the last event.
deltaX: number;The amount moved in the Y direction since the last event.
deltaY: number;See the Styling docs for a visualization of these values.
export type DimensionValue = "size-0" | "size-10" | "size-25" | "size-40" | "size-50" | "size-65" | "size-75" | "size-85" | "size-100" | "size-115" | "size-125" | "size-130" | "size-150" | "size-160" | "size-175" | "size-200" | "size-225" | "size-250" | "size-275" | "size-300" | "size-325" | "size-350" | "size-400" | "size-450" | "size-500" | "size-550" | "size-600" | "size-675" | "size-700" | "size-800" | "size-900" | "size-1000" | "size-1200" | "size-1250" | "size-1600" | "size-1700" | "size-2000" | "size-2400" | "size-3000" | "size-3400" | "size-3600" | "size-4600" | "size-5000" | "size-6000" | "static-size-0" | "static-size-10" | "static-size-25" | "static-size-50" | "static-size-40" | "static-size-65" | "static-size-100" | "static-size-115" | "static-size-125" | "static-size-130" | "static-size-150" | "static-size-160" | "static-size-175" | "static-size-200" | "static-size-225" | "static-size-250" | "static-size-300" | "static-size-400" | "static-size-450" | "static-size-500" | "static-size-550" | "static-size-600" | "static-size-700" | "static-size-800" | "static-size-900" | "static-size-1000" | "static-size-1200" | "static-size-1700" | "static-size-2400" | "static-size-2600" | "static-size-3400" | "static-size-3600" | "static-size-4600" | "static-size-5000" | "static-size-6000" | "single-line-height" | "single-line-width" | (string & {}) | numberSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_className?: string;Sets inline style for the element. Only use as a last resort. Use style props instead.
UNSAFE_style?: CSSProperties;The margin for the logical start side of the element, depending on layout direction. See MDN.
marginStart?: Responsive<DimensionValue>;The margin for the logical end side of an element, depending on layout direction. See MDN.
marginEnd?: Responsive<DimensionValue>;The margin for both the left and right sides of the element. See MDN.
marginX?: Responsive<DimensionValue>;The margin for both the top and bottom sides of the element. See MDN.
marginY?: Responsive<DimensionValue>;When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flex?: Responsive<string | number | boolean>;When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexGrow?: Responsive<number>;When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexShrink?: Responsive<number>;When used in a flex layout, specifies the initial main size of the element. See MDN.
flexBasis?: Responsive<number | string>;Specifies how the element is justified inside a flex or grid container. See MDN.
justifySelf?: Responsive<"auto" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "center" | "left" | "right" | "stretch">;Overrides the alignItems property of a flex or grid container. See
MDN.
The layout order for the element within a flex or grid container. See MDN.
order?: Responsive<number>;When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridArea?: Responsive<string>;When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridColumn?: Responsive<string>;When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridRow?: Responsive<string>;When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnStart?: Responsive<string>;When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridColumnEnd?: Responsive<string>;When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowStart?: Responsive<string>;When used in a grid layout, specifies the ending row to span within the grid. See MDN.
gridRowEnd?: Responsive<string>;Specifies how the element is positioned. See MDN.
position?: Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">;The logical start position for the element, depending on layout direction. See MDN.
start?: Responsive<DimensionValue>;The logical end position for the element, depending on layout direction. See MDN.
end?: Responsive<DimensionValue>;The left position for the element. See
MDN. Consider using start instead
for RTL support.
The right position for the element. See
MDN. Consider using start instead
for RTL support.
The Spectrum color token version number.
@default — 5
The width of the element's border on all four sides. See MDN.
borderWidth?: Responsive<BorderSizeValue>;The width of the border on the logical start side, depending on the layout direction. See MDN.
borderStartWidth?: Responsive<BorderSizeValue>;The width of the border on the logical end side, depending on the layout direction. See MDN.
borderEndWidth?: Responsive<BorderSizeValue>;The color of the element's border on all four sides. See MDN.
borderColor?: Responsive<BorderColor[C]>;The color of the border on the logical start side, depending on the layout direction. See MDN.
borderStartColor?: Responsive<BorderColor[C]>;The color of the border on the logical end side, depending on the layout direction. See MDN.
borderEndColor?: Responsive<BorderColor[C]>;The border radius on all four sides of the element. See MDN.
borderRadius?: Responsive<BorderRadiusValue>;The border radius for the top start corner of the element, depending on the layout direction. See MDN.
borderTopStartRadius?: Responsive<BorderRadiusValue>;The border radius for the top end corner of the element, depending on the layout direction. See MDN.
borderTopEndRadius?: Responsive<BorderRadiusValue>;The border radius for the bottom start corner of the element, depending on the layout direction. See MDN.
borderBottomStartRadius?: Responsive<BorderRadiusValue>;The border radius for the bottom end corner of the element, depending on the layout direction. See MDN.
borderBottomEndRadius?: Responsive<BorderRadiusValue>;The padding for the logical start side of the element, depending on layout direction. See MDN.
paddingStart?: Responsive<DimensionValue>;The padding for the logical end side of an element, depending on layout direction. See MDN.
paddingEnd?: Responsive<DimensionValue>;The padding for both the left and right sides of the element. See MDN.
paddingX?: Responsive<DimensionValue>;The padding for both the top and bottom sides of the element. See MDN.
paddingY?: Responsive<DimensionValue>;Species what to do when the element's content is too long to fit its size. See MDN.
overflow?: Responsive<string>;The distribution of space around items along the main axis. See MDN.
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 child items along the cross axis. See MDN.
alignContent?: Responsive<"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | "baseline" | "first baseline" | "last baseline" | "safe center" | "unsafe center">;The alignment of children within their container. See MDN.
alignItems?: Responsive<"start" | "end" | "center" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | "safe center" | "unsafe center">;The direction in which to layout children. See MDN.
@default — 'row'
Whether to wrap items onto multiple lines. See MDN.
@default — false
Defines the sizes of each column in the grid. See MDN.
columns?: Responsive<string | DimensionValue[]>;Controls how auto-placed items are flowed into the grid. See MDN.
autoFlow?: Responsive<"row" | "column" | "row dense" | "column dense">;Defines the default justifySelf for all items in the grid. See
MDN.
The content to display as the label.
label?: ReactNode;The label's overall position relative to the element it is labeling.
@default — 'top'
The label's horizontal alignment relative to the element it is labeling.
@default — 'start'
Whether the required state should be shown as an icon or text.
@default — 'icon'
Whether the label is labeling a required field or group.
isRequired?: boolean;A ContextualHelp element to place next to the label.
contextualHelp?: ReactNode;