## Import

```jsx
import { ListBox } from "@cfa/react-core";
```

## Live Editor

```jsx
<div
  style={{
    width: "300px",
  }}
>
  <ListBox.Root aria-label="Sauces">
    <ListBox.Item id="1">Chick-fil-A® Sauce</ListBox.Item>
    <ListBox.Item id="2">Polynesian Sauce</ListBox.Item>
    <ListBox.Item id="3">Honey Mustard Sauce</ListBox.Item>
    <ListBox.Item id="4">Garden Herb Ranch Sauce</ListBox.Item>
  </ListBox.Root>
</div>
```

## Examples

### Basic Usage

A simple ListBox with selectable items. The component handles keyboard navigation, focus management, and accessibility automatically.

```jsx
function BasicExample() {
  const [selected, setSelected] = React.useState(new Set([]));

  return (
    <div
      style={{
        width: "300px",
      }}
    >
      <ListBox.Root
        selectionMode="single"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        aria-label="Sauces"
      >
        <ListBox.Item id="1">Chick-fil-A® Sauce</ListBox.Item>
        <ListBox.Item id="2">Polynesian Sauce</ListBox.Item>
        <ListBox.Item id="3">Honey Mustard Sauce</ListBox.Item>
        <ListBox.Item id="4">Garden Herb Ranch Sauce</ListBox.Item>
      </ListBox.Root>
    </div>
  );
}
```

### Multiple Selection

You can enable multiple selection by setting the `selectionMode` prop to "multiple".

```jsx
function MultipleSelectionExample() {
  const [selected, setSelected] = React.useState(new Set([]));

  return (
    <>
      <div
        style={{
          width: "300px",
        }}
      >
        <ListBox.Root
          selectionMode="multiple"
          selectedKeys={selected}
          onSelectionChange={setSelected}
          aria-label="Sauces"
        >
          <ListBox.Item id="1">Chick-fil-A® Sauce</ListBox.Item>
          <ListBox.Item id="2">Polynesian Sauce</ListBox.Item>
          <ListBox.Item id="3">Honey Mustard Sauce</ListBox.Item>
          <ListBox.Item id="4">Garden Herb Ranch Sauce</ListBox.Item>
        </ListBox.Root>
      </div>
      <div style={{ marginTop: "16px" }}>
        Selected: {[...selected].join(", ")}
      </div>
    </>
  );
}
```

### Using Data Objects

You can pass an array of items to the ListBox and use a render function to display them.

```jsx
function DataObjectsExample() {
  const [selected, setSelected] = React.useState(new Set([]));

  const sauces = [
    { id: "1", name: "Chick-fil-A® Sauce" },
    { id: "2", name: "Polynesian Sauce" },
    { id: "3", name: "Honey Mustard Sauce" },
    { id: "4", name: "Garden Herb Ranch Sauce" },
  ];

  return (
    <>
      <div
        style={{
          width: "300px",
        }}
      >
        <ListBox.Root
          items={sauces}
          selectionMode="single"
          selectedKeys={selected}
          onSelectionChange={setSelected}
          aria-label="Sauces"
        >
          {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}
        </ListBox.Root>
      </div>
    </>
  );
}
```

### Custom Item Rendering

You can customize the appearance of list items by rendering additional components inside them.

```jsx
function CustomItemExample() {
  const [selected, setSelected] = React.useState(new Set([]));

  const sauces = [
    { id: "1", name: "Chick-fil-A® Sauce", initials: "CS" },
    { id: "2", name: "Polynesian Sauce", initials: "PS" },
    { id: "3", name: "Honey Mustard Sauce", initials: "HM" },
    { id: "4", name: "Garden Herb Ranch Sauce", initials: "GH" },
  ];

  return (
    <div
      style={{
        width: "300px",
      }}
    >
      <ListBox.Root
        items={sauces}
        selectionMode="single"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        aria-label="Sauces"
      >
        {(item) => (
          <ListBox.Item
            id={item.id}
            textValue={item.name}
            style={{ display: "flex", alignItems: "center", gap: "8px" }}
          >
            <Avatar.Root>
              <Avatar.Fallback>{item.initials}</Avatar.Fallback>
            </Avatar.Root>
            {item.name}
          </ListBox.Item>
        )}
      </ListBox.Root>
    </div>
  );
}
```

### Sections / Grouping

`ListBox` supports using sections to group items. When using sections, it is preferred that you group
all of the available options. Leaving some items as "ungrouped" can sometimes cause confusion.

```jsx
<div
  style={{
    width: "300px",
  }}
>
  <ListBox.Root aria-label="Sauces">
    <ListBox.Section>
      <ListBox.SectionHeader>Group 1</ListBox.SectionHeader>
      <ListBox.Item id="1">Chick-fil-A® Sauce</ListBox.Item>
      <ListBox.Item id="2">Polynesian Sauce</ListBox.Item>
      <ListBox.Item id="3">Honey Mustard Sauce</ListBox.Item>
      <ListBox.Item id="4">Garden Herb Ranch Sauce</ListBox.Item>
    </ListBox.Section>
    <ListBox.Section>
      <ListBox.SectionHeader>Group 2</ListBox.SectionHeader>
      <ListBox.Item id="5">Zesty Buffalo Sauce</ListBox.Item>
      <ListBox.Item id="6">Barbeque Sauce</ListBox.Item>
      <ListBox.Item id="7">Sriracha Sauce</ListBox.Item>
    </ListBox.Section>
  </ListBox.Root>
</div>
```

## Props

### ListBox.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean \ | FocusStrategy` | - | Whether to auto focus the listbox or an option. |
| children | `ReactNode \ | ((item: T) => ReactNode)` | - | The contents of the collection. |
| className | `ClassNameOrFunction<ListBoxRenderProps>` | `'react-aria-ListBox'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultSelectedKeys | `Iterable<Key> \ | "all"` | - | The initial selected keys in the collection (uncontrolled). |
| dependencies | `readonly any[]` | - | Values that should invalidate the item cache when using dynamic collections. |
| dir | `string` | - | - |
| disabledKeys | `Iterable<Key>` | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| disallowEmptySelection | `boolean` | - | Whether the collection allows empty selection. |
| dragAndDropHooks | `DragAndDropHooks<NoInfer<T>>` | - | The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for the ListBox. |
| escapeKeyBehavior | `"clearSelection" \ | "none"` | `'clearSelection'` | Whether pressing the escape key should clear selection in the listbox or not.&#xA;&#xA;Most experiences should not modify this option as it eliminates a keyboard user's ability to&#xA;easily clear selection. Only use if the escape key is being handled externally or should not&#xA;trigger selection clearing contextually. |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| items | `Iterable<T>` | - | Item objects in the collection. |
| lang | `string` | - | - |
| layout | `"stack" \ | "grid"` | `'stack'` | Whether the items are arranged in a stack or grid. |
| onAction | `(key: Key) => void` | - | Handler that is called when a user performs an action on an item. The exact user event depends on&#xA;the collection's \`selectionBehavior\` prop and the interaction modality. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBlur | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element loses focus. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onSelectionChange | `(keys: Selection) => void` | - | Handler that is called when the selection changes. |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| orientation | `Orientation` | `'vertical'` | The primary orientation of the items. Usually this is the&#xA;direction that the collection scrolls. |
| render | `DOMRenderFunction<"div", ListBoxRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| renderEmptyState | `(props: ListBoxRenderProps) => ReactNode` | - | Provides content to display when there are no items in the list. |
| selectedKeys | `Iterable<Key> \ | "all"` | - | The currently selected keys in the collection (controlled). |
| selectionBehavior | `SelectionBehavior` | `"toggle"` | How multiple selection should behave in the collection. |
| selectionMode | `SelectionMode` | - | The type of selection that is allowed in the collection. |
| shouldFocusOnHover | `boolean` | - | Whether options should be focused when the user hovers over them. |
| shouldFocusWrap | `boolean` | - | Whether focus should wrap around when the end/start is reached. |
| shouldSelectOnPressUp | `boolean` | - | Whether selection should occur on press up instead of press down. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<ListBoxRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### ListBox.Item

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-label | `string` | - | An accessibility label for this item. |
| children | `ChildrenOrFunction<ListBoxItemRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<ListBoxItemRenderProps>` | `'react-aria-ListBoxItem'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| download | `string \ | boolean` | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| hidden | `boolean` | - | - |
| href | `string` | - | A URL to link to. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | `string` | - | Hints at the human language of the linked URL. See\[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| id | `Key` | - | The unique id of the item. |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the item is disabled. |
| lang | `string` | - | - |
| onAction | `() => void` | - | Handler that is called when a user performs an action on the item. The exact user event depends on&#xA;the collection's \`selectionBehavior\` prop and the interaction modality. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBlur | `(e: FocusEvent<HTMLDivElement, Element>) => void` | - | Handler that is called when the element loses focus. |
| onClick | `(e: MouseEvent<FocusableElement, MouseEvent>) => void` | - | \*\*Not recommended – use \`onPress\` instead.\*\* \`onClick\` is an alias for \`onPress\`&#xA;provided for compatibility with other libraries. \`onPress\` provides &#xA;additional event details for non-mouse interactions. |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `(e: FocusEvent<HTMLDivElement, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPress | `(e: PressEvent) => void` | - | Handler that is called when the press is released over the target. |
| onPressChange | `(isPressed: boolean) => void` | - | Handler that is called when the press state changes. |
| onPressEnd | `(e: PressEvent) => void` | - | Handler that is called when a press interaction ends, either&#xA;over the target or when the pointer leaves the target. |
| onPressStart | `(e: PressEvent) => void` | - | Handler that is called when a press interaction starts. |
| onPressUp | `(e: PressEvent) => void` | - | Handler that is called when a press is released over the target, regardless of&#xA;whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| ping | `string` | - | A space-separated list of URLs to ping when the link is followed. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | `HTMLAttributeReferrerPolicy` | - | How much of the referrer to send when following the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| rel | `string` | - | The relationship between the linked resource and the current page. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| render | `(props: any, renderProps: ListBoxItemRenderProps) => ReactElement<unknown, string \ | JSXElementConstructor<any>>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Note: You can check if \`'href' in props\` in order to tell whether to render an \`\<a>\` element.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<a>\` is expected, you cannot render a \`\<button>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| routerOptions | `never` | - | Options for the configured client side router. |
| style | `StyleOrFunction<ListBoxItemRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| target | `HTMLAttributeAnchorTarget` | - | The target window for the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| textValue | `string` | - | A string representation of the item's contents, used for features like typeahead. |
| translate | `"yes" \ | "no"` | - | - |
| value | `object` | - | The object value that this item represents. When using dynamic collections, this is set automatically. |

### ListBox.Section

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-label | `string` | - | An accessibility label for the section. |
| children | `ReactNode \ | ((item: T) => ReactElement<unknown, string \ | JSXElementConstructor<any>>)` | - | Static child items or a function to render children. |
| className | `string` | `'react-aria-ListBoxSection'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dependencies | `readonly any[]` | - | Values that should invalidate the item cache when using dynamic collections. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| id | `Key` | - | The unique id of the section. |
| inert | `boolean` | - | - |
| items | `Iterable<T>` | - | Item objects in the section. |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onClick | `MouseEventHandler<HTMLElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onScroll | `UIEventHandler<HTMLElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLElement>` | - | - |
| render | `DOMRenderFunction<"section", undefined>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `CSSProperties` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. |
| translate | `"yes" \ | "no"` | - | - |
| value | `object` | - | The object value that this section represents. When using dynamic collections, this is set automatically. |

### ListBox.SectionHeader

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| about | `string` | - | - |
| accessKey | `string` | - | - |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | `Booleanish` | - | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| aria-autocomplete | `"none" \ | "list" \ | "inline" \ | "both"` | - | 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&#xA;presented if they are made. |
| aria-braillelabel | `string` | - | Defines a string value that labels the current element, which is intended to be converted into Braille.&#xA;@see aria-label. |
| aria-brailleroledescription | `string` | - | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.&#xA;@see aria-roledescription. |
| aria-busy | `Booleanish` | - | - |
| aria-checked | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.&#xA;@see aria-pressed&#xA;@see aria-selected. |
| aria-colcount | `number` | - | Defines the total number of columns in a table, grid, or treegrid.&#xA;@see aria-colindex. |
| aria-colindex | `number` | - | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.&#xA;@see aria-colcount&#xA;@see aria-colspan. |
| aria-colindextext | `string` | - | Defines a human readable text alternative of aria-colindex.&#xA;@see aria-rowindextext. |
| aria-colspan | `number` | - | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-colindex&#xA;@see aria-rowspan. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element.&#xA;@see aria-owns. |
| aria-current | `boolean \ | "true" \ | "false" \ | "page" \ | "step" \ | "location" \ | "date" \ | "time"` | - | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object.&#xA;@see aria-labelledby |
| aria-description | `string` | - | Defines a string value that describes or annotates the current element.&#xA;@see related aria-describedby. |
| aria-details | `string` | - | Identifies the element that provides a detailed, extended description for the object.&#xA;@see aria-describedby. |
| aria-disabled | `Booleanish` | - | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.&#xA;@see aria-hidden&#xA;@see aria-readonly. |
| aria-dropeffect | `"none" \ | "link" \ | "copy" \ | "execute" \ | "move" \ | "popup"` | - | Indicates what functions can be performed when a dragged object is released on the drop target.&#xA;@deprecated in ARIA 1.1 |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object.&#xA;@see aria-invalid&#xA;@see aria-describedby. |
| aria-expanded | `Booleanish` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-flowto | `string` | - | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,&#xA;allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | `Booleanish` | - | Indicates an element's "grabbed" state in a drag-and-drop operation.&#xA;@deprecated in ARIA 1.1 |
| aria-haspopup | `boolean \ | "grid" \ | "true" \ | "false" \ | "dialog" \ | "listbox" \ | "menu" \ | "tree"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API.&#xA;@see aria-disabled. |
| aria-invalid | `boolean \ | "true" \ | "false" \ | "grammar" \ | "spelling"` | - | Indicates the entered value does not conform to the format expected by the application.&#xA;@see aria-errormessage. |
| aria-keyshortcuts | `string` | - | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| aria-label | `string` | - | Defines a string value that labels the current element.&#xA;@see aria-labelledby. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element.&#xA;@see aria-describedby. |
| aria-level | `number` | - | Defines the hierarchical level of an element within a structure. |
| aria-live | `"off" \ | "assertive" \ | "polite"` | - | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| aria-modal | `Booleanish` | - | Indicates whether an element is modal when displayed. |
| aria-multiline | `Booleanish` | - | Indicates whether a text box accepts multiple lines of input or only a single line. |
| aria-multiselectable | `Booleanish` | - | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | `"horizontal" \ | "vertical"` | - | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| aria-owns | `string` | - | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship&#xA;between DOM elements where the DOM hierarchy cannot be used to represent the relationship.&#xA;@see aria-controls. |
| aria-placeholder | `string` | - | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.&#xA;A hint could be a sample value or a brief description of the expected format. |
| aria-posinset | `number` | - | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-setsize. |
| aria-pressed | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "pressed" state of toggle buttons.&#xA;@see aria-checked&#xA;@see aria-selected. |
| aria-readonly | `Booleanish` | - | Indicates that the element is not editable, but is otherwise operable.&#xA;@see aria-disabled. |
| aria-relevant | `"all" \ | "text" \ | "additions" \ | "additions removals" \ | "additions text" \ | "removals" \ | "removals additions" \ | "removals text" \ | "text additions" \ | "text removals"` | - | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.&#xA;@see aria-atomic. |
| aria-required | `Booleanish` | - | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | `string` | - | Defines a human-readable, author-localized description for the role of an element. |
| aria-rowcount | `number` | - | Defines the total number of rows in a table, grid, or treegrid.&#xA;@see aria-rowindex. |
| aria-rowindex | `number` | - | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.&#xA;@see aria-rowcount&#xA;@see aria-rowspan. |
| aria-rowindextext | `string` | - | Defines a human readable text alternative of aria-rowindex.&#xA;@see aria-colindextext. |
| aria-rowspan | `number` | - | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-rowindex&#xA;@see aria-colspan. |
| aria-selected | `Booleanish` | - | Indicates the current "selected" state of various widgets.&#xA;@see aria-checked&#xA;@see aria-pressed. |
| aria-setsize | `number` | - | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-posinset. |
| aria-sort | `"none" \ | "ascending" \ | "descending" \ | "other"` | - | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | `number` | - | Defines the maximum allowed value for a range widget. |
| aria-valuemin | `number` | - | Defines the minimum allowed value for a range widget. |
| aria-valuenow | `number` | - | Defines the current value for a range widget.&#xA;@see aria-valuetext. |
| aria-valuetext | `string` | - | Defines the human readable text alternative of aria-valuenow for a range widget. |
| autoCapitalize | `"none" \ | (string & {}) \ | "off" \ | "on" \ | "sentences" \ | "words" \ | "characters"` | - | - |
| autoCorrect | `string` | - | - |
| autoFocus | `boolean` | - | - |
| autoSave | `string` | - | - |
| className | `string` | - | - |
| color | `string` | - | - |
| content | `string` | - | - |
| contentEditable | `Booleanish \ | "inherit" \ | "plaintext-only"` | - | - |
| contextMenu | `string` | - | - |
| dangerouslySetInnerHTML | `{ __html: string \ | TrustedHTML; }` | - | - |
| datatype | `string` | - | - |
| defaultChecked | `boolean` | - | - |
| defaultValue | `string \ | number \ | readonly string[]` | - | - |
| dir | `string` | - | - |
| draggable | `Booleanish` | - | - |
| enterKeyHint | `"enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "search" \ | "send"` | - | - |
| exportparts | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/exportparts} |
| hidden | `boolean` | - | - |
| id | `string` | - | - |
| inert | `boolean` | - | @see https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
| inlist | `any` | - | - |
| inputMode | `"none" \ | "search" \ | "text" \ | "tel" \ | "url" \ | "email" \ | "numeric" \ | "decimal"` | - | Hints at the type of data that might be entered by the user while editing the element or its contents&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | `string` | - | Specify that a standard HTML element should behave like a defined custom built-in element&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| itemID | `string` | - | - |
| itemProp | `string` | - | - |
| itemRef | `string` | - | - |
| itemScope | `boolean` | - | - |
| itemType | `string` | - | - |
| lang | `string` | - | - |
| nonce | `string` | - | - |
| onAbort | `ReactEventHandler<HTMLElement>` | - | - |
| onAbortCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onBeforeInput | `InputEventHandler<HTMLElement>` | - | - |
| onBeforeInputCapture | `FormEventHandler<HTMLElement>` | - | - |
| onBeforeToggle | `ToggleEventHandler<HTMLElement>` | - | - |
| onBlur | `FocusEventHandler<HTMLElement>` | - | - |
| onBlurCapture | `FocusEventHandler<HTMLElement>` | - | - |
| onCanPlay | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayThrough | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayThroughCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onChange | `FormEventHandler<HTMLElement>` | - | - |
| onChangeCapture | `FormEventHandler<HTMLElement>` | - | - |
| onClick | `MouseEventHandler<HTMLElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionEndCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionStart | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionStartCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionUpdate | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionUpdateCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCopyCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCut | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCutCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onDrag | `DragEventHandler<HTMLElement>` | - | - |
| onDragCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnd | `DragEventHandler<HTMLElement>` | - | - |
| onDragEndCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnter | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnterCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragExit | `DragEventHandler<HTMLElement>` | - | - |
| onDragExitCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragLeave | `DragEventHandler<HTMLElement>` | - | - |
| onDragLeaveCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragOver | `DragEventHandler<HTMLElement>` | - | - |
| onDragOverCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragStart | `DragEventHandler<HTMLElement>` | - | - |
| onDragStartCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDrop | `DragEventHandler<HTMLElement>` | - | - |
| onDropCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDurationChange | `ReactEventHandler<HTMLElement>` | - | - |
| onDurationChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEmptied | `ReactEventHandler<HTMLElement>` | - | - |
| onEmptiedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEncrypted | `ReactEventHandler<HTMLElement>` | - | - |
| onEncryptedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEnded | `ReactEventHandler<HTMLElement>` | - | - |
| onEndedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onError | `ReactEventHandler<HTMLElement>` | - | - |
| onErrorCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onFocus | `FocusEventHandler<HTMLElement>` | - | - |
| onFocusCapture | `FocusEventHandler<HTMLElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onInput | `FormEventHandler<HTMLElement>` | - | - |
| onInputCapture | `FormEventHandler<HTMLElement>` | - | - |
| onInvalid | `FormEventHandler<HTMLElement>` | - | - |
| onInvalidCapture | `FormEventHandler<HTMLElement>` | - | - |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyDownCapture | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyPress | `KeyboardEventHandler<HTMLElement>` | - | @deprecated Use \`onKeyUp\` or \`onKeyDown\` instead |
| onKeyPressCapture | `KeyboardEventHandler<HTMLElement>` | - | @deprecated Use \`onKeyUpCapture\` or \`onKeyDownCapture\` instead |
| onKeyUp | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyUpCapture | `KeyboardEventHandler<HTMLElement>` | - | - |
| onLoad | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedData | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedDataCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedMetadata | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedMetadataCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadStart | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadStartCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLElement>` | - | - |
| onPasteCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onPause | `ReactEventHandler<HTMLElement>` | - | - |
| onPauseCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPlay | `ReactEventHandler<HTMLElement>` | - | - |
| onPlayCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPlaying | `ReactEventHandler<HTMLElement>` | - | - |
| onPlayingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onProgress | `ReactEventHandler<HTMLElement>` | - | - |
| onProgressCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onRateChange | `ReactEventHandler<HTMLElement>` | - | - |
| onRateChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onReset | `FormEventHandler<HTMLElement>` | - | - |
| onResetCapture | `FormEventHandler<HTMLElement>` | - | - |
| onScroll | `UIEventHandler<HTMLElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLElement>` | - | - |
| onScrollEnd | `UIEventHandler<HTMLElement>` | - | - |
| onScrollEndCapture | `UIEventHandler<HTMLElement>` | - | - |
| onSeeked | `ReactEventHandler<HTMLElement>` | - | - |
| onSeekedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSeeking | `ReactEventHandler<HTMLElement>` | - | - |
| onSeekingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLElement>` | - | - |
| onSelectCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onStalled | `ReactEventHandler<HTMLElement>` | - | - |
| onStalledCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSubmit | `FormEventHandler<HTMLElement>` | - | - |
| onSubmitCapture | `FormEventHandler<HTMLElement>` | - | - |
| onSuspend | `ReactEventHandler<HTMLElement>` | - | - |
| onSuspendCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onTimeUpdate | `ReactEventHandler<HTMLElement>` | - | - |
| onTimeUpdateCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onToggle | `ToggleEventHandler<HTMLElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onVolumeChange | `ReactEventHandler<HTMLElement>` | - | - |
| onVolumeChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onWaiting | `ReactEventHandler<HTMLElement>` | - | - |
| onWaitingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLElement>` | - | - |
| part | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/part} |
| popover | `"" \ | "auto" \ | "manual" \ | "hint"` | - | - |
| popoverTarget | `string` | - | - |
| popoverTargetAction | `"toggle" \ | "show" \ | "hide"` | - | - |
| prefix | `string` | - | - |
| property | `string` | - | - |
| radioGroup | `string` | - | - |
| rel | `string` | - | - |
| resource | `string` | - | - |
| results | `number` | - | - |
| rev | `string` | - | - |
| role | `AriaRole` | - | - |
| security | `string` | - | - |
| slot | `string` | - | - |
| spellCheck | `Booleanish` | - | - |
| style | `CSSProperties` | - | - |
| suppressContentEditableWarning | `boolean` | - | - |
| suppressHydrationWarning | `boolean` | - | - |
| tabIndex | `number` | - | - |
| title | `string` | - | - |
| translate | `"yes" \ | "no"` | - | - |
| typeof | `string` | - | - |
| unselectable | `"off" \ | "on"` | - | - |
| vocab | `string` | - | - |