# React Aria

> An accordion is a container for multiple accordion items.

---

# Source: https://react-spectrum.adobe.com/Accordion.md

# Accordion

An accordion is a container for multiple accordion items.

```tsx
import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Accordion styles={style({width: 220})}>
  <AccordionItem id="personal">
    <AccordionItemTitle>Personal Information</AccordionItemTitle>
    <AccordionItemPanel>Personal information form here.</AccordionItemPanel>
  </AccordionItem>
  <AccordionItem id="billing">
    <AccordionItemTitle>Billing Address</AccordionItemTitle>
    <AccordionItemPanel>Billing address form here.</AccordionItemPanel>
  </AccordionItem>
</Accordion>
```

## Expanding

Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, and `onExpandedChange` to handle user interactions. The expanded keys correspond to the `id` prop of each `<AccordionItem>`.

```tsx
import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['settings']));

  return (
    <Accordion
      /*- begin highlight -*/
      expandedKeys={expandedKeys}
      onExpandedChange={setExpandedKeys}>
      {/*- end highlight -*/}
      <AccordionItem id="settings">
        <AccordionItemTitle>Settings</AccordionItemTitle>
        <AccordionItemPanel>Application settings content</AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="preferences">
        <AccordionItemTitle>Preferences</AccordionItemTitle>
        <AccordionItemPanel>User preferences content</AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="advanced">
        <AccordionItemTitle>Advanced</AccordionItemTitle>
        <AccordionItemPanel>Advanced configuration options</AccordionItemPanel>
      </AccordionItem>
    </Accordion>
  );
}
```

## Content

Use `AccordionItemHeader` to add additional elements alongside the title, such as action buttons or icons.

```tsx
import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, ActionButton} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Accordion>
  <AccordionItem styles={style({width: 250})}>
    {/*- begin highlight -*/}
    <AccordionItemHeader>
      <AccordionItemTitle>Project Settings</AccordionItemTitle>
      <ActionButton>Edit</ActionButton>
    </AccordionItemHeader>
    {/*- end highlight -*/}
    <AccordionItemPanel>
      Configure your project settings including name, description, and permissions.
    </AccordionItemPanel>
  </AccordionItem>
  <AccordionItem id="preferences">
    <AccordionItemTitle>Preferences</AccordionItemTitle>
    <AccordionItemPanel>User preferences content</AccordionItemPanel>
  </AccordionItem>
</Accordion>
```

## API

```tsx
<Accordion>
  <AccordionItem>
    <AccordionItemHeader>
      <AccordionItemTitle />
    </AccordionItemHeader>
    <AccordionItemPanel />
  </AccordionItem>
</Accordion>
```

### Accordion

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `allowsMultipleExpanded` | `boolean | undefined` | — | Whether multiple accordion items can be expanded at the same time. |
| `children` | `React.ReactNode` | — | The accordion item elements in the accordion. |
| `defaultExpandedKeys` | `Iterable<Key> | undefined` | — | The initial expanded keys in the accordion (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of space between the accordion items. |
| `expandedKeys` | `Iterable<Key> | undefined` | — | The currently expanded keys in the accordion (controlled). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether all accordion items are disabled. |
| `isQuiet` | `boolean | undefined` | — | Whether the accordion should be displayed with a quiet style. |
| `onExpandedChange` | `((keys: Set<Key>) => any) | undefined` | — | Handler that is called when accordion items are expanded or collapsed. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the accordion. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### AccordionItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The contents of the accordion item, consisting of a accordion item title and accordion item panel. |
| `defaultExpanded` | `boolean | undefined` | — | Whether the accordion item is expanded by default (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of space between the accordion item. |
| `id` | `Key | undefined` | — | An id for the accordion item, matching the id used in `expandedKeys`. |
| `isDisabled` | `boolean | undefined` | — | Whether the accordion item is disabled. |
| `isExpanded` | `boolean | undefined` | — | Whether the accordion item is expanded (controlled). |
| `isQuiet` | `boolean | undefined` | — | Whether the accordion item should be displayed with a quiet style. |
| `onExpandedChange` | `((isExpanded: boolean) => void) | undefined` | — | Handler that is called when the accordion item's expanded state changes. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the accordion item. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### AccordionItemHeader

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The contents of the accordion item header. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### AccordionItemTitle

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The contents of the accordion item title. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `level` | `number | undefined` | 3 | The heading level of the accordion item title. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### AccordionItemPanel

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `React.ReactNode` | — | The contents of the accordion item panel. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `role` | `"region" | "group" | undefined` | 'group' | The accessibility role for the accordion item panel. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/ActionBar.md

# ActionBar

Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.

```tsx
import {ActionBar, ActionButton, TableView, TableHeader, TableBody, Column, Row, Cell, Text} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Copy from '@react-spectrum/s2/icons/Copy';
import Delete from '@react-spectrum/s2/icons/Delete';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

let rows = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
  {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
  {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
];

function Example(props) {
  return (
    <TableView
      aria-label="Table with action bar"
      selectionMode="multiple"
      defaultSelectedKeys={[2]}
      styles={style({width: 'full', height: 250})}
      renderActionBar={(selectedKeys) => (
        /*- begin focus -*/
        <ActionBar {...props}>
          <ActionButton onPress={() => alert('Edit action')}>
            <Edit />
            <Text>Edit</Text>
          </ActionButton>
          <ActionButton onPress={() => alert('Copy action')}>
            <Copy />
            <Text>Copy</Text>
          </ActionButton>
          <ActionButton onPress={() => alert('Delete action')}>
            <Delete />
            <Text>Delete</Text>
          </ActionButton>
        </ActionBar>
        /*- end focus -*/
      )}>
      <TableHeader>
        <Column key="name" isRowHeader>Name</Column>
        <Column key="type">Type</Column>
        <Column key="level">Level</Column>
      </TableHeader>
      <TableBody items={rows}>
        {item => (
          <Row>
            <Cell key="name">{item.name}</Cell>
            <Cell key="type">{item.type}</Cell>
            <Cell key="level">{item.level}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

## API

```tsx
<ActionBar>
  <ActionButton />
</ActionBar>
```

### ActionBar

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | A list of ActionButtons to display. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isEmphasized` | `boolean | undefined` | — | Whether the ActionBar should be displayed with a emphasized style. |
| `onClearSelection` | `(() => void) | undefined` | — | Handler that is called when the ActionBar clear button is pressed. |
| `scrollRef` | `RefObject<HTMLElement | null> | undefined` | — | A ref to the scrollable element the ActionBar appears above. |
| `selectedItemCount` | `number | "all" | undefined` | — | The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/ActionButton.md

# ActionButton

ActionButtons allow users to perform an action.
They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.

```tsx
import {ActionButton} from '@react-spectrum/s2';

<ActionButton />
```

## Events

Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button.

```tsx
import {ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [count, setCount] = useState(0);

  return (
    /*- begin highlight -*/
    <ActionButton onPress={() => setCount(c => c + 1)}>
    {/*- end highlight -*/}
      {count} Edits
    </ActionButton>
  );
}
```

## Pending

Use the `isPending` prop to display a pending state. Pending buttons remain focusable, but are otherwise disabled. After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.

```tsx
import {ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';

function PendingButton() {
  let [isPending, setPending] = useState(false);

  return (
    <ActionButton
      isPending={isPending}
      onPress={() => {
        setPending(true);
        setTimeout(() => {
          setPending(false);
        }, 5000);
      }}>
      Save
    </ActionButton>
  );
}
```

## API

```tsx
<ActionButton>
  <Icon /> or <Avatar />
  <Text />
  <NotificationBadge />
</ActionButton>
```

### ActionButton

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-current` | `boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined` | — | Indicates whether this element represents the current item within a container or set of related elements. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-disabled` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element is disabled to users of assistive technology. |
| `aria-expanded` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined` | — | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `aria-pressed` | `boolean | "true" | "false" | "mixed" | undefined` | — | Indicates the current "pressed" state of toggle buttons. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The content to display in the ActionButton. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| `formAction` | `string | undefined` | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
| `formEncType` | `string | undefined` | — | Indicates how to encode the form data that is submitted. |
| `formMethod` | `string | undefined` | — | Indicates the HTTP method used to submit the form. |
| `formNoValidate` | `boolean | undefined` | — | Indicates that the form is not to be validated when it is submitted. |
| `formTarget` | `string | undefined` | — | Overrides the target attribute of the button's form owner. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the button is disabled. |
| `isPending` | `boolean | undefined` | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
| `isQuiet` | `boolean | undefined` | — | Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). |
| `name` | `string | undefined` | — | Submitted as a pair with the button's value as part of the form data. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `preventFocusOnPress` | `boolean | undefined` | — | Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the ActionButton. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the ActionButton appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `type` | `"button" | "submit" | "reset" | undefined` | 'button' | The behavior of the button when used in an HTML form. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | undefined` | — | The value associated with the button's name when it's submitted with the form data. |

---

# Source: https://react-spectrum.adobe.com/ActionButtonGroup.md

# ActionButtonGroup

An ActionButtonGroup is a grouping of related ActionButtons.

```tsx
import {ActionButtonGroup, ActionButton, Text} from '@react-spectrum/s2';
import Cut from '@react-spectrum/s2/icons/Cut';
import Copy from '@react-spectrum/s2/icons/Copy';
import Paste from '@react-spectrum/s2/icons/Paste';

<ActionButtonGroup>
  <ActionButton>
    <Cut />
    <Text>Cut</Text>
  </ActionButton>
  <ActionButton>
    <Copy />
    <Text>Copy</Text>
  </ActionButton>
  <ActionButton>
    <Paste />
    <Text>Paste</Text>
  </ActionButton>
</ActionButtonGroup>
```

## API

```tsx
<ActionButtonGroup>
  <ActionButton />
</ActionButtonGroup>
```

### ActionButtonGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The children of the group. |
| `density` | `"compact" | "regular" | undefined` | "regular" | Spacing between the buttons. |
| `isDisabled` | `boolean | undefined` | — | Whether the group is disabled. |
| `isJustified` | `boolean | undefined` | — | Whether the buttons should divide the container width equally. |
| `isQuiet` | `boolean | undefined` | — | Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). |
| `orientation` | `"horizontal" | "vertical" | undefined` | 'horizontal' | The axis the group should align with. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | "M" | Size of the buttons. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the ActionButtonGroup appears over a color background. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/ActionMenu.md

# ActionMenu

ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.

```tsx
import {ActionMenu, MenuItem, Text, Keyboard} from '@react-spectrum/s2';
import Copy from '@react-spectrum/s2/icons/Copy';
import Cut from '@react-spectrum/s2/icons/Cut';
import Paste from '@react-spectrum/s2/icons/Paste';

<ActionMenu>
  <MenuItem
    textValue="Copy"
    onAction={() => alert('copy')}>
    <Copy />
    <Text slot="label">Copy</Text>
    <Text slot="description">Copy the selected text</Text>
    <Keyboard>⌘C</Keyboard>
  </MenuItem>
  <MenuItem
    textValue="Cut"
    onAction={() => alert('cut')}>
    <Cut />
    <Text slot="label">Cut</Text>
    <Text slot="description">Cut the selected text</Text>
    <Keyboard>⌘X</Keyboard>
  </MenuItem>
  <MenuItem
    textValue="Paste"
    onAction={() => alert('paste')}>
    <Paste />
    <Text slot="label">Paste</Text>
    <Text slot="description">Paste the copied text</Text>
    <Keyboard>⌘V</Keyboard>
  </MenuItem>
</ActionMenu>
```

## API

```tsx
<ActionMenu>
  <MenuItem />
</ActionMenu>
```

### ActionMenu

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"start" | "end" | undefined` | 'start' | Alignment of the menu relative to the trigger. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `direction` | `"top" | "bottom" | "start" | "end" | "left" | "right" | undefined` | 'bottom' | Where the Menu opens relative to its trigger. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the button is disabled. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `isQuiet` | `boolean | undefined` | — | Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `menuSize` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Menu. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when an item is selected. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `shouldFlip` | `boolean | undefined` | true | Whether the menu should automatically flip direction when space is limited. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the ActionButton. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Avatar.md

# Avatar

An avatar is a thumbnail representation of an entity, such as a user or an organization.

```tsx
import {Avatar} from '@react-spectrum/s2';

<Avatar />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `alt` | `string | undefined` | — | Text description of the avatar. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isOverBackground` | `boolean | undefined` | — | Whether the avatar is over a color background. |
| `size` | `28 | 16 | 20 | 24 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}) | undefined` | 24 | The size of the avatar. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `src` | `string | undefined` | — | The image URL for the avatar. |
| `styles` | `StylesPropWithoutWidth | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/AvatarGroup.md

# AvatarGroup

An avatar group is a grouping of avatars that are related to each other.

```tsx
import {AvatarGroup, Avatar} from '@react-spectrum/s2';

<AvatarGroup>
  <Avatar
    alt="Abraham Baker"
    src="https://www.untitledui.com/images/avatars/abraham-baker" />
  <Avatar
    alt="Adriana Sullivan"
    src="https://www.untitledui.com/images/avatars/adriana-sullivan" />
  <Avatar
    alt="Jonathan Kelly"
    src="https://www.untitledui.com/images/avatars/jonathan-kelly" />
  <Avatar
    alt="Zara Bush"
    src="https://www.untitledui.com/images/avatars/zara-bush" />
</AvatarGroup>
```

## API

```tsx
<AvatarGroup>
  <Avatar />
</AvatarGroup>
```

### AvatarGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | Avatar children of the avatar group. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `label` | `string | undefined` | — | The label for the avatar group. |
| `size` | `28 | 16 | 20 | 24 | 32 | 36 | 40 | undefined` | 24 | The size of the avatar group. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithoutWidth | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Badge.md

# Badge

Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.

```tsx
import {Badge} from '@react-spectrum/s2';

<Badge />
```

## API

```tsx
<Badge>
  <Icon />
  <Text />
</Badge>
```

### Badge

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `React.ReactNode` | — | The content to display in the badge. |
| `fillStyle` | `"bold" | "subtle" | "outline" | undefined` | 'bold' | The fill of the badge. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `overflowMode` | `"wrap" | "truncate" | undefined` | 'wrap' | Sets the text behavior for the contents. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'S' | The size of the badge. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"accent" | "informative" | "neutral" | "positive" | "notice" | "negative" | "gray" | "red" | "orange" | "yellow" | "chartreuse" | "celery" | "green" | "seafoam" | "cyan" | "blue" | "indigo" | "purple" | "fuchsia" | "magenta" | "pink" | "turquoise" | "brown" | "cinnamon" | "silver" | undefined` | 'neutral' | The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors. |

---

# Source: https://react-spectrum.adobe.com/Breadcrumbs.md

# Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user's location within an application.

```tsx
import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';

<Breadcrumbs>
  <Breadcrumb href="#">Home</Breadcrumb>
  <Breadcrumb href="#">React Spectrum</Breadcrumb>
  <Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>
```

## Content

`Breadcrumbs` follows the [Collection Components API](collections.md?component=Breadcrumbs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. The `onAction` event is called when a user presses a breadcrumb.

```tsx
import {Breadcrumbs, Breadcrumb, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [breadcrumbs, setBreadcrumbs] = useState([
    {id: 1, label: 'Home'},
    {id: 2, label: 'Library'},
    {id: 3, label: 'Documents'},
    {id: 4, label: 'Annual Reports'}
  ]);

  let navigate = (id: Key) => {
    let i = breadcrumbs.findIndex(item => item.id === id);
    setBreadcrumbs(breadcrumbs.slice(0, i + 1));
  };

  return (
    /*- begin highlight -*/
    <Breadcrumbs items={breadcrumbs} onAction={navigate}>
      {item => <Breadcrumb>{item.label}</Breadcrumb>}
    </Breadcrumbs>
    /*- end highlight -*/
  );
}
```

<InlineAlert variant="notice">
  <Heading>Accessibility</Heading>
  <Content>When breadcrumbs are used as a main navigation element for a page, they can be placed in a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation). Landmarks help assistive technology users quickly find major sections of a page. Place breadcrumbs inside a `<nav>` element with an `aria-label` to create a navigation landmark.</Content>
</InlineAlert>

### Overflow Behavior

Breadcrumbs automatically collapse items into a menu when space is limited. A maximum of 4 items are shown including the root and menu button.

```tsx
import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 400,
    maxWidth: 'full',
    padding: 16,
    boxSizing: 'border-box',
    borderWidth: 1,
    borderStyle: 'solid', 
    borderColor: 'gray-300',
    borderRadius: 'default',
    resize: 'horizontal',
    overflow: 'hidden'
  })}>
  {/*- begin focus -*/}
  <Breadcrumbs>
    <Breadcrumb>Documents</Breadcrumb>
    <Breadcrumb>My Shared Folder</Breadcrumb>
    <Breadcrumb>Projects and Workflows</Breadcrumb>
    <Breadcrumb>Annual Reports 2024</Breadcrumb>
    <Breadcrumb>Marketing Materials</Breadcrumb>
    <Breadcrumb>Q3 Campaign Assets</Breadcrumb>
    <Breadcrumb>Final Deliverables</Breadcrumb>
  </Breadcrumbs>
  {/*- end focus -*/}
</div>
```

## API

```tsx
<Breadcrumbs>
  <Breadcrumb />
</Breadcrumbs>
```

### Breadcrumbs

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The children of the Breadcrumbs. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the breadcrumbs are disabled. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when a breadcrumb is clicked. |
| `size` | `"M" | "L" | undefined` | 'M' | Size of the Breadcrumbs including spacing and layout. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### Breadcrumb

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The children of the breadcrumb item. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |

---

# Source: https://react-spectrum.adobe.com/Button.md

# Button

Buttons allow users to perform an action.
They have multiple styles for various needs, and are ideal for calling attention to
where a user needs to do something in order to move forward in a flow.

```tsx
import {Button} from '@react-spectrum/s2';

<Button />
```

## Events

Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button.

```tsx
import {Button} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [count, setCount] = useState(0);

  return (
    /*- begin highlight -*/
    <Button onPress={() => setCount(c => c + 1)}>
    {/*- end highlight -*/}
      {`${count} Edits`}
    </Button>
  );
}
```

## Pending

Use the `isPending` prop to display a pending state. Pending buttons remain focusable, but are otherwise disabled. After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.

```tsx
import {Button} from '@react-spectrum/s2';
import {useState} from 'react';

function PendingButton() {
  let [isPending, setPending] = useState(false);

  return (
    <Button
      variant="primary"
      isPending={isPending}
      onPress={() => {
        setPending(true);
        setTimeout(() => {
          setPending(false);
        }, 5000);
      }}>
      Save
    </Button>
  );
}
```

## API

```tsx
<Button>
  <Icon />
  <Text />
</Button>
```

### Button

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-current` | `boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined` | — | Indicates whether this element represents the current item within a container or set of related elements. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-disabled` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element is disabled to users of assistive technology. |
| `aria-expanded` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined` | — | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `aria-pressed` | `boolean | "true" | "false" | "mixed" | undefined` | — | Indicates the current "pressed" state of toggle buttons. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The content to display in the Button. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `fillStyle` | `"outline" | "fill" | undefined` | 'fill' | The background style of the Button. |
| `form` | `string | undefined` | — | The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| `formAction` | `string | undefined` | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
| `formEncType` | `string | undefined` | — | Indicates how to encode the form data that is submitted. |
| `formMethod` | `string | undefined` | — | Indicates the HTTP method used to submit the form. |
| `formNoValidate` | `boolean | undefined` | — | Indicates that the form is not to be validated when it is submitted. |
| `formTarget` | `string | undefined` | — | Overrides the target attribute of the button's form owner. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the button is disabled. |
| `isPending` | `boolean | undefined` | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
| `name` | `string | undefined` | — | Submitted as a pair with the button's value as part of the form data. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `preventFocusOnPress` | `boolean | undefined` | — | Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Button. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the Button appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `type` | `"button" | "submit" | "reset" | undefined` | 'button' | The behavior of the button when used in an HTML form. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | undefined` | — | The value associated with the button's name when it's submitted with the form data. |
| `variant` | `"accent" | "negative" | "primary" | "secondary" | "premium" | "genai" | undefined` | 'primary' | The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. |

---

# Source: https://react-spectrum.adobe.com/ButtonGroup.md

# ButtonGroup

ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.

```tsx
import {ButtonGroup, Button} from '@react-spectrum/s2';

<ButtonGroup>
  <Button variant="primary">Rate Now</Button>
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
</ButtonGroup>
```

## Overflow

When horizontal space is limited, ButtonGroup switches to a vertical layout.

```tsx
import {ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 300,
    maxWidth: 'full',
    padding: 16,
    boxSizing: 'border-box',
    borderWidth: 1,
    borderStyle: 'solid', 
    borderColor: 'gray-300',
    borderRadius: 'default',
    resize: 'horizontal',
    overflow: 'hidden'
  })}>
  {/*- begin focus -*/}
  <ButtonGroup>
    <Button variant="primary">Rate Now</Button>
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
  </ButtonGroup>
  {/*- end focus -*/}
</div>
```

## API

```tsx
<ButtonGroup>
  <Button />
  <LinkButton />
</ButtonGroup>
```

### ButtonGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"center" | "start" | "end" | undefined` | 'start' | The alignment of the Buttons within the ButtonGroup. |
| `children` | `ReactNode` | — | The Buttons contained within the ButtonGroup. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the Buttons in the ButtonGroup are all disabled. |
| `orientation` | `"horizontal" | "vertical" | undefined` | 'horizontal' | The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent any switching behaviors between 'vertical' and 'horizontal'. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Buttons within the ButtonGroup. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Calendar.md

# Calendar

Calendars display a grid of days in one or more months and allow users to select a single date.

```tsx
import {Calendar} from '@react-spectrum/s2';

<Calendar />
```

## Value

Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

```tsx
import {parseDate, getLocalTimeZone} from '@internationalized/date';
import {Calendar} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [date, setDate] = useState(parseDate('2020-02-03'));
  
  return (
    <>
      <Calendar
        value={date}
        onChange={setDate}
      />
      <p>Selected date: {date.toDate(getLocalTimeZone()).toLocaleDateString()}</p>
    </>
  );
}
```

### International calendars

By default, `Calendar` displays the value using the calendar system for the user's locale. Use `<Provider>` to override the calendar system by setting the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string). The `onChange` event always receives a date in the same calendar as the `value` or `defaultValue` (Gregorian if no value is provided), regardless of the displayed locale.

```tsx
import {Provider, Calendar} from '@react-spectrum/s2';
import {parseDate} from '@internationalized/date';

<Provider>
  <Calendar defaultValue={parseDate('2025-02-03')} />
</Provider>
```

### Custom calendar systems

`Calendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the [@internationalized/date docs](react-aria:internationalized/date/Calendar.md#custom-calendars) for an example implementation.

```tsx
import type {AnyCalendarDate} from '@internationalized/date';
import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
import {Calendar} from '@react-spectrum/s2';

export default function Example() {
  return (
    <Calendar
      firstDayOfWeek="sun"
      createCalendar={() => new Custom454()} />
  );
}

// See @internationalized/date docs linked above.
class Custom454 extends GregorianCalendar {
  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
  getDaysInMonth(date) {
    return this.weekPattern[date.month - 1] * 7;
  }

  fromJulianDay(jd: number): CalendarDate {
    let gregorian = super.fromJulianDay(jd);

    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
    for (let months = 0; months < this.weekPattern.length; months++) {
      let weeksInMonth = this.weekPattern[months];
      let monthEnd = monthStart.add({weeks: weeksInMonth});
      if (monthEnd.compare(gregorian) > 0) {
        let days = gregorian.compare(monthStart);
        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
      }
      monthStart = monthEnd;
    }

    throw Error('Date is not in any month somehow!');
  }

  toJulianDay(date: AnyCalendarDate): number {
    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
    for (let month = 1; month < date.month; month++) {
      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
    }

    let gregorian = monthStart.add({days: date.day - 1});
    return super.toJulianDay(gregorian);
  }

  getFormattableMonth(date) {
    let gregorian = toCalendar(date, new GregorianCalendar());
    return gregorian.set({month: date.month, day: 1});
  }

  isEqual(other) {
    return other instanceof Custom454;
  }
}
```

## Validation

Use the `minValue` and `maxValue` props to set the valid date range. The `isDateUnavailable` callback prevents certain dates from being selected. For custom validation rules, set the `isInvalid` and `errorMessage` props.

```tsx
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {Calendar, useLocale} from '@react-spectrum/s2';

function Example(props) {
  let {locale} = useLocale();
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  return (
    <Calendar
      {...props}
      aria-label="Appointment date"
      
      minValue={today(getLocalTimeZone())}
      isDateUnavailable={date => (
        isWeekend(date, locale) ||
        disabledRanges.some((interval) =>
          date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
        )
      )} />
  );
}
```

## Controlling the focused date

Use the `focusedValue` or `defaultFocusedValue` prop to control which date is focused. This controls which month is visible. The `onFocusChange` event is called when a date is focused by the user.

```tsx
import {Calendar, ActionButton} from '@react-spectrum/s2';
import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let defaultDate = new CalendarDate(2021, 7, 1);
  let [focusedDate, setFocusedDate] = useState(defaultDate);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
      <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
        Today
      </ActionButton>
      <Calendar
        focusedValue={focusedDate}
        onFocusChange={setFocusedDate}
      />
    </div>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | false | Whether to automatically focus the calendar when it mounts. |
| `createCalendar` | `((identifier: CalendarIdentifier) => Calendar) | undefined` | — | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| `defaultFocusedValue` | `DateValue | null | undefined` | — | The date that is focused when the calendar first mounts (uncontrolled). |
| `defaultValue` | `T | null | undefined` | — | The default value (uncontrolled). |
| `errorMessage` | `React.ReactNode` | — | The error message to display when the calendar is invalid. |
| `firstDayOfWeek` | `"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | undefined` | — | The day that starts the week. |
| `focusedValue` | `DateValue | null | undefined` | — | Controls the currently focused date within the calendar. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDateUnavailable` | `((date: DateValue) => boolean) | undefined` | — | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| `isDisabled` | `boolean | undefined` | false | Whether the calendar is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the current selection is invalid according to application logic. |
| `isReadOnly` | `boolean | undefined` | false | Whether the calendar value is immutable. |
| `maxValue` | `DateValue | null | undefined` | — | The maximum allowed date that a user may select. |
| `minValue` | `DateValue | null | undefined` | — | The minimum allowed date that a user may select. |
| `onChange` | `((value: MappedDateValue<T>) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocusChange` | `((date: CalendarDate) => void) | undefined` | — | Handler that is called when the focused date changes. |
| `pageBehavior` | `PageBehavior | undefined` | visible | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
| `selectionAlignment` | `"center" | "start" | "end" | undefined` | 'center' | Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `T | null | undefined` | — | The current value (controlled). |
| `visibleMonths` | `number | undefined` | 1 | The number of months to display at once. |

---

# Source: https://react-spectrum.adobe.com/Card.md

# Card

A Card summarizes an object that a user can select or navigate to.

```tsx
import {Card, CardPreview, Image, Content, Text, ActionMenu, MenuItem, Footer, StatusLight} from '@react-spectrum/s2';
import preview from 'url:./assets/preview.png';

<Card>
  <CardPreview>
    <Image src={preview} />
  </CardPreview>
  <Content>
    <Text slot="title">Card title</Text>
    <ActionMenu>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Share</MenuItem>
      <MenuItem>Delete</MenuItem>
    </ActionMenu>
    <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
  </Content>
  <Footer>
    <StatusLight size="S" variant="positive">Published</StatusLight>
  </Footer>
</Card>
```

## Content

Cards are flexible containers that represent objects a user can select or navigate to. Most cards include a preview, metadata, and an optional footer. Spectrum includes several pre-defined card components with layouts for specific use cases, or you can combine these sections to create custom cards.

### Asset

A `AssetCard` represents an asset such as an image, video, document, or folder. The `CardPreview` can contain either an `Image` or illustration. By default, images are displayed in a square preview without cropping. Add metadata in the `Content` section using the `title` and `description` slots.

## S2 example

```tsx
import {AssetCard, CardPreview, Image, Content, Text, ActionMenu, MenuItem} from '@react-spectrum/s2';

<AssetCard>
  <CardPreview>
    <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </CardPreview>
  <Content>
    <Text slot="title">Desert Sunset</Text>
    <ActionMenu>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Share</MenuItem>
      <MenuItem>Delete</MenuItem>
    </ActionMenu>
    <Text slot="description">PNG • 2/3/2024</Text>
  </Content>
</AssetCard>
```

```tsx
import {AssetCard, CardPreview, Content, Text, ActionMenu, MenuItem} from '@react-spectrum/s2';
import FolderGradient from '@react-spectrum/s2/illustrations/gradient/generic2/FolderClose';

<AssetCard>
  <CardPreview>
    <FolderGradient />
  </CardPreview>
  <Content>
    <Text slot="title">Projects</Text>
    <ActionMenu>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Share</MenuItem>
      <MenuItem>Delete</MenuItem>
    </ActionMenu>
    <Text slot="description">10 items • 6/14/2024</Text>
  </Content>
</AssetCard>
```

### User

A `UserCard` represents a user profile. It includes an [Avatar](Avatar.md) and a `Content` section with `title` and `description` slots, along with an optional header image and `Footer`.

```tsx
import {UserCard, CardPreview, Image, Avatar, Content, Text, Footer, StatusLight} from '@react-spectrum/s2';
import preview from 'url:./assets/preview.png';

<UserCard>
  <CardPreview>
    <Image src={preview} />
  </CardPreview>
  <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
  <Content>
    <Text slot="title">Simone Carter</Text>
    <Text slot="description">Art Director at Luma Creative Studios. Visual storyteller and coffee enthusiast.</Text>
  </Content>
  <Footer>
    <StatusLight size="S" variant="positive">Available</StatusLight>
  </Footer>
</UserCard>
```

### Product

A `ProductCard` represents a product a user can take action on. It has a a thumbnail image and a `Content` section with `title` and `description` slots, a `Footer` containing a call to action, and an optional header image.

```tsx
import {ProductCard, CardPreview, Image, Content, Text, Footer, Button} from '@react-spectrum/s2';
import preview from 'url:./assets/preview.png';
import logo from 'url:./assets/logo.svg';

<ProductCard>
  <CardPreview>
    <Image slot="preview" src={preview} />
  </CardPreview>
  <Image slot="thumbnail" src={logo} />
  <Content>
    <Text slot="title">Command + R</Text>
    <Text slot="description">Your all-in-one shortcut for apps, automations, and devices.</Text>
  </Content>
  <Footer>
    <Button variant="primary">Buy now</Button>
  </Footer>
</ProductCard>
```

### Collection

A `CollectionCardPreview` displays up to 4 images in a collection of assets. When 4 images are provided, the first one is displayed as a larger hero image.

```tsx
import {Card, CollectionCardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Folder from '@react-spectrum/s2/icons/Folder';

<Card>
  <CollectionCardPreview>
    <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </CollectionCardPreview>
  <Content>
    <Text slot="title">Travel</Text>
    <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
      <Folder />
      <Text slot="description">20 photos</Text>
    </div>
  </Content>
</Card>
```

### Gallery

A card can omit its `Content` section and display only a preview to create a gallery card typically seen in a waterfall layout. Ensure that the preview image has `alt` text, and any content placed above the preview has enough contrast against the background.

```tsx
import {Card, CardPreview, Image, Badge, Avatar} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Card>
  <CardPreview>
    <Image
      alt="Narrow mountain trail with green grass and sharp peaks in the background"
      src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
    <Badge
      variant="yellow"
      styles={style({
        position: 'absolute',
        top: 16,
        insetEnd: 16
      })}>
      Free
    </Badge>
    <Avatar
      src="https://i.imgur.com/xIe7Wlb.png"
      size={24}
      isOverBackground
      styles={style({
        position: 'absolute',
        bottom: 16,
        insetStart: 16
      })} />
  </CardPreview>
</Card>
```

### Custom

Combine the `CardPreview`, `Content`, and `Footer` components to create custom cards. Add additional elements and styles within these sections to create custom layouts as needed.

```tsx
import {Card, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Select from '@react-spectrum/s2/icons/Select';

<Card>
  <CardPreview>
    <Image
      alt=""
      src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </CardPreview>
  <Content>
    <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
      <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
        <Select />
        <Text slot="description">Click through rate</Text>
      </div>
      <div className={style({display: 'flex', flexDirection: 'column'})}>
        <Text styles={style({font: 'title-xl'})}>1.012%</Text>
        <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
      </div>
    </div>
  </Content>
</Card>
```

## Skeleton

Wrap a card in a [Skeleton](Skeleton.md) to display a loading state. Placeholder text content and images are displayed in a skeleton style.

```tsx
import {Skeleton, Card, CardPreview, Image, Content, Text} from '@react-spectrum/s2';

<Skeleton isLoading>
  <Card>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </CardPreview>
    <Content>
      <Text slot="title">Placeholder title</Text>
      <Text slot="description">This is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.</Text>
    </Content>
  </Card>
</Skeleton>
```

## API

### Card

```tsx
<Card>
  <CardPreview>
    <Image /> or <Illustration />
  </CardView>
  <Content>
    <Text slot="title" />
    <ActionMenu />
    <Text slot="description" />
  </Content>
  <Footer />
</Card>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode | ((renderProps: CardRenderProps) => ReactNode)` | — | The children of the Card. |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of internal padding within the Card. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the Card. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |
| `variant` | `"primary" | "secondary" | "tertiary" | "quiet" | undefined` | 'primary' | The visual style of the Card. |

### AssetCard

```tsx
<AssetCard>
  <CardPreview>
    <Image /> or <Illustration />
  </CardView>
  <Content>
    <Text slot="title" />
    <ActionMenu />
    <Text slot="description" />
  </Content>
</AssetCard>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode | ((renderProps: CardRenderProps) => ReactNode)` | — | The children of the Card. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the Card. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |
| `variant` | `"primary" | "secondary" | "tertiary" | "quiet" | undefined` | 'primary' | The visual style of the Card. |

### UserCard

```tsx
<UserCard>
  <CardPreview>
    <Image />
  </CardView>
  <Avatar />
  <Content>
    <Text slot="title" />
    <ActionMenu />
    <Text slot="description" />
  </Content>
  <Footer />
</UserCard>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode | ((renderProps: CardRenderProps) => ReactNode)` | — | The children of the Card. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the Card. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |
| `variant` | `"primary" | "secondary" | "tertiary" | undefined` | — | The visual style of the Card. |

### ProductCard

```tsx
<ProductCard>
  <CardPreview>
    <Image slot="preview" />
  </CardView>
  <Image slot="thumbnail" />
  <Content>
    <Text slot="title" />
    <ActionMenu />
    <Text slot="description" />
  </Content>
  <Footer>
    <Button /> or <LinkButton />
  </Footer>
</ProductCard>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode | ((renderProps: CardRenderProps) => ReactNode)` | — | The children of the Card. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the Card. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |
| `variant` | `"primary" | "secondary" | "tertiary" | undefined` | — | The visual style of the Card. |

---

# Source: https://react-spectrum.adobe.com/CardView.md

# CardView

A CardView displays a group of related objects, with support for selection and bulk actions.

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<CardView
  aria-label="Nature photos"
  
  styles={style({width: 'full', height: 500})}>
  {/*- begin collapse -*/}
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
    </CardPreview>
    <Content>
      <Text slot="title">Desert Sunset</Text>
      <Text slot="description">PNG • 2/3/2024</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Hiking Trail</Text>
      <Text slot="description">JPEG • 1/10/2022</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
    </CardPreview>
    <Content>
      <Text slot="title">Lion</Text>
      <Text slot="description">JPEG • 8/28/2021</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Mountain Sunrise</Text>
      <Text slot="description">PNG • 3/15/2015</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Giraffe tongue</Text>
      <Text slot="description">PNG • 11/27/2019</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
    </CardPreview>
    <Content>
      <Text slot="title">Golden Hour</Text>
      <Text slot="description">WEBP • 7/24/2024</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Architecture</Text>
      <Text slot="description">PNG • 12/24/2016</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
    </CardPreview>
    <Content>
      <Text slot="title">Peeking leopard</Text>
      <Text slot="description">JPEG • 3/2/2016</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Roofs</Text>
      <Text slot="description">JPEG • 4/24/2025</Text>
    </Content>
  </AssetCard>
  <AssetCard>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} />
    </CardPreview>
    <Content>
      <Text slot="title">Half Dome Deer</Text>
      <Text slot="description">DNG • 8/28/2018</Text>
    </Content>
  </AssetCard>
  {/*- end collapse -*/}
</CardView>
```

## Content

`CardView` follows the [Collection Components API](collections.md?component=CardView), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a recursive function to render the children.

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

let images = [
  {
    id: "8SXaMMWCTGc",
    title: "A Ficus Lyrata Leaf in the sunlight (2/2) (IG: @clay.banks)",
    user: "Clay Banks",
    image: "https://images.unsplash.com/photo-1580133318324-f2f76d987dd8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "pYjCqqDEOFo",
    title: "beach of Italy",
    user: "alan bajura",
    image: "https://images.unsplash.com/photo-1737100522891-e8946ac97fd1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "CF-2tl6MQj0",
    title: "A winding road in the middle of a forest",
    user: "Artem Stoliar",
    image: "https://images.unsplash.com/photo-1738249034651-1896f689be58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 300
  },
  {
    id: "OW97sLU0cOw",
    title: "A green and purple aurora over a snow covered forest",
    user: "Janosch Diggelmann",
    image: "https://images.unsplash.com/photo-1738189669835-61808a9d5981?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "WfeLZ02IhkM",
    title: "A blue and white firework is seen from above",
    user: "Janosch Diggelmann",
    image: "https://images.unsplash.com/photo-1738168601630-1c1f3ef5a95a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 300
  },
  {
    id: "w1GpST72Bg8",
    title: "A snow covered mountain with a sky background",
    user: "Daniil Silantev",
    image: "https://images.unsplash.com/photo-1738165170747-ecc6e3a4d97c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 267
  },
  {
    id: "0iN0KIt6lYI",
    title: "\"Pastel Sunset\"",
    user: "Marek Piwnicki",
    image: "https://images.unsplash.com/photo-1737917818689-f3b3708de5d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 640
  },
  {
    id: "-mFKPfXXUG0",
    title: "Leave the weight behind! You must make yourself light to strive upwards — to reach the light. (A serene winter landscape featuring a dense collection of bare, white trees.)",
    user: "Simon Berger",
    image: "https://images.unsplash.com/photo-1737972970322-cc2e255021bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 400
  },
  {
    id: "MOk6URQ28R4",
    title: "A snow covered tree with a sky background",
    user: "Daniil Silantev",
    image: "https://images.unsplash.com/photo-1738081359113-a7a33c509cf9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "y36Nj_edtRE",
    title: "A lake surrounded by trees covered in snow",
    user: "Daniel Seßler",
    image: "https://images.unsplash.com/photo-1736018545810-3de4c7ec25fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "NvBV-YwlgBw",
    title: "The night sky with stars above a rock formation",
    user: "Dennis Haug",
    image: "https://images.unsplash.com/photo-1735528655501-cf671a3323c3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 400
  },
  {
    id: "UthQdrPFxt0",
    title: "A pine tree covered in snow in a forest",
    user: "Anita Austvika",
    image: "https://images.unsplash.com/photo-1737312905026-5dfdff1097bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "2k74xaf8dfc",
    title: "The sun shines through the trees in the forest",
    user: "Joyce G",
    image: "https://images.unsplash.com/photo-1736185597807-371cae1c7e4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "Yje5kgfvCm0",
    title: "A blurry photo of a field of flowers",
    user: "Eugene Golovesov",
    image: "https://images.unsplash.com/photo-1736483065204-e55e62092780?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "G2bsj2LVttI",
    title: "A foggy road lined with trees and grass",
    user: "Ingmar H",
    image: "https://images.unsplash.com/photo-1737903071772-4d20348b4d81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 533
  },
  {
    id: "ppyNBOkfiuY",
    title: "A close up of a green palm tree",
    user: "Junel Mujar",
    image: "https://images.unsplash.com/photo-1736849544918-6ddb5cfc2c42?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 533
  },
  {
    id: "UcWUMqIsld8",
    title: "A green leaf floating on top of a body of water",
    user: "Allec Gomes",
    image: "https://images.unsplash.com/photo-1737559217439-a5703e9b65cb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "xHqOVq9w8OI",
    title: "green-leafed plant",
    user: "Joshua Michaels",
    image: "https://images.unsplash.com/photo-1563364664-399838d1394c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 266
  },
  {
    id: "uWx3_XEc-Jw",
    title: "A view of a mountain covered in fog",
    user: "iuliu illes",
    image: "https://images.unsplash.com/photo-1737403428945-c584529b7b17?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 298
  },
  {
    id: "2_3lhGt8i-Y",
    title: "A field with tall grass and fog in the background",
    user: "Ingmar H",
    image: "https://images.unsplash.com/photo-1737439987404-a3ee9fb95351?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "FV-__IOxb08",
    title: "A close up of a wave on a sandy beach",
    user: "Jonathan Borba",
    image: "https://images.unsplash.com/photo-1726502102472-2108ef2a5cae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "_BS-vK3boOU",
    title: "Desert textures",
    user: "Braden Jarvis",
    image: "https://images.unsplash.com/photo-1722359546494-8e3a00f88e95?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 561
  },
  {
    id: "LjAcS9lJdBg",
    title: "Tew Falls, waterfall, in Hamilton, Canada.",
    user: "Andre Portolesi",
    image: "https://images.unsplash.com/photo-1705021246536-aecfad654893?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 500
  },
  {
    id: "hlj6xJG30FE",
    title: "Find me on Instagram! @intricateexplorer",
    user: "Intricate Explorer",
    image: "https://images.unsplash.com/photo-1631641551473-fbe46919289d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 267
  },
  {
    id: "vMoZvKeZOhw",
    title: "Salt Marshes, Isle of Harris, Scotland by Nils Leonhardt. Visit my website: https://nilsleonhardt.com/storytelling-harris/ Instagram: @am.basteir",
    user: "Nils Leonhardt",
    image: "https://images.unsplash.com/photo-1585951301678-8fd6f3b32c7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "wCLCK9LDDjI",
    title: "An aerial view of a snow covered forest",
    user: "Lukas Hädrich",
    image: "https://images.unsplash.com/photo-1737405555489-78b3755eaa81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 267
  },
  {
    id: "OdDx3_NB-Wk",
    title: "A close up of a tall grass with a sky in the background",
    user: "Ingmar H",
    image: "https://images.unsplash.com/photo-1737301519296-062cd324dbfa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "Gn-FOw1geFc",
    title: "Larches on Maple Pass, Washington",
    user: "noelle",
    image: "https://images.unsplash.com/photo-1737496538329-a59d10148a08?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  },
  {
    id: "VhKJHOz2tJ8",
    title: "IC 1805 La nébuleuse du coeur",
    user: "arnaud girault",
    image: "https://images.unsplash.com/photo-1737478598284-b9bc11cb1e9b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 266
  },
  {
    id: "w5QmH_uqB0U",
    title: "A pile of shells sitting on top of a sandy beach",
    user: "Toa Heftiba",
    image: "https://images.unsplash.com/photo-1725366351350-a64a1be919ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
    width: 400,
    height: 600
  }
];

for (let i = 0; images.length < 200; i++) {
  images.push({...images[i % 30], id: String(i)});
}

<CardView
  aria-label="Nature photos"
  styles={style({width: 'full', height: 500})}
  layout="waterfall"
  size="S"
  /*- begin highlight -*/
  items={images}>
  {/*- end highlight -*/}
  {image => (
    <AssetCard>
      <CardPreview>
        <Image src={image.image} width={image.width} height={image.height} />
      </CardPreview>
      <Content>
        <Text slot="title">{image.title}</Text>
        <Text slot="description">{image.user}</Text>
      </Content>
    </AssetCard>
  )}
</CardView>
```

### Asynchronous loading

Use the `loadingState` and `onLoadMore` props to enable async loading and infinite scrolling. When loading, render a `<SkeletonCollection>` to generate placeholder content to display as skeleton cards.

```tsx
import {CardView, Collection, SkeletonCollection, Card, CardPreview, Image, Content, Text, Avatar, useAsyncList} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

type Item = {
  id: string;
  description?: string;
  alt_description?: string;
  urls: {regular: string};
  width: number;
  height: number;
  user: {name: string; profile_image: {small: string}};
};

export default function Example(props) {
  let list = useAsyncList<Item, number | null>({
    async load({signal, cursor, items}) {
      let page = cursor || 1;
      let res = await fetch(
        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
        {signal}
      );
      let nextItems = await res.json();
      // Filter duplicates which might be returned by the API.
      let existingKeys = new Set(items.map(i => i.id));
      nextItems = nextItems.filter(i => !existingKeys.has(i.id) && (i.description || i.alt_description));
      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
    }
  });

  let loadingState = props.loadingState || list.loadingState;

  return (
    <CardView
      aria-label="Nature photos"
      size="S"
      layout="waterfall"
      loadingState={loadingState}
      onLoadMore={props.loadingState ? undefined : list.loadMore}
      styles={style({width: 'full', height: 500})}>
      <Collection items={loadingState === 'loading' ? [] : list.items}>
        {item => <PhotoCard item={item} layout={props.layout || 'waterfall'} />}
      </Collection>
      {(loadingState === 'loading' || loadingState === 'loadingMore') && (
        /*- begin highlight -*/
        <SkeletonCollection>
        {/*- end highlight -*/}
          {() => (
            <PhotoCard
              item={{
                id: String(Math.random()),
                user: {name: 'Placeholder name', profile_image: {small: ''}},
                urls: {regular: ''},
                description: 'This is a fake description. Kinda long so it wraps to a new line.',
                alt_description: '',
                width: 400,
                height: 200 + Math.max(0, Math.round(Math.random() * 400))
              }}
              layout={props.layout || 'waterfall'} />
          )}
        </SkeletonCollection>
      )}
    </CardView>
  );
}

function PhotoCard({item, layout}: {item: Item, layout: string}) {
  return (
    <Card id={item.id} textValue={item.description || item.alt_description}>
      {({size}) => (<>
        <CardPreview>
          <Image
            src={item.urls.regular}
            width={item.width}
            height={item.height}
            styles={style({
              width: 'full',
              pointerEvents: 'none',
              objectFit: 'cover'
            })} />
        </CardPreview>
        <Content>
          <Text slot="title">{item.description || item.alt_description}</Text>
          <div className={style({display: 'flex', alignItems: 'center', gap: 8, gridArea: 'description'})}>
            <Avatar src={item.user.profile_image.small} size={size === 'S' ? 24 : size === 'M' ? 32 : size === 'L' ? 40 : 32} />
            <Text slot="description">{item.user.name}</Text>
          </div>
        </Content>
      </>)}
    </Card>
  );
}
```

### Links

Use the `href` prop on a Card to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection.md) for more details.

```tsx
import {CardView, Card, CollectionCardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Folder from '@react-spectrum/s2/icons/Folder';

let topics = [
  {
    "id": "bo8jQKTaE0Y",
    "href": "https://unsplash.com/t/wallpapers",
    "photos": [
      {
        "id": "pH6ff1GpUMo",
        "src": "https://plus.unsplash.com/premium_photo-1700558685040-a75735b86bb7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "CPjNU3ChRl4",
        "src": "https://images.unsplash.com/photo-1756187793625-4a29fef1f4f8?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "G-5JCERzbE8",
        "src": "https://images.unsplash.com/photo-1755838692094-49a97b9fb9ab?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "KAyZPC_Q5YM",
        "src": "https://images.unsplash.com/photo-1755997234962-931d86bee287?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Wallpapers",
    "count": 16689
  },
  {
    "id": "6sMVjTLSkeQ",
    "href": "https://unsplash.com/t/nature",
    "photos": [
      {
        "id": "G-5JCERzbE8",
        "src": "https://images.unsplash.com/photo-1755838692094-49a97b9fb9ab?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "I8vmQEZDhM0",
        "src": "https://plus.unsplash.com/premium_photo-1678483692858-d9ca6e9c67f9?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "puQ8iqUvs9o",
        "src": "https://images.unsplash.com/photo-1756129725795-127bef414c6c?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "KAyZPC_Q5YM",
        "src": "https://images.unsplash.com/photo-1755997234962-931d86bee287?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Nature",
    "count": 32010
  },
  {
    "id": "Fzo3zuOHN6w",
    "href": "https://unsplash.com/t/travel",
    "photos": [
      {
        "id": "ghMslmoI6Sk",
        "src": "https://plus.unsplash.com/premium_photo-1756175546675-f55b02bfa6e2?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "BQUtnTW8wVk",
        "src": "https://images.unsplash.com/photo-1756155062023-524adfefb747?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "Ngj2u4PHjBY",
        "src": "https://images.unsplash.com/photo-1755877379664-2f809909cbec?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "xWArdKbfrpw",
        "src": "https://images.unsplash.com/photo-1755878008095-37b948fd2770?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Travel",
    "count": 9434
  },
  {
    "id": "hmenvQhUmxM",
    "href": "https://unsplash.com/t/film",
    "photos": [
      {
        "id": "2bdJqBj0MI8",
        "src": "https://images.unsplash.com/photo-1691055712387-28587d0e7088?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "OOS7uVLLCk0",
        "src": "https://images.unsplash.com/photo-1691055712477-7f4dea1c6faa?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "lQ2XoRRX9Q0",
        "src": "https://plus.unsplash.com/premium_photo-1751921504814-6259b4fa5df7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "znGu7rwagmk",
        "src": "https://images.unsplash.com/photo-1755867395694-97a254aaa314?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Film",
    "count": 12201
  },
  {
    "id": "towJZFskpGg",
    "href": "https://unsplash.com/t/people",
    "photos": [
      {
        "id": "AcgICnidawU",
        "src": "https://plus.unsplash.com/premium_photo-1755938644663-3d697c1b6eb0?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "qkkWjOHIgrk",
        "src": "https://images.unsplash.com/photo-1755529905229-e0536cf889d7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "BQUtnTW8wVk",
        "src": "https://images.unsplash.com/photo-1756155062023-524adfefb747?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "9c8ymKQ6mRc",
        "src": "https://images.unsplash.com/photo-1755542366683-282c366982a1?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "People",
    "count": 13356
  },
  {
    "id": "M8jVbLbTRws",
    "href": "https://unsplash.com/t/architecture-interior",
    "photos": [
      {
        "id": "gUDpShSl1qU",
        "src": "https://plus.unsplash.com/premium_photo-1733054181243-d908a10d666e?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "x5UifGqA5NE",
        "src": "https://images.unsplash.com/photo-1755669933959-377ab117bb8a?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "hGwY0X_afOw",
        "src": "https://images.unsplash.com/photo-1755018237290-e2c1b65b3dd0?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "xgOabz-pz1k",
        "src": "https://images.unsplash.com/photo-1753596109566-feccd5cd1ff8?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Architecture & Interiors",
    "count": 18937
  },
  {
    "id": "xHxYTMHLgOc",
    "href": "https://unsplash.com/t/street-photography",
    "photos": [
      {
        "id": "Wv-0I3ft3DQ",
        "src": "https://plus.unsplash.com/premium_photo-1748783614194-ee4f9c017a7e?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "cOT7dI7Tt2k",
        "src": "https://images.unsplash.com/photo-1756135886621-58fbd0c924fb?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "u84fzygfTlo",
        "src": "https://images.unsplash.com/photo-1755977546165-1d4e955ff63e?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "6ht6ysje16U",
        "src": "https://images.unsplash.com/photo-1736595628509-da51701804f6?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Street Photography",
    "count": 13157
  },
  {
    "id": "upmleWZC83Y",
    "href": "https://unsplash.com/t/patterns",
    "photos": [
      {
        "id": "ha0NjEvPq7g",
        "src": "https://plus.unsplash.com/premium_vector-1752071909053-843cc5180171?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "geqxnWVZkpY",
        "src": "https://images.unsplash.com/vector-1753790541089-1a7aba4523ce?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "eyhWE-fPPLY",
        "src": "https://plus.unsplash.com/premium_vector-1734281622914-590e005ba22a?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "lhQmfqOtaOs",
        "src": "https://images.unsplash.com/vector-1751865858655-a876e394d7a7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Patterns",
    "count": 570
  },
  {
    "id": "S4MKLAsBB74",
    "href": "https://unsplash.com/t/fashion-beauty",
    "photos": [
      {
        "id": "YzoJ0OMY4HE",
        "src": "https://plus.unsplash.com/premium_photo-1755004629206-20d15cea7aa4?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "Leh7iPE0bKY",
        "src": "https://images.unsplash.com/photo-1629960414183-fba0e2e137e7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "RWLTHuxCqYo",
        "src": "https://images.unsplash.com/photo-1754555009599-9f0d848748e7?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "KPLjHKBoLqM",
        "src": "https://images.unsplash.com/photo-1753549839629-2eb4f552e0e6?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Fashion & Beauty",
    "count": 10413
  },
  {
    "id": "aeu6rL-j6ew",
    "href": "https://unsplash.com/t/business-work",
    "photos": [
      {
        "id": "pQjoH4COskY",
        "src": "https://images.unsplash.com/photo-1749880164389-e14710d2f397?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "CRuEm_IEC3I",
        "src": "https://images.unsplash.com/photo-1650029609434-55bbbb38ab5c?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "nWb7Jxh5hxE",
        "src": "https://images.unsplash.com/photo-1743343852416-e5eec987a627?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "xGklNeRfBK8",
        "src": "https://images.unsplash.com/photo-1744686959591-eaaec00c999c?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Business & Work",
    "count": 7071
  },
  {
    "id": "xjPR4hlkBGA",
    "href": "https://unsplash.com/t/food-drink",
    "photos": [
      {
        "id": "yvEl8b1EIeA",
        "src": "https://images.unsplash.com/photo-1755605983542-a525a0975a25?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "erJuRsCRB2E",
        "src": "https://images.unsplash.com/photo-1755004609214-c252674df1ca?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "JJZrip9P_5k",
        "src": "https://images.unsplash.com/photo-1754992599453-01e809722aa1?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "WZe2v04wiv0",
        "src": "https://images.unsplash.com/photo-1754836717974-d43bd9c798ae?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Food & Drink",
    "count": 10811
  },
  {
    "id": "Bn-DjrcBrwo",
    "href": "https://unsplash.com/t/sports",
    "photos": [
      {
        "id": "0mERTWSD7po",
        "src": "https://images.unsplash.com/photo-1755303238751-d04f190c96dd?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "2F3I5NuRZk4",
        "src": "https://images.unsplash.com/photo-1755554857887-935f8a49f635?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "NkicHgUbtJQ",
        "src": "https://plus.unsplash.com/premium_photo-1754258494576-f15dc2bb4d3f?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      },
      {
        "id": "dJt7EmomG78",
        "src": "https://images.unsplash.com/photo-1755628931496-5b08b241567c?ixlib=rb-4.1.0&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max"
      }
    ],
    "title": "Sports",
    "count": 4005
  }
];

<CardView
  aria-label="Collections"
  styles={style({width: 'full', height: 500})}
  size="S"
  
  items={topics}>
  {topic => (
    /*- begin highlight -*/
    <Card href={topic.href} target="_blank" textValue={topic.title}>
      {/*- end highlight -*/}
      <CollectionCardPreview>
        {topic.photos.map(photo => (
          <Image key={photo.id} alt="" src={photo.src} />
        ))}
      </CollectionCardPreview>
      <Content>
        <Text slot="title">{topic.title}</Text>
        <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
          <Folder />
          <Text slot="description">{topic.count} photos</Text>
        </div>
      </Content>
    </Card>
  )}
</CardView>
```

### Empty state

Use `renderEmptyState` to render placeholder content when the CardView is empty.

```tsx
import {CardView, IllustratedMessage, Heading, Content} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Image from '@react-spectrum/s2/illustrations/gradient/generic1/Image';

<CardView
  aria-label="Assets"
  styles={style({width: 'full', height: 300})}
  /*- begin highlight -*/
  renderEmptyState={() => (
    <IllustratedMessage size="L">
      <Image />
      <Heading>Create your first asset.</Heading>
      <Content>Get started by uploading or importing some assets.</Content>
    </IllustratedMessage>
  )}>
  {/*- end highlight -*/}
  {[]}
</CardView>
```

## Selection and actions

Use `selectionMode` to enable single or multiple selection, and `selectedKeys` (matching each card's `id`) to control the selected cards. Return an [ActionBar](ActionBar.md) from `renderActionBar` to handle bulk actions, and use `onAction` for row navigation. Disable cards with `isDisabled`. See the [selection guide](selection.md) for details.

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text, ActionBar, ActionButton, type Selection} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Copy from '@react-spectrum/s2/icons/Copy';
import Delete from '@react-spectrum/s2/icons/Delete';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <>
      <CardView
        aria-label="Nature photos"
        styles={style({width: 'full', height: 500})}
        {...props}
        
        selectedKeys={selected}
        onSelectionChange={setSelected}
        onAction={key => alert(`Clicked ${key}`)}
        renderActionBar={(selectedKeys) => {
          let selection = selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ');
          return (
            <ActionBar>
              <ActionButton onPress={() => alert(`Edit ${selection}`)}>
                <Edit />
                <Text>Edit</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Copy ${selection}`)}>
                <Copy />
                <Text>Copy</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Delete ${selection}`)}>
                <Delete />
                <Text>Delete</Text>
              </ActionButton>
            </ActionBar>
          );
        }}>
        {/*- begin collapse -*/}
        <AssetCard id={1}>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Desert Sunset</Text>
            <Text slot="description">PNG • 2/3/2024</Text>
          </Content>
        </AssetCard>
        <AssetCard id={2} isDisabled>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Hiking Trail</Text>
            <Text slot="description">JPEG • 1/10/2022</Text>
          </Content>
        </AssetCard>
        <AssetCard id={3}>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Lion</Text>
            <Text slot="description">JPEG • 8/28/2021</Text>
          </Content>
        </AssetCard>
        <AssetCard id={4}>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Mountain Sunrise</Text>
            <Text slot="description">PNG • 3/15/2015</Text>
          </Content>
        </AssetCard>
        <AssetCard id={5}>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Giraffe tongue</Text>
            <Text slot="description">PNG • 11/27/2019</Text>
          </Content>
        </AssetCard>
        <AssetCard id={6}>
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </CardPreview>
          <Content>
            <Text slot="title">Golden Hour</Text>
            <Text slot="description">WEBP • 7/24/2024</Text>
          </Content>
        </AssetCard>
        {/*- end collapse -*/}
      </CardView>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}
```

## API

```tsx
<CardView>
  <Card />
  <SkeletonCollection />
</CardView>
```

### CardView

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | FocusStrategy | undefined` | — | Whether to auto focus the gridlist or an option. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of space between the cards. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `disabledBehavior` | `DisabledBehavior | undefined` | "all" | Whether `disabledKeys` applies to all interactions, or only selection. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `disallowTypeAhead` | `boolean | undefined` | false | Whether typeahead navigation is disabled. |
| `dragAndDropHooks` | `DragAndDropHooks<NoInfer<T>> | undefined` | — | The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the grid list or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `layout` | `"grid" | "waterfall" | undefined` | 'grid' | The layout of the cards. |
| `loadingState` | `LoadingState | undefined` | — | The loading state of the CardView. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when a user performs an action on an item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onLoadMore` | `(() => void) | undefined` | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `renderActionBar` | `((selectedKeys: "all" | Set<Key>) => ReactElement) | undefined` | — | Provides the ActionBar to render when cards are selected in the CardView. |
| `renderEmptyState` | `((props: GridListRenderProps) => ReactNode) | undefined` | — | Provides content to display when there are no items in the list. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `selectionStyle` | `"checkbox" | "highlight" | undefined` | 'checkbox' | How selection should be displayed. |
| `shouldSelectOnPressUp` | `boolean | undefined` | — | Whether selection should occur on press up instead of press down. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the cards. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"primary" | "secondary" | "tertiary" | "quiet" | undefined` | 'primary' | The visual style of the cards. |

---

# Source: https://react-spectrum.adobe.com/Checkbox.md

# Checkbox

Checkboxes allow users to select multiple items from a list of individual items,
or to mark one individual item as selected.

```tsx
import {Checkbox} from '@react-spectrum/s2';

<Checkbox />
```

## Selection

Use the `isSelected` or `defaultSelected` prop to set the selection state, and `onChange` to handle selection changes. The `isIndeterminate` prop overrides the selection state regardless of user interaction.

```tsx
import {Checkbox} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <Checkbox 
        {...props}
        isSelected={selected}
        onChange={setSelection}
        
      >
        Subscribe
      </Checkbox>
      <p>{`You are ${props.isIndeterminate ? 'partially subscribed' : selected ? 'subscribed' : 'unsubscribed'}`}</p>
    </>
  );
}
```

## Forms

Use the `name` and `value` props to submit the checkbox to the server. Set the `isRequired` prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {Checkbox, Button, Form} from '@react-spectrum/s2';

<Form>
  <Checkbox
    name="terms"
    value="agree"
    isRequired>
    {/*- end highlight -*/}
    I agree to the terms
  </Checkbox>
  <Button type="submit">Submit</Button>
</Form>
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The label for the element. |
| `defaultSelected` | `boolean | undefined` | — | Whether the element should be selected (uncontrolled). |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputRef` | `RefObject<HTMLInputElement | null> | undefined` | — | A ref for the HTML input element. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the Checkbox should be displayed with an emphasized style. |
| `isIndeterminate` | `boolean | undefined` | — | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `isSelected` | `boolean | undefined` | — | Whether the element should be selected (controlled). |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((isSelected: boolean) => void) | undefined` | — | Handler that is called when the element's selection state changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Checkbox. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: boolean) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string | undefined` | — | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). |

---

# Source: https://react-spectrum.adobe.com/CheckboxGroup.md

# CheckboxGroup

A CheckboxGroup allows users to select one or more items from a list of choices.

```tsx
import {CheckboxGroup, Checkbox} from '@react-spectrum/s2';

<CheckboxGroup>
  <Checkbox value="soccer">Soccer</Checkbox>
  <Checkbox value="baseball">Baseball</Checkbox>
  <Checkbox value="basketball">Basketball</Checkbox>
</CheckboxGroup>
```

## Value

Use the `value` or `defaultValue` prop to set the selected items, and `onChange` to handle selection changes.

```tsx
import {CheckboxGroup, Checkbox} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState(['soccer', 'baseball']);

  return (
    <>
      <CheckboxGroup
        label="Favorite sports"
        /*- begin highlight -*/
        value={selected}
        onChange={setSelected}>
        {/*- end highlight -*/}
        <Checkbox value="soccer">Soccer</Checkbox>
        <Checkbox value="baseball">Baseball</Checkbox>
        <Checkbox value="basketball">Basketball</Checkbox>
      </CheckboxGroup>
      <p>Current selection: {selected.join(', ')}</p>
    </>
  );
}
```

## Forms

Use the `name` prop to submit the selected checkboxes to the server. Set the `isRequired` prop on the `<CheckboxGroup>` to validate the user selects at least one checkbox, or on individual checkboxes. See the [Forms](forms.md) guide to learn more.

```tsx
import {CheckboxGroup, Checkbox, Button, Form} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Form>
  <CheckboxGroup
    label="Sandwich condiments"
    /*- begin highlight -*/
    name="condiments"
    isRequired>
    {/*- end highlight -*/}
    <Checkbox value="lettuce">Lettuce</Checkbox>
    <Checkbox value="tomato">Tomato</Checkbox>
    <Checkbox value="onion">Onion</Checkbox>
    <Checkbox value="sprouts">Sprouts</Checkbox>
  </CheckboxGroup>
  <CheckboxGroup label="Agree to the following" name="terms">
    {/*- begin highlight -*/}
    <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
    <Checkbox value="privacy" isRequired>Privacy policy</Checkbox>
    <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
    {/*- end highlight -*/}
  </CheckboxGroup>
  <Button type="submit" styles={style({marginTop: 8})}>Submit</Button>
</Form>
```

## API

```tsx
<CheckboxGroup>
  <Checkbox />
</CheckboxGroup>
```

### CheckboxGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The Checkboxes contained within the CheckboxGroup. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string[] | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isEmphasized` | `boolean | undefined` | — | By default, checkboxes are not emphasized (gray). The emphasized (blue) version provides visual prominence. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: string[]) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `orientation` | `Orientation | undefined` | 'vertical' | The axis the checkboxes should align with. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Checkboxes in the CheckboxGroup. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: string[]) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string[] | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/ColorArea.md

# ColorArea

A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

```tsx
import {ColorArea} from '@react-spectrum/s2';

<ColorArea />
```

## Value

Use the `value` or `defaultValue` prop to set the color value, and the `xChannel` and `yChannel` props to specify which color channels to display. The value may be a string or `Color` object, parsed using the `parseColor` function.

The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released. These are always called with a `Color` object.

```tsx
import {ColorArea, parseColor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('#9B80FF'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorArea
        xChannel="red"
        yChannel="green"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `colorSpace` | `ColorSpace | undefined` | — | The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. If not provided, this defaults to the color space of the `color` or `defaultColor` value. |
| `defaultValue` | `string | Color | undefined` | — | The default value (uncontrolled). |
| `form` | `string | undefined` | — | The `<form>` element to associate the ColorArea with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the ColorArea is disabled. |
| `onChange` | `((value: Color) => void) | undefined` | — | Handler that is called when the value changes, as the user drags. |
| `onChangeEnd` | `((value: Color) => void) | undefined` | — | Handler that is called when the user stops dragging. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | Color | undefined` | — | The current value (controlled). |
| `xChannel` | `ColorChannel | undefined` | — | Color channel for the horizontal axis. |
| `xName` | `string | undefined` | — | The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `yChannel` | `ColorChannel | undefined` | — | Color channel for the vertical axis. |
| `yName` | `string | undefined` | — | The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |

## Related Types

### Color

### parseColor

---

# Source: https://react-spectrum.adobe.com/ColorField.md

# ColorField

A color field allows users to edit a hex color or individual color channel value.

```tsx
import {ColorField} from '@react-spectrum/s2';

<ColorField />
```

## Value

Use the `value` or `defaultValue` prop to set the color value, and `onChange` to handle user input. The value may be a string or `Color` object, parsed using the `parseColor` function. `onChange` is always called with a `Color` object.

```tsx
import {ColorField, type Color} from '@react-spectrum/s2';
import {useState} from 'react';
import {parseColor} from '@react-stately/color';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let [value, setValue] = useState<Color | null>(parseColor('#e73623'));

  return (
    <div>
      <ColorField
        label="Primary color"
        placeholder="Enter a color"
        value={value}
        onChange={setValue} />
      <pre className={style({font: 'body'})}>Current value: {value?.toString('hex')}</pre>
    </div>
  );
}
```

## Channel

By default, ColorField displays a hex value. Set the `colorSpace` and `channel` props to display a specific color channel.

```tsx
import {ColorField, parseColor, type Color} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [color, setColor] = useState<Color | null>(parseColor('#7f007f'));

  return (
    <div className={style({ display: 'flex', flexDirection: 'column', gap: 8 })}>
      <ColorField
        label="Hue"
        placeholder="Select a hue"
        value={color}
        onChange={setColor}
        /*- begin highlight -*/
        colorSpace="hsl"
        channel="hue" />
        {/*- end highlight -*/}
      <ColorField
        label="Saturation"
        placeholder="Select a saturation"
        value={color}
        onChange={setColor}
        colorSpace="hsl"
        channel="saturation" />
      <ColorField
        label="Lightness"
        placeholder="Select a lightness"
        value={color}
        onChange={setColor}
        colorSpace="hsl"
        channel="lightness" />
      <pre className={style({font: 'body'})}>Current value: {color?.toString('hex')}</pre>
    </div>
  );
}
```

## Forms

Use the `name` prop to submit the text value to the server. Set the `isRequired` prop to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {ColorField, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <ColorField
        {...props}
        label="Brand color"
        placeholder="Enter a color"
        name="brandColor"
        
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `channel` | `ColorChannel | undefined` | — | The color channel that this field edits. If not provided,  the color is edited as a hex value. |
| `colorSpace` | `ColorSpace | undefined` | — | The color space that the color field operates in if a `channel` prop is provided. If no `channel` is provided, the color field always displays the color as an RGB hex value. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string | Color | null | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `isWheelDisabled` | `boolean | undefined` | — | Enables or disables changing the value with scroll. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBeforeInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((color: Color | null) => void) | undefined` | — | Handler that is called when the value changes. |
| `onCompositionEnd` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| `onCompositionStart` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event). |
| `onCopy` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| `onCut` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPaste` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| `onSelect` | `ReactEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event). |
| `placeholder` | `string | undefined` | — | Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the color field. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: Color | null) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string | Color | null | undefined` | — | The current value (controlled). |

## Related Types

### Color

### parseColor

---

# Source: https://react-spectrum.adobe.com/ColorSlider.md

# ColorSlider

A ColorSlider allows users to adjust an individual channel of a color value.

```tsx
import {ColorSlider} from '@react-spectrum/s2';

<ColorSlider />
```

## Value

Use the `value` or `defaultValue` prop to set the color value, and the `channel` prop to specify which color channel to display. The value may be a string or `Color` object, parsed using the `parseColor` function.

The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released. These are always called with a `Color` object.

```tsx
import {ColorSlider, parseColor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorSlider
        channel="hue"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `channel` | `ColorChannel` | — | The color channel that the slider manipulates. |
| `colorSpace` | `ColorSpace | undefined` | — | The color space that the slider operates in. The `channel` must be in this color space. If not provided, this defaults to the color space of the `color` or `defaultColor` value. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string | Color | undefined` | — | The default value (uncontrolled). |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the whole Slider is disabled. |
| `label` | `string | undefined` | — |  |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `onChange` | `((value: Color) => void) | undefined` | — | Handler that is called when the value changes, as the user drags. |
| `onChangeEnd` | `((value: Color) => void) | undefined` | — | Handler that is called when the user stops dragging. |
| `orientation` | `Orientation | undefined` | 'horizontal' | The orientation of the Slider. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | Color | undefined` | — | The current value (controlled). |

## Related Types

### Color

### parseColor

---

# Source: https://react-spectrum.adobe.com/ColorSwatch.md

# ColorSwatch

A ColorSwatch displays a preview of a selected color.

```tsx
import {ColorSwatch} from '@react-spectrum/s2';

<ColorSwatch />
```

## Value

A ColorSwatch displays a color value passed via the `color` prop. The value can be a string or `Color` object. When no color is provided or the color is transparent, a red slash will be displayed.

```tsx
import {ColorSwatch} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({display: 'flex', gap: 12, alignItems: 'center'})}>
  <ColorSwatch color="#ff6600" />
  <ColorSwatch color="rgb(255, 0, 255)" />
  <ColorSwatch color="hsl(120, 100%, 42%)" />
  <ColorSwatch color="rgba(0, 150, 255, 0.5)" />
  <ColorSwatch />
</div>
```

## Custom sizing

ColorSwatch can be resized using the `styles` prop.

```tsx
import {ColorSwatch} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<ColorSwatch
  color="#10b981"
  styles={style({width: 80, height: 40})} />
```

## Accessibility

By default, ColorSwatch includes a localized color description for screen reader users (e.g. "dark vibrant blue"). Use the `colorName` prop to override this. Set an `aria-label` to provide additional context. In this example, a screen reader will announce "Fire truck red, Background color".

```tsx
import {ColorSwatch} from '@react-spectrum/s2';

<ColorSwatch
  color="#f00"
  aria-label="Background color"
  colorName="Fire truck red" />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `color` | `string | Color | undefined` | — | The color value to display in the swatch. |
| `colorName` | `string | undefined` | — | A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `rounding` | `"full" | "none" | "default" | undefined` | 'default' | The corner rounding of the ColorSwatch. |
| `size` | `"S" | "M" | "L" | "XS" | undefined` | 'M' | The size of the ColorSwatch. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

## Related Types

### Color

---

# Source: https://react-spectrum.adobe.com/ColorSwatchPicker.md

# ColorSwatchPicker

A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.

```tsx
import {ColorSwatchPicker, ColorSwatch} from '@react-spectrum/s2';

<ColorSwatchPicker>
  <ColorSwatch color="#f00" />
  <ColorSwatch color="#0f0" />
  <ColorSwatch color="#00f" />
  <ColorSwatch color="#ff0" />
  <ColorSwatch color="#f0f" />
  <ColorSwatch color="#0ff" />
</ColorSwatchPicker>
```

## Value

Use the `value` or `defaultValue` prop to set the selected color, and `onChange` to handle selection changes.  The value may be a string or `Color` object, parsed using the `parseColor` function.

```tsx
import {ColorSwatchPicker, ColorSwatch, parseColor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(parseColor('#e11d48'));

  return (
    <>
      {/*- begin highlight -*/}
      <ColorSwatchPicker value={value} onChange={setValue}>
      {/*- end highlight -*/}
        <ColorSwatch color="#e11d48" />
        <ColorSwatch color="#f97316" />
        <ColorSwatch color="#eab308" />
        <ColorSwatch color="#22c55e" />
        <ColorSwatch color="#3b82f6" />
        <ColorSwatch color="#8b5cf6" />
        <ColorSwatch color="#ec4899" />
      </ColorSwatchPicker>
      <pre className={style({font: 'body'})}>Selected color: {value.toString('rgb')}</pre>
    </>
  );
}
```

<InlineAlert variant="notice">
  <Heading>Color swatches must be unique</Heading>
  <Content>Equivalent colors in different color spaces are considered duplicates. For example, the values `#f00`, `hsl(0, 100%, 50%)`, and `hsb(0, 100%, 100%)` are all the same color. This is required for predictable selection behavior.</Content>
</InlineAlert>

## API

```tsx
<ColorSwatchPicker>
  <ColorSwatch />
</ColorSwatchPicker>
```

### ColorSwatchPicker

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | The ColorSwatches within the ColorSwatchPicker. |
| `defaultValue` | `string | Color | undefined` | — | The default value (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of padding between the swatches. |
| `onChange` | `((value: Color) => void) | undefined` | — | Handler that is called when the value changes. |
| `rounding` | `"full" | "none" | "default" | undefined` | 'none' | The corner rounding of the color swatches. |
| `size` | `"S" | "M" | "L" | "XS" | undefined` | 'M' | The size of the color swatches. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | Color | undefined` | — | The current value (controlled). |

## Related Types

### Color

### parseColor

---

# Source: https://react-spectrum.adobe.com/ColorWheel.md

# ColorWheel

A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.

```tsx
import {ColorWheel} from '@react-spectrum/s2';

<ColorWheel />
```

## Value

Use the `value` or `defaultValue` prop to set the color value. The value may be a string or `Color` object, parsed using the `parseColor` function.

The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released. These are always called with a `Color` object.

```tsx
import {ColorWheel} from '@react-spectrum/s2';
import {useState} from 'react';
import {parseColor} from '@react-stately/color';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorWheel
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}
```

{/* ## Integration

ColorWheel works well alongside other color components to create complete color picking experiences.

```tsx render hideImports
"use client";
import {ColorWheel, ColorSlider, ColorSwatch} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [color, setColor] = useState('hsl(30, 80%, 60%)');

  return (
    <div style={{display: 'flex', gap: 20, alignItems: 'center'}}>
      <ColorWheel
        value={color}
        onChange={setColor} />
      <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
        <ColorSlider
          label="Saturation"
          channel="saturation"
          value={color}
          onChange={setColor} />
        <ColorSlider
          label="Lightness"
          channel="lightness"
          value={color}
          onChange={setColor} />
        <ColorSwatch color={color} size="L" />
      </div>
    </div>
  );
}
``` */}

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `defaultValue` | `string | Color | undefined` | 'hsl(0, 100%, 50%)' | The default value (uncontrolled). |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the ColorWheel is disabled. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `onChange` | `((value: Color) => void) | undefined` | — | Handler that is called when the value changes, as the user drags. |
| `onChangeEnd` | `((value: Color) => void) | undefined` | — | Handler that is called when the user stops dragging. |
| `size` | `number | undefined` | 192 |  |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | Color | undefined` | — | The current value (controlled). |

## Related Types

### Color

### parseColor

---

# Source: https://react-spectrum.adobe.com/ComboBox.md

# ComboBox

ComboBox allow users to choose a single option from a collapsible list of options when space is limited.

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox>
  <ComboBoxItem>Chocolate</ComboBoxItem>
  <ComboBoxItem>Mint</ComboBoxItem>
  <ComboBoxItem>Strawberry</ComboBoxItem>
  <ComboBoxItem>Vanilla</ComboBoxItem>
  <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
</ComboBox>
```

## Content

`ComboBox` follows the [Collection Components API](collections.md?component=ComboBox), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children.

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

function Example() {
  let options = [
    { id: 1, name: 'Aardvark' },
    { id: 2, name: 'Cat' },
    { id: 3, name: 'Dog' },
    { id: 4, name: 'Kangaroo' },
    { id: 5, name: 'Koala' },
    { id: 6, name: 'Penguin' },
    { id: 7, name: 'Snake' },
    { id: 8, name: 'Turtle' },
    { id: 9, name: 'Wombat' }
  ];

  return (
    /*- begin highlight -*/
    <ComboBox label="Animals" defaultItems={options} placeholder="Select an animal">
      {(item) => <ComboBoxItem>{item.name}</ComboBoxItem>}
    </ComboBox>
    /*- end highlight -*/
  );
}
```

### Slots

`ComboBoxItem` supports icons, avatars, and `label` and `description` text slots.

```tsx
import {Avatar, ComboBox, ComboBoxItem, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Comment from '@react-spectrum/s2/icons/Comment';
import Edit from '@react-spectrum/s2/icons/Edit';
import UserSettings from '@react-spectrum/s2/icons/UserSettings';

const users = Array.from({length: 5}, (_, i) => ({
  id: `user${i + 1}`,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  avatar: 'https://i.imgur.com/kJOwAdv.png'
}));

<div className={style({display: 'flex', gap: 12, flexWrap: 'wrap'})}>
  <ComboBox label="Permissions" defaultSelectedKey="read" placeholder="Select a permission level">
    <ComboBoxItem id="read" textValue="Read">
      {/*- begin highlight -*/}
      <Comment />
      <Text slot="label">Read</Text>
      <Text slot="description">Comment only</Text>
      {/*- end highlight -*/}
    </ComboBoxItem>
    <ComboBoxItem id="write" textValue="Write">
      <Edit />
      <Text slot="label">Write</Text>
      <Text slot="description">Read and write only</Text>
    </ComboBoxItem>
    <ComboBoxItem id="admin" textValue="Admin">
      <UserSettings />
      <Text slot="label">Admin</Text>
      <Text slot="description">Full access</Text>
    </ComboBoxItem>
  </ComboBox>
  <ComboBox label="Share" defaultItems={users} defaultSelectedKey="user1" placeholder="Select a user">
    {(item) => (
      <ComboBoxItem id={item.id} textValue={item.name}>
        {/*- begin highlight -*/}
        <Avatar slot="avatar" src={item.avatar} />
        {/*- end highlight -*/}
        <Text slot="label">{item.name}</Text>
        <Text slot="description">{item.email}</Text>
      </ComboBoxItem>
    )}
  </ComboBox>
</div>

```

<InlineAlert variant="notice">
  <Heading>Accessibility</Heading>
  <Content>Interactive elements (e.g. buttons) within ComboBox items are not allowed. This will break keyboard and screen reader navigation. Only add textual or decorative graphics (e.g. icons) as children.</Content>
</InlineAlert>

### Sections

Use the `<ComboBoxSection>` component to group options. A `<Header>` element, with a `<Heading>` and optional `description` slot can be included to label a section. Sections without a header must have an `aria-label`.

```tsx
import {ComboBox, ComboBoxItem, ComboBoxSection, Header, Heading, Text} from '@react-spectrum/s2';

<ComboBox label="Preferred fruit or vegetable" placeholder="Select an option">
  {/*- begin highlight -*/}
  <ComboBoxSection>
    <Header>
      <Heading>Fruit</Heading>
      <Text slot="description">Sweet and nutritious</Text>
    </Header>
    {/*- end highlight -*/}
    <ComboBoxItem id="apple">Apple</ComboBoxItem>
    <ComboBoxItem id="banana">Banana</ComboBoxItem>
    <ComboBoxItem id="orange">Orange</ComboBoxItem>
    <ComboBoxItem id="grapes">Grapes</ComboBoxItem>
  </ComboBoxSection>
  <ComboBoxSection>
    <Header>
      <Heading>Vegetable</Heading>
      <Text slot="description">Healthy and savory</Text>
    </Header>
    <ComboBoxItem id="broccoli">Broccoli</ComboBoxItem>
    <ComboBoxItem id="carrots">Carrots</ComboBoxItem>
    <ComboBoxItem id="spinach">Spinach</ComboBoxItem>
    <ComboBoxItem id="lettuce">Lettuce</ComboBoxItem>
  </ComboBoxSection>
</ComboBox>
```

### Asynchronous loading

Use the `loadingState` and `onLoadMore` props to enable async loading and infinite scrolling.

```tsx
import {ComboBox, ComboBoxItem, useAsyncList} from '@react-spectrum/s2';

interface Character {
  name: string
}

function Example() {
  let list = useAsyncList<Character>({
    async load({signal, cursor, filterText}) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <ComboBox
      label="Star Wars Character Lookup"
      placeholder="Select a character"
      items={list.items}
      inputValue={list.filterText}
      onInputChange={list.setFilterText}
      /*- begin highlight -*/
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}>
      {/*- end highlight -*/}
      {item => <ComboBoxItem id={item.name} textValue={item.name}>{item.name}</ComboBoxItem>}
    </ComboBox>
  );
}
```

### Actions

Use the `onAction` prop on a `<ComboBoxItem>` to perform a custom action when the item is pressed. This example adds a "Create" action for the current input value.

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [inputValue, setInputValue] = useState('');

  return (
    <ComboBox
      label="Favorite Animal"
      placeholder="Select an animal"
      inputValue={inputValue}
      onInputChange={setInputValue}>
      {/*- begin highlight -*/}
      {inputValue.length > 0 && (
        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
          {`Create "${inputValue}"`}
        </ComboBoxItem>
      )}
      {/*- end highlight -*/}
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}
```

### Links

Use the `href` prop on a `<ComboBoxItem>` to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework. Link items in a `ComboBox` are not selectable.

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox label="Bookmarks" placeholder="Select a bookmark">
  <ComboBoxItem href="https://adobe.com/" target="_blank">Adobe</ComboBoxItem>
  <ComboBoxItem href="https://apple.com/" target="_blank">Apple</ComboBoxItem>
  <ComboBoxItem href="https://google.com/" target="_blank">Google</ComboBoxItem>
  <ComboBoxItem href="https://microsoft.com/" target="_blank">Microsoft</ComboBoxItem>
</ComboBox>
```

## Selection

Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The selected key corresponds to the `id` prop of an item. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=ComboBox#single-selection) for more details.

```tsx
import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [animal, setAnimal] = useState<Key | null>("bison");

  return (
    <div>
      <ComboBox
        label="Pick an animal"
        placeholder="Select an animal"
        /*- begin highlight -*/
        selectedKey={animal}
        onSelectionChange={setAnimal}>
        {/*- end highlight -*/}
        <ComboBoxItem id="koala">Koala</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="platypus" isDisabled>Platypus</ComboBoxItem>
        <ComboBoxItem id="eagle">Bald Eagle</ComboBoxItem>
        <ComboBoxItem id="bison">Bison</ComboBoxItem>
        <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
      </ComboBox>
      <p>Current selection: {animal}</p>
    </div>
  );
}
```

### Input value

Use the `inputValue` or `defaultInputValue` prop to set the value of the input field. By default, the value will be reverted to the selected item on blur. Set the `allowsCustomValue` prop to enable entering values that are not in the list.

```tsx
import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [value, setValue] = useState<Key>('Kangaroo');

  return (
    <div>
      <ComboBox
        {...props}
        label="Favorite Animal"
        placeholder="Select an animal"
        /*- begin highlight -*/
        
        inputValue={value}
        onInputChange={setValue}>
        {/*- end highlight -*/}
        <ComboBoxItem id="koala">Koala</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="platypus">Platypus</ComboBoxItem>
        <ComboBoxItem id="eagle">Bald Eagle</ComboBoxItem>
        <ComboBoxItem id="bison">Bison</ComboBoxItem>
        <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
      </ComboBox>
      <p>Current input value: {value}</p>
    </div>
  );
}
```

### Fully controlled

Both `inputValue` and `selectedKey` can be controlled simultaneously. However, each interaction will only trigger either `onInputChange` or `onSelectionChange`, not both. When controlling both props, you must update both values accordingly.

```tsx
import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function ControlledComboBox() {
  /*- begin collapse -*/
  let options = [
    {id: 1, name: 'Aerospace'},
    {id: 2, name: 'Mechanical'},
    {id: 3, name: 'Civil'},
    {id: 4, name: 'Biomedical'},
    {id: 5, name: 'Nuclear'},
    {id: 6, name: 'Industrial'},
    {id: 7, name: 'Chemical'},
    {id: 8, name: 'Agricultural'},
    {id: 9, name: 'Electrical'}
  ];
  /*- end collapse -*/

  let [fieldState, setFieldState] = useState<{selectedKey: Key | null, inputValue: string}>({
    selectedKey: null,
    inputValue: ''
  });

  let onSelectionChange = (id: Key | null) => {
    // Update inputValue when selectedKey changes.
    setFieldState({
      inputValue: id ? (options.find(o => o.id === id)?.name ?? '') : '',
      selectedKey: id
    });
  };

  let onInputChange = (value: string) => {
    // Reset selectedKey to null if the input is cleared.
    setFieldState(prevState => ({
      inputValue: value,
      selectedKey: value === '' ? null : prevState.selectedKey
    }));
  };

  return (
    <div>
      <ComboBox
        label="Pick a engineering major"
        placeholder="Select a major"
        /*- begin highlight -*/
        defaultItems={options}
        selectedKey={fieldState.selectedKey}
        inputValue={fieldState.inputValue}
        onSelectionChange={onSelectionChange}
        onInputChange={onInputChange}>
        {/*- end highlight -*/}
        {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
      </ComboBox>
      <pre className={style({font: 'body'})}>
        Current selected major id: {fieldState.selectedKey}{'\n'}
        Current input text: {fieldState.inputValue}
      </pre>
    </div>
  );
}
```

## Forms

Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects a value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {ComboBox, ComboBoxItem, Form, Button} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <ComboBox
        {...props}
        label="Animal"
        placeholder="e.g. Cat"
        /*- begin highlight -*/
        name="animal"
        
        /*- end highlight -*/
        description="Please select an animal.">
        <ComboBoxItem id="aardvark">Aardvark</ComboBoxItem>
        <ComboBoxItem id="cat">Cat</ComboBoxItem>
        <ComboBoxItem id="dog">Dog</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="panda">Panda</ComboBoxItem>
        <ComboBoxItem id="snake">Snake</ComboBoxItem>
      </ComboBox>
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## Popover options

Use the `menuTrigger` prop to control when the popover opens:

* `input` (default): popover opens when the user edits the input text.
* `focus`: popover opens when the user focuses the input.
* `manual`: popover only opens when the user presses the trigger button or uses the arrow keys.

The `align`, `direction`, `shouldFlip` and `menuWidth` props control the behavior of the popover.

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox>
  <ComboBoxItem id="red panda">Red Panda</ComboBoxItem>
  <ComboBoxItem id="cat">Cat</ComboBoxItem>
  <ComboBoxItem id="dog">Dog</ComboBoxItem>
  <ComboBoxItem id="aardvark">Aardvark</ComboBoxItem>
  <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
  <ComboBoxItem id="snake">Snake</ComboBoxItem>
</ComboBox>
```

## API

```tsx
<ComboBox>
  <ComboBoxItem>
    <Icon /> or <Avatar />
    <Text slot="label" />
    <Text slot="description" />
  </ComboBoxItem>
  <ComboBoxSection>
    <Header>
      <Heading />
      <Text slot="description" />
    </Header>
    <ComboBoxItem />
  </ComboBoxSection>
</ComboBox>
```

### ComboBox

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"start" | "end" | undefined` | 'start' | Alignment of the menu relative to the input target. |
| `allowsCustomValue` | `boolean | undefined` | — | Whether the ComboBox allows a non-item matching input value to be set. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultInputValue` | `string | undefined` | — | The default value of the ComboBox input (uncontrolled). |
| `defaultItems` | `Iterable<T> | undefined` | — | The list of ComboBox items (uncontrolled). |
| `defaultSelectedKey` | `Key | undefined` | — | The initial selected key in the collection (uncontrolled). |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `direction` | `"top" | "bottom" | undefined` | 'bottom' | Direction the menu will render relative to the ComboBox. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `formValue` | `"text" | "key" | undefined` | 'key' | Whether the text or key of the selected item is submitted as part of an HTML form. When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputValue` | `string | undefined` | — | The value of the ComboBox input (controlled). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `items` | `Iterable<T> | undefined` | — | The list of ComboBox items (controlled). |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `loadingState` | `LoadingState | undefined` | — | The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. |
| `menuTrigger` | `MenuTriggerAction | undefined` | 'input' | The interaction required to display the ComboBox menu. |
| `menuWidth` | `number | undefined` | — | Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onInputChange` | `((value: string) => void) | undefined` | — | Handler that is called when the ComboBox input value changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onLoadMore` | `(() => any) | undefined` | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |
| `onOpenChange` | `((isOpen: boolean, menuTrigger?: MenuTriggerAction) => void) | undefined` | — | Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. |
| `onSelectionChange` | `((key: Key | null) => void) | undefined` | — | Handler that is called when the selection changes. |
| `placeholder` | `string | undefined` | — | Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| `selectedKey` | `Key | null | undefined` | — | The currently selected key in the collection (controlled). |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `shouldFocusWrap` | `boolean | undefined` | — | Whether keyboard navigation is circular. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Combobox. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: ComboBoxValidationValue) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |

### ComboBoxItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for this item. |
| `children` | `ReactNode` | — |  |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onBlur` | `((e: FocusEvent<HTMLDivElement, Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<HTMLDivElement, Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |

### ComboBoxSection

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for the section. |
| `children` | `ReactNode | ((item: T) => ReactElement)` | — | Static child items or a function to render children. |
| `className` | `string | undefined` | — | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `id` | `Key | undefined` | — | The unique id of the section. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the section. |
| `style` | `CSSProperties | undefined` | — | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. |
| `value` | `T | undefined` | — | The object value that this section represents. When using dynamic collections, this is set automatically. |

---

# Source: https://react-spectrum.adobe.com/ContextualHelp.md

# ContextualHelp

Contextual help shows a user extra information about the state of an adjacent component, or a total view.

```tsx
import {ContextualHelp, Heading, Content, Footer, Link} from '@react-spectrum/s2';

<ContextualHelp>
  <Heading>Permission required</Heading>
  <Content>Your admin must grant you permission before you can create a segment.</Content>
  <Footer>
    <Link isStandalone href="#" target="_blank">Learn more about segments</Link>
  </Footer>
</ContextualHelp>
```

## API

```tsx
<ContextualHelp>
  <Heading />
  <Content />
  <Footer />
</ContextualHelp>
```

### ContextualHelp

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | Contents of the Contextual Help popover. |
| `containerPadding` | `number | undefined` | 12 | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number | undefined` | 0 | The additional offset applied along the cross axis between the element and its anchor element. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `offset` | `number | undefined` | 8 | The additional offset applied along the main axis between the element and its anchor element. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `placement` | `Placement | undefined` | 'bottom start' | The placement of the popover with respect to the action button. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `size` | `"S" | "XS" | undefined` | 'XS' | The size of the ActionButton. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"info" | "help" | undefined` | 'help' | Indicates whether contents are informative or provides helpful guidance. |

---

# Source: https://react-spectrum.adobe.com/DateField.md

# DateField

DateFields allow users to enter and edit date and time values using a keyboard.
Each part of a date value is displayed in an individually editable segment.

```tsx
import {DateField} from '@react-spectrum/s2';

<DateField />
```

## Value

Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

```tsx
import {parseDate, getLocalTimeZone, CalendarDate} from '@internationalized/date';
import {useDateFormatter} from 'react-aria';
import {DateField} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
  let formatter = useDateFormatter({ dateStyle: 'full' });

  return (
    <>
      <DateField
        value={date}
        onChange={setDate} />
      {/*- end highlight -*/}
      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
    </>
  );
}
```

### Format options

The date format is automatically determined based on the user's locale. `DateField` supports several props to control how values are displayed.

```tsx
import {parseZonedDateTime} from '@internationalized/date';
import {DateField} from '@react-spectrum/s2';

<DateField
  
  defaultValue={parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]')} />
```

### International calendars

By default, `DateField` displays the value using the calendar system for the user's locale. Use `<Provider>` to override the calendar system by setting the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string). The `onChange` event always receives a date in the same calendar as the `value` or `defaultValue` (Gregorian if no value is provided), regardless of the displayed locale.

```tsx
import {Provider, DateField} from '@react-spectrum/s2';
import {parseZonedDateTime} from '@internationalized/date';

<Provider>
  <DateField defaultValue={parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]')} />
</Provider>
```

## Forms

Use the `name` prop to submit the selected date to the server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) string. Set the `isRequired`, `minValue`, or `maxValue` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {today, getLocalTimeZone} from '@internationalized/date';
import {DateField, Form, Button} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <DateField
        {...props}
        label="Appointment date"
        name="date"
        
        minValue={today(getLocalTimeZone())}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `T | null | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `granularity` | `Granularity | undefined` | — | Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. |
| `hideTimeZone` | `boolean | undefined` | false | Whether to hide the time zone abbreviation. |
| `hourCycle` | `24 | 12 | undefined` | — | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDateUnavailable` | `((date: DateValue) => boolean) | undefined` | — | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `DateValue | null | undefined` | — | The maximum allowed date that a user may select. |
| `minValue` | `DateValue | null | undefined` | — | The minimum allowed date that a user may select. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: MappedDateValue<T> | null) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `placeholderValue` | `T | null | undefined` | — | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. |
| `shouldForceLeadingZeros` | `boolean | undefined` | — | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the DateField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: MappedDateValue<T>) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `T | null | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/DatePicker.md

# DatePicker

DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.

```tsx
import {DatePicker} from '@react-spectrum/s2';

<DatePicker />
```

## Value

Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

```tsx
import {parseDate, getLocalTimeZone, CalendarDate} from '@internationalized/date';
import {useDateFormatter} from 'react-aria';
import {DatePicker} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
  let formatter = useDateFormatter({ dateStyle: 'full' });
  
  return (
    <>
      <DatePicker
        value={date}
        onChange={setDate} />
        {/*- end highlight -*/}
      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
    </>
  );
}
```

### Format options

The date format is automatically determined based on the user's locale. `DatePicker` supports several props to control how values are displayed.

```tsx
import {parseZonedDateTime} from '@internationalized/date';
import {DatePicker} from '@react-spectrum/s2';

<DatePicker
  
  defaultValue={parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]')} />
```

### International calendars

By default, `DatePicker` displays the value using the calendar system for the user's locale. Use `<Provider>` to override the calendar system by setting the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string). The `onChange` event always receives a date in the same calendar as the `value` or `defaultValue` (Gregorian if no value is provided), regardless of the displayed locale.

```tsx
import {Provider, DatePicker} from '@react-spectrum/s2';
import {parseZonedDateTime} from '@internationalized/date';

<Provider>
  <DatePicker defaultValue={parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]')} />
</Provider>
```

## Forms

Use the `name` prop to submit the selected date to the server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) string. Set the `isRequired`, `minValue`, or `maxValue` props to validate the value, or implement custom client or server-side validation. The `isDateUnavailable` callback prevents certain dates from being selected. See the [Forms](forms.md) guide to learn more.

```tsx
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {DatePicker, Form, Button, useLocale} from '@react-spectrum/s2';

function Example(props) {
  let {locale} = useLocale();
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  return (
    <Form>
      <DatePicker
        {...props}
        label="Appointment date"
        name="date"
        
        minValue={today(getLocalTimeZone())}
        isDateUnavailable={date => (
          isWeekend(date, locale) ||
          disabledRanges.some((interval) =>
            date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
          )
        )}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `createCalendar` | `((identifier: CalendarIdentifier) => Calendar) | undefined` | — | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `defaultValue` | `T | null | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `firstDayOfWeek` | `"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | undefined` | — | The day that starts the week. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `granularity` | `Granularity | undefined` | — | Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. |
| `hideTimeZone` | `boolean | undefined` | false | Whether to hide the time zone abbreviation. |
| `hourCycle` | `24 | 12 | undefined` | — | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDateUnavailable` | `((date: DateValue) => boolean) | undefined` | — | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `DateValue | null | undefined` | — | The maximum allowed date that a user may select. |
| `maxVisibleMonths` | `number | undefined` | 1 | The maximum number of months to display at once in the calendar popover, if screen space permits. |
| `minValue` | `DateValue | null | undefined` | — | The minimum allowed date that a user may select. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: MappedDateValue<T> | null) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `pageBehavior` | `PageBehavior | undefined` | visible | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
| `placeholderValue` | `T | null | undefined` | — | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. |
| `shouldCloseOnSelect` | `boolean | (() => boolean) | undefined` | true | Determines whether the date picker popover should close automatically when a date is selected. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `shouldForceLeadingZeros` | `boolean | undefined` | — | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the DateField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: MappedDateValue<T>) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `T | null | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/DateRangePicker.md

# DateRangePicker

DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
to enter or select a date and time range.

```tsx
import {DateRangePicker} from '@react-spectrum/s2';

<DateRangePicker />
```

## Value

Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

```tsx
import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
import {useDateFormatter, type RangeValue} from 'react-aria';
import {DateRangePicker} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [range, setRange] = useState<RangeValue<CalendarDate> | null>({
    start: parseDate('2025-02-03'),
    end: parseDate('2025-02-12')
  });
  let formatter = useDateFormatter({ dateStyle: 'long' });
  
  return (
    <>
      <DateRangePicker
        value={range}
        onChange={setRange} />
        {/*- end highlight -*/}
      <p>Selected range: {range ? formatter.formatRange(
        range.start.toDate(getLocalTimeZone()),
        range.end.toDate(getLocalTimeZone())
      ) : '--'}</p>
    </>
  );
}
```

### Format options

The date format is automatically determined based on the user's locale. `DateRangePicker` supports several props to control how values are displayed.

```tsx
import {parseZonedDateTime} from '@internationalized/date';
import {DateRangePicker} from '@react-spectrum/s2';

<DateRangePicker
  
  defaultValue={{
    start: parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]'),
    end: parseZonedDateTime('2025-02-14T08:45:00[America/Los_Angeles]')
  }} />
```

### International calendars

By default, `DateRangePicker` displays the value using the calendar system for the user's locale. Use `<Provider>` to override the calendar system by setting the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string). The `onChange` event always receives a date in the same calendar as the `value` or `defaultValue` (Gregorian if no value is provided), regardless of the displayed locale.

```tsx
import {Provider, DateRangePicker} from '@react-spectrum/s2';
import {parseDate} from '@internationalized/date';

<Provider>
  <DateRangePicker
    defaultValue={{
      start: parseDate('2025-02-03'),
      end: parseDate('2025-02-14')
    }} />
</Provider>
```

## Forms

Use the `name` prop to submit the selected date to the server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) string. Set the `isRequired`, `minValue`, or `maxValue` props to validate the value, or implement custom client or server-side validation. The `isDateUnavailable` callback prevents certain dates from being selected. Use `allowsNonContiguousRanges` to allow selecting ranges containing unavailable dates. See the [Forms](forms.md) guide to learn more.

```tsx
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {DateRangePicker, Form, Button, useLocale} from '@react-spectrum/s2';

function Example(props) {
  let {locale} = useLocale();
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  return (
    <Form>
      <DateRangePicker
        {...props}
        label="Trip dates"
        startName="startDate"
        endName="endDate"
        
        minValue={today(getLocalTimeZone())}
        isDateUnavailable={date => (
          isWeekend(date, locale) ||
          disabledRanges.some((interval) =>
            date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
          )
        )}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `allowsNonContiguousRanges` | `boolean | undefined` | — | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `createCalendar` | `((identifier: CalendarIdentifier) => Calendar) | undefined` | — | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `defaultValue` | `RangeValue<T> | null | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `endName` | `string | undefined` | — | The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `firstDayOfWeek` | `"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | undefined` | — | The day that starts the week. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `granularity` | `Granularity | undefined` | — | Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. |
| `hideTimeZone` | `boolean | undefined` | false | Whether to hide the time zone abbreviation. |
| `hourCycle` | `24 | 12 | undefined` | — | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDateUnavailable` | `((date: DateValue) => boolean) | undefined` | — | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `DateValue | null | undefined` | — | The maximum allowed date that a user may select. |
| `maxVisibleMonths` | `number | undefined` | 1 | The maximum number of months to display at once in the calendar popover, if screen space permits. |
| `minValue` | `DateValue | null | undefined` | — | The minimum allowed date that a user may select. |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: RangeValue<MappedDateValue<T>> | null) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `pageBehavior` | `PageBehavior | undefined` | visible | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
| `placeholderValue` | `T | null | undefined` | — | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. |
| `shouldCloseOnSelect` | `boolean | (() => boolean) | undefined` | true | Determines whether the date picker popover should close automatically when a date is selected. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `shouldForceLeadingZeros` | `boolean | undefined` | — | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the DateField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `startName` | `string | undefined` | — | The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: RangeValue<MappedDateValue<T>>) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `RangeValue<T> | null | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/Dialog.md

# Dialog

Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.

```tsx
import {Dialog, DialogTrigger, Button, ButtonGroup, Heading, Content, Footer, Checkbox, Image, Form, TextField} from '@react-spectrum/s2';
import heroImage from 'url:./assets/preview.png';

function Example(props) {
  return (
    <DialogTrigger>
      <Button variant="primary">Open Dialog</Button>
      {/*- begin focus -*/}
      <Dialog {...props}>
        {({close}) => (
          <>
            <Image slot="hero" src={heroImage} />
            <Heading slot="title">Subscribe to our newsletter</Heading>
            <Content>
              <p>Enter your information to subscribe to our newsletter and receive updates about new features and announcements.</p>
              <Form>
                <TextField label="Name" />
                <TextField label="Email" type="email" />
              </Form>
            </Content>
            <Footer>
              <Checkbox>Don't show this again</Checkbox>
            </Footer>
            <ButtonGroup>
              <Button onPress={close} variant="secondary">Cancel</Button>
              <Button onPress={close} variant="accent">Subscribe</Button>
            </ButtonGroup>
          </>
        )}
      </Dialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

## Content

Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. Spectrum includes several pre-defined dialog components with layouts for specific use cases, or you can use `CustomDialog` to create a custom layout.

### Standard Dialog

Use `Dialog` for standard dialog layouts. It supports `Image`, `Heading`, `Header`, `Content`, `Footer`, and `ButtonGroup` slots. Dismissible dialogs replace their `ButtonGroup` with a close button.

```tsx
import {Dialog, DialogTrigger, Button, ButtonGroup, Heading, Header, Content, Footer, Checkbox, Image} from '@react-spectrum/s2';
import heroImage from 'url:./assets/preview.png';

function Example(props) {
  return (
    <DialogTrigger>
      <Button variant="primary">Open Dialog</Button>
      {/*- begin focus -*/}
      <Dialog {...props}>
        {({close}) => (
          <>
            <Image slot="hero" src={heroImage} />
            <Heading slot="title">Dialog Title</Heading>
            <Header>Header</Header>
            <Content>
              <p>Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences.</p>
            </Content>
            <Footer>
              <Checkbox>Don't show this again</Checkbox>
            </Footer>
            <ButtonGroup>
              <Button onPress={close} variant="secondary">Cancel</Button>
              <Button onPress={close} variant="accent">Subscribe</Button>
            </ButtonGroup>
          </>
        )}
      </Dialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

### Alert Dialog

Use `AlertDialog` for confirmation, error messages, and other critical information that must be acknowledged.

```tsx
import {AlertDialog, DialogTrigger, Button} from '@react-spectrum/s2';

function Example(props) {
  return (
    <DialogTrigger>
      <Button>Publish</Button>
      {/*- begin focus -*/}
      <AlertDialog
        {...props}
        
        onPrimaryAction={() => alert('onPrimaryAction')}
        onSecondaryAction={() => alert('onSecondaryAction')}>
        {props.children}
      </AlertDialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

### Fullscreen Dialog

Use `FullscreenDialog` for complex workflows that require more space. It supports `Heading`, `Header`, `Content`, and `ButtonGroup` slots.

```tsx
import {FullscreenDialog, DialogTrigger, Button, ButtonGroup, Heading, Header, Content} from '@react-spectrum/s2';

function Example(props) {
  return (
    <DialogTrigger>
      <Button variant="primary">Open Fullscreen</Button>
      {/*- begin focus -*/}
      <FullscreenDialog {...props}>
        {({close}) => (
          <>
            <Heading slot="title">Advanced Settings</Heading>
            <Header>Configure your application preferences</Header>
            <Content>
              <p>This fullscreen dialog provides ample space for complex forms, detailed content, or multi-step workflows.</p>
              <p>The content area can scroll if needed, making it perfect for lengthy forms or comprehensive settings panels.</p>
            </Content>
            <ButtonGroup>
              <Button onPress={close} variant="secondary">Cancel</Button>
              <Button onPress={close} variant="accent">Save Changes</Button>
            </ButtonGroup>
          </>
        )}
      </FullscreenDialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

### Custom Dialog

Use `CustomDialog` for complete control over the dialog layout.

```tsx
import {CustomDialog, DialogTrigger, Button, Heading, CloseButton} from '@react-spectrum/s2';
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  return (
    <DialogTrigger>
      <Button>Open dialog</Button>
      {/*- begin focus -*/}
      <CustomDialog {...props}>
        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
          <Checkmark />
          <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
          <p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
        </div>
      </CustomDialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

## Dialog Container

Use `DialogContainer` to show a dialog programmatically or mount in a different part of the JSX tree (e.g. outside a menu).

```tsx
import {DialogContainer, Dialog, Button, ButtonGroup, Heading, Content, ActionMenu, MenuItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function DialogContainerExample() {
  let [dialogType, setDialogType] = useState<Key | null>(null);

  return (
    <>
      <ActionMenu onAction={setDialogType}>
        <MenuItem id="edit">Edit Item</MenuItem>
        <MenuItem id="delete">Delete Item</MenuItem>
        <MenuItem id="share">Share Item</MenuItem>
      </ActionMenu>

      {/*- begin highlight -*/}
      <DialogContainer onDismiss={() => setDialogType(null)}>
      {/*- end highlight -*/}
        {dialogType === 'edit' && (
          <Dialog>
            {({close}) => (
              <>
                <Heading slot="title">Edit Item</Heading>
                <Content>Make changes to your item here.</Content>
                <ButtonGroup>
                  <Button onPress={close} variant="secondary">Cancel</Button>
                  <Button onPress={close} variant="accent">Save</Button>
                </ButtonGroup>
              </>
            )}
          </Dialog>
        )}
        {dialogType === 'delete' && (
          <Dialog>
            {({close}) => (
              <>
                <Heading slot="title">Delete Item</Heading>
                <Content>Are you sure you want to delete this item? This action cannot be undone.</Content>
                <ButtonGroup>
                  <Button onPress={close} variant="secondary">Cancel</Button>
                  <Button onPress={close} variant="negative">Delete</Button>
                </ButtonGroup>
              </>
            )}
          </Dialog>
        )}
        {dialogType === 'share' && (
          <Dialog>
            {({close}) => (
              <>
                <Heading slot="title">Share Item</Heading>
                <Content>Choose how you would like to share this item.</Content>
                <ButtonGroup>
                  <Button onPress={close} variant="secondary">Cancel</Button>
                  <Button onPress={close} variant="accent">Share</Button>
                </ButtonGroup>
              </>
            )}
          </Dialog>
        )}
      </DialogContainer>
    </>
  );
}
```

## API

### Dialog

```tsx
<Dialog>
  <Image slot="hero">
  <Heading slot="title" />
  <Header />
  <Content />
  <Footer />
  <ButtonGroup />
</Dialog>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode | ((opts: DialogRenderProps) => ReactNode)` | — | Children of the dialog. A function may be provided to access a function to close the dialog. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDismissible` | `boolean | undefined` | — | Whether the Dialog is dismissible. |
| `isKeyboardDismissDisabled` | `boolean | undefined` | — | Whether pressing the escape key to close the dialog should be disabled. |
| `role` | `"dialog" | "alertdialog" | undefined` | 'dialog' | The accessibility role for the dialog. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Dialog. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### AlertDialog

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `autoFocusButton` | `"cancel" | "primary" | "secondary" | undefined` | — | Button to focus by default when the dialog opens. |
| `cancelLabel` | `string | undefined` | — | The label to display within the cancel button. |
| `children` | `ReactNode` | — | The contents of the AlertDialog. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isPrimaryActionDisabled` | `boolean | undefined` | — | Whether the primary button is disabled. |
| `isSecondaryActionDisabled` | `boolean | undefined` | — | Whether the secondary button is disabled. |
| `onCancel` | `(() => void) | undefined` | — | Handler that is called when the cancel button is pressed. |
| `onPrimaryAction` | `(() => void) | undefined` | — | Handler that is called when the primary button is pressed. |
| `onSecondaryAction` | `(() => void) | undefined` | — | Handler that is called when the secondary button is pressed. |
| `primaryActionLabel` | `string` | — | The label to display within the confirm button. |
| `secondaryActionLabel` | `string | undefined` | — | The label to display within the secondary button. |
| `size` | `"S" | "M" | "L" | undefined` | 'M' | The size of the Dialog. |
| `title` | `string` | — | The title of the AlertDialog. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"error" | "confirmation" | "information" | "destructive" | "warning" | undefined` | 'confirmation' | The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. |

### FullscreenDialog

```tsx
<FullscreenDialog>
  <Heading slot="title" />
  <Header />
  <Content />
  <ButtonGroup />
</FullscreenDialog>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode | ((opts: DialogRenderProps) => ReactNode)` | — | Children of the dialog. A function may be provided to access a function to close the dialog. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isKeyboardDismissDisabled` | `boolean | undefined` | — | Whether pressing the escape key to close the dialog should be disabled. |
| `role` | `"dialog" | "alertdialog" | undefined` | 'dialog' | The accessibility role for the dialog. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"fullscreen" | "fullscreenTakeover" | undefined` | "fullscreen" | The variant of fullscreen dialog to display. |

### CustomDialog

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode | ((opts: DialogRenderProps) => ReactNode)` | — | Children of the dialog. A function may be provided to access a function to close the dialog. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDismissible` | `boolean | undefined` | — | Whether the Dialog is dismissible. |
| `isKeyboardDismissDisabled` | `boolean | undefined` | — | Whether pressing the escape key to close the dialog should be disabled. |
| `padding` | `"none" | "default" | undefined` | 'default' | The amount of padding around the contents of the dialog. |
| `role` | `"dialog" | "alertdialog" | undefined` | 'dialog' | The accessibility role for the dialog. |
| `size` | `"S" | "M" | "L" | "fullscreen" | "fullscreenTakeover" | undefined` | — | The size of the Dialog. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### DialogTrigger

```tsx
<DialogTrigger>
  <Button />
  <Dialog />
</DialogTrigger>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — |  |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |

### DialogContainer

```tsx
<DialogContainer>
  <Dialog />
</DialogContainer>
```

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The Dialog to display, if any. |
| `onDismiss` | `() => void` | — | Handler that is called when the 'x' button of a dismissable Dialog is clicked. |

---

# Source: https://react-spectrum.adobe.com/Disclosure.md

# Disclosure

A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.

```tsx
import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Disclosure
  styles={style({width: 250})}
  >
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>Details about system requirements here.</DisclosurePanel>
</Disclosure>
```

## Expanding

Use the `isExpanded` or `defaultExpanded` prop to set the expanded state, and `onExpandedChange` to handle user interactions.

```tsx
import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
import {useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let [isExpanded, setIsExpanded] = useState(true);

  return (
    <Disclosure
      styles={style({width: 250})}
      /*- begin highlight -*/
      isExpanded={isExpanded}
      onExpandedChange={setIsExpanded}>
      {/*- end highlight -*/}
      <DisclosureTitle>Download, Install, and Set Up</DisclosureTitle>
      <DisclosurePanel>Instructions on how to download, install, and set up</DisclosurePanel>
    </Disclosure>
  );
}
```

## Content

Use `DisclosureHeader` to add additional elements alongside the title, such as action buttons or icons.

```tsx
import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, ActionButton} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Disclosure styles={style({width: 250})}>
  {/*- begin highlight -*/}
  <DisclosureHeader>
    <DisclosureTitle>Project Settings</DisclosureTitle>
    <ActionButton>Edit</ActionButton>
  </DisclosureHeader>
  {/*- end highlight -*/}
  <DisclosurePanel>
    Configure your project settings including name, description, and permissions.
  </DisclosurePanel>
</Disclosure>
```

## API

```tsx
<Disclosure>
  <DisclosureHeader>
    <DisclosureTitle />
  </DisclosureHeader>
  <DisclosurePanel />
</Disclosure>
```

### Disclosure

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. |
| `defaultExpanded` | `boolean | undefined` | — | Whether the disclosure is expanded by default (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | The amount of space between the disclosures. |
| `id` | `Key | undefined` | — | An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. |
| `isDisabled` | `boolean | undefined` | — | Whether the disclosure is disabled. |
| `isExpanded` | `boolean | undefined` | — | Whether the disclosure is expanded (controlled). |
| `isQuiet` | `boolean | undefined` | — | Whether the disclosure should be displayed with a quiet style. |
| `onExpandedChange` | `((isExpanded: boolean) => void) | undefined` | — | Handler that is called when the disclosure's expanded state changes. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the disclosure. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### DisclosureHeader

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — |  |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### DisclosureTitle

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | The contents of the disclosure header. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `level` | `number | undefined` | 3 | The heading level of the disclosure header. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### DisclosurePanel

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `React.ReactNode` | — |  |
| `dir` | `string | undefined` | — |  |
| `hidden` | `boolean | undefined` | — |  |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inert` | `boolean | undefined` | — |  |
| `label` | `React.ReactNode` | — | The content to display as the label. |
| `labelElementType` | `React.ElementType | undefined` | 'label' | The HTML element used to render the label, e.g. 'label', or 'span'. |
| `lang` | `string | undefined` | — |  |
| `onAnimationEnd` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationEndCapture` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationIteration` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationIterationCapture` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationStart` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationStartCapture` | `React.AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAuxClick` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAuxClickCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onClick` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onClickCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onContextMenu` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onContextMenuCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onDoubleClick` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onDoubleClickCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onGotPointerCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onGotPointerCaptureCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onLostPointerCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onLostPointerCaptureCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseDown` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseDownCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseEnter` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseLeave` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseMove` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseMoveCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOut` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOutCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOver` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOverCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseUp` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseUpCapture` | `React.MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerCancel` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerCancelCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerDown` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerDownCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerEnter` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerLeave` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerMove` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerMoveCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOut` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOutCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOver` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOverCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerUp` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerUpCapture` | `React.PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onScroll` | `React.UIEventHandler<HTMLDivElement> | undefined` | — |  |
| `onScrollCapture` | `React.UIEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchCancel` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchCancelCapture` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchEnd` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchEndCapture` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchMove` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchMoveCapture` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchStart` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchStartCapture` | `React.TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionCancel` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionCancelCapture` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionEnd` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionEndCapture` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionRun` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionRunCapture` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionStart` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionStartCapture` | `React.TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onWheel` | `React.WheelEventHandler<HTMLDivElement> | undefined` | — |  |
| `onWheelCapture` | `React.WheelEventHandler<HTMLDivElement> | undefined` | — |  |
| `role` | `"region" | "group" | undefined` | 'group' | The accessibility role for the disclosure's panel. |
| `translate` | `"yes" | "no" | undefined` | — |  |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Divider.md

# Divider

Dividers bring clarity to a layout by grouping and dividing content in close proximity.
They can also be used to establish rhythm and hierarchy.

```tsx
import {Divider} from '@react-spectrum/s2';

<Divider />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `orientation` | `"horizontal" | "vertical" | undefined` | 'horizontal' | The orientation of the Divider. |
| `size` | `"S" | "M" | "L" | undefined` | 'M' | How thick the Divider should be. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the Divider appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/DropZone.md

# DropZone

A drop zone is an area into which one or multiple objects can be dragged and dropped.

```tsx
import {DropZone, IllustratedMessage, Heading, Content, ButtonGroup, Button, FileTrigger} from '@react-spectrum/s2';
import React, {useState} from 'react';
import CloudUpload from '@react-spectrum/s2/illustrations/gradient/generic1/CloudUpload';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  let [content, setContent] = useState<React.ReactNode>(null);
  return (
    <DropZone
      {...props}
      styles={style({width: 320, maxWidth: '90%'})}
      
      isFilled={!!content}
      // Determine whether dragged content should be accepted.
      getDropOperation={types => (
        ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t))
          ? 'copy'
          : 'cancel'
      )}
      onDrop={async (event) => {
        // Find the first accepted item.
        let item = event.items.find(item => (
          (item.kind === 'text' && item.types.has('text/plain')) ||
          (item.kind === 'file' && item.type.startsWith('image/'))
        ));

        if (item?.kind === 'text') {
          let text = await item.getText('text/plain');
          setContent(text);
        } else if (item?.kind === 'file') {
          let file = await item.getFile();
          let url = URL.createObjectURL(file);
          setContent(<img src={url} alt={item.name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
        }
      }}>
      {content || (
        <IllustratedMessage>
          <CloudUpload />
          <Heading>
            Drag and drop your file
          </Heading>
          <Content>
            Or, select a file from your computer
          </Content>
          <ButtonGroup>
            <FileTrigger
              acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
              onSelect={files => {
                if (!files) return;
                let url = URL.createObjectURL(files[0]);
                setContent(<img src={url} alt={files[0].name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
              }}>
              <Button variant="accent">Browse files</Button>
            </FileTrigger>
          </ButtonGroup>
        </IllustratedMessage>
      )}
    </DropZone>
  );
}
```

## API

```tsx
<DropZone>
  <IllustratedMessage />
</DropZone>
```

### DropZone

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the drop zone. |
| `getDropOperation` | `((types: DragTypes, allowedOperations: DropOperation[]) => DropOperation) | undefined` | — | A function returning the drop operation to be performed when items matching the given types are dropped on the drop target. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isFilled` | `boolean | undefined` | — | Whether the drop zone has been filled. |
| `onDrop` | `((e: DropEvent) => void) | undefined` | — | Handler that is called when a valid drag is dropped on the drop target. |
| `onDropActivate` | `((e: DropActivateEvent) => void) | undefined` | — | Handler that is called after a valid drag is held over the drop target for a period of time. This typically opens the item so that the user can drop within it. |
| `onDropEnter` | `((e: DropEnterEvent) => void) | undefined` | — | Handler that is called when a valid drag enters the drop target. |
| `onDropExit` | `((e: DropExitEvent) => void) | undefined` | — | Handler that is called when a valid drag exits the drop target. |
| `onDropMove` | `((e: DropMoveEvent) => void) | undefined` | — | Handler that is called when a valid drag is moved within the drop target. |
| `replaceMessage` | `string | undefined` | 'Drop file to replace' | The message to replace the default banner message that is shown when the drop zone is filled. |
| `size` | `"S" | "M" | "L" | undefined` | 'M' | The size of the DropZone. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Form.md

# Form

Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

```tsx
import {Form, TextField, Checkbox, ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Form>
  <TextField label="Name" placeholder="Enter your full name" />
  <TextField label="Email" type="email" placeholder="Enter your email" />
  <Checkbox>I agree to the terms</Checkbox>
  <ButtonGroup styles={style({gridColumnStart: 'field'})}>
    <Button type="submit" variant="primary">Submit</Button>
    <Button type="reset" variant="secondary">Reset</Button>
  </ButtonGroup>
</Form>
```

## Submitting data

When using React 19, use the `action` prop to handle form submission. This receives a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values for each form field. In React 18 or earlier, use the `onSubmit` event instead. See the [Forms](forms.md) guide details about integrating with frameworks.

## Vanilla CSS example

```tsx
import {Form, TextField, Button} from '@react-spectrum/s2';

<Form
  /*- begin highlight -*/
  action={formData => {
    let name = formData.get('name');
    alert(`Hello, ${name}!`);
  }}>
  {/*- end highlight -*/}
  <TextField name="name" label="Name" placeholder="Enter your full name" />
  <Button type="submit">Submit</Button>
</Form>
```

```tsx
import {Form, TextField, Button} from '@react-spectrum/s2';

<Form
  /*- begin highlight -*/
  onSubmit={event => {
    // Prevent default browser page refresh.
    event.preventDefault();

    // Get data from form.
    let target = event.target as HTMLFormElement;
    let formData = new FormData(target);
    let name = formData.get('name');
    alert(`Hello, ${name}!`);

    // Reset form after submission.
    target.reset();
  }}>
  {/*- end highlight -*/}
  <TextField name="name" label="Name" placeholder="Enter your full name" />
  <Button type="submit">Submit</Button>
</Form>
```

## Validation

Use validation props on each form field to prevent submission of invalid values. When `validationBehavior="aria"`, form submission will not be prevented and validation will occur as the value is edited instead of on form submission. See the [Forms](forms.md) guide for more details.

```tsx
import {Form, TextField, Button} from '@react-spectrum/s2';

<Form>
  <TextField
    label="Username"
    placeholder="Choose a username"
    isRequired
    validate={value => value === 'admin' ? 'Nice try.' : null}
    name="username"
    defaultValue="admin" />
  <Button type="submit">Submit</Button>
</Form>
```

### Server validation

Use the `validationErrors` prop to provide server validation errors to the fields within a `<Form>`.

```tsx
import {Form, TextField} from '@react-spectrum/s2';

<Form
  /*- begin highlight -*/
  validationErrors={{
    username: 'This username is not available.'
  }}>
  {/*- end highlight -*/}
  <TextField
    name="username"
    label="Username"
    placeholder="Choose a username"
    defaultValue="admin" />
</Form>
```

### Focus management

By default, after a user submits a form with validation errors, the first invalid field will be focused. To prevent this, call `preventDefault()` in the `onInvalid` event. This example moves focus to an [alert](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) at the top of the form.

```tsx
import {Form, TextField, Button, InlineAlert, Heading, Content} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'}
import {useState} from 'react';

function Example() {
  let [isInvalid, setInvalid] = useState(false);

  return (
    <Form
      styles={style({width: 300, maxWidth: 'full'})}
      /*- begin highlight -*/
      onInvalid={e => {
        e.preventDefault();
        setInvalid(true);
      }}
      /*- end highlight -*/
      onSubmit={e => {
        e.preventDefault();
        setInvalid(false);
      }}
      onReset={() => setInvalid(false)}>
      {isInvalid &&
        <InlineAlert variant="negative" autoFocus>
          <Heading>Unable to submit</Heading>
          <Content>Please fix the validation errors below, and re-submit the form.</Content>
        </InlineAlert>
      }
      <TextField
        name="firstName"
        isRequired
        label="First name"
        placeholder="Enter your first name" />
      <TextField
        name="lastName"
        isRequired
        label="Last name"
        placeholder="Enter your last name" />
      <div className={style({display: 'flex', gap: 8})}>
        <Button type="submit" variant="accent">Submit</Button>
        <Button type="reset" variant="secondary">Reset</Button>
      </div>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `action` | `string | ((formData: FormData) => void | Promise<void>) | undefined` | — | 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). |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoCapitalize` | `"none" | "off" | "on" | "sentences" | "words" | "characters" | undefined` | — | 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). |
| `autoComplete` | `"off" | "on" | undefined` | — | 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). |
| `children` | `ReactNode` | — |  |
| `encType` | `"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined` | — | 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). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the Form elements are disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the Form elements are rendered with their emphasized style. |
| `isRequired` | `boolean | undefined` | — | Whether the label is labeling a required field or group. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `method` | `"dialog" | "get" | "post" | undefined` | — | The HTTP method to submit the form with. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onInvalid` | `((event: FormEvent<HTMLFormElement>) => void) | undefined` | — | Triggered for each invalid field when a user submits the form. |
| `onReset` | `((event: FormEvent<HTMLFormElement>) => void) | undefined` | — | Triggered when a user resets the form. |
| `onSubmit` | `((event: FormEvent<HTMLFormElement>) => void) | undefined` | — | Triggered when a user submits the form. |
| `role` | `"search" | "presentation" | undefined` | — | An ARIA role override to apply to the form element. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | Size of the Form elements. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `"_self" | "_blank" | "_parent" | "_top" | undefined` | — | 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). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | Whether to use native HTML form validation to prevent form submission when a field value is missing or invalid, or mark fields as required or invalid via ARIA. |
| `validationErrors` | `ValidationErrors | undefined` | — | Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors. |

---

# Source: https://react-spectrum.adobe.com/IllustratedMessage.md

# IllustratedMessage

An IllustratedMessage displays an illustration and a message, usually
for an empty state or an error page.

```tsx
import {IllustratedMessage, Heading, Content, Button, ButtonGroup} from '@react-spectrum/s2';
import Image from '@react-spectrum/s2/illustrations/gradient/generic1/Image';

<IllustratedMessage>
  <Image />
  <Heading>Create your first asset.</Heading>
  <Content>Get started by uploading or importing some assets.</Content>
  <ButtonGroup>
    <Button variant="secondary">Import</Button>
    <Button variant="accent">Upload</Button>
  </ButtonGroup>
</IllustratedMessage>
```

## API

```tsx
<IllustratedMessage>
  <Illustration />
  <Heading />
  <Content />
  <ButtonGroup />
</IllustratedMessage>
```

### IllustratedMessage

---

# Source: https://react-spectrum.adobe.com/Image.md

# Image

An image with support for skeleton loading and custom error states.

```tsx
import {Image} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Image
  
  styles={style({width: 400, maxWidth: 'full', borderRadius: 'default'})} />
```

## Conditional sources

Set the `src` prop to an array of objects describing conditional images, e.g. media queries or image formats. These accept the same props as the \<[source](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source)> HTML element, as well as `colorScheme` to conditionally render images based on the [Provider](Provider.md) color scheme.

```tsx
import {Image, Provider} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Provider>
  <Image
    /*- begin highlight -*/
    src={[
      {colorScheme: 'light', srcSet: 'https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'},
      {colorScheme: 'dark', srcSet: 'https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'}
    ]}
    /*- end highlight -*/
    alt="Conditional image"
    styles={style({height: 300, maxWidth: 'full', borderRadius: 'default'})} />
</Provider>
```

## Error state

Use `renderError` to display a custom error UI when an image fails to load.

```tsx
import {Image} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import ErrorIcon from '@react-spectrum/s2/illustrations/linear/AlertNotice';

<Image
  src=""
  alt="Error image"
  styles={style({width: 400, maxWidth: 'full', height: 200, borderRadius: 'default'})}
  renderError={() => (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', justifyContent: 'center', height: 'full'})}>
      <ErrorIcon />
      <span className={style({font: 'body'})}>Error loading image</span>
    </div>
  )} />
```

## ImageCoordinator

An `ImageCoordinator` coordinates loading behavior for a group of images. Images within an ImageCoordinator are revealed together once all of them have loaded.

```tsx
import {ImageCoordinator, Image} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<ImageCoordinator>
  <div
    className={style({
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
      gridTemplateRows: [180],
      gap: 8
    })}>
    <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" styles={style({objectFit: 'cover', borderRadius: 'sm'})} />
    <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" styles={style({objectFit: 'cover', borderRadius: 'sm'})} />
    <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" styles={style({objectFit: 'cover', borderRadius: 'sm'})} />
    <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" styles={style({objectFit: 'cover', borderRadius: 'sm'})} />
  </div>
</ImageCoordinator>
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `alt` | `string | undefined` | — | Accessible alt text for the image. |
| `crossOrigin` | `"anonymous" | "use-credentials" | undefined` | — | Indicates if the fetching of the image must be done using a CORS request. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). |
| `decoding` | `"auto" | "async" | "sync" | undefined` | — | Whether the browser should decode images synchronously or asynchronously. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding). |
| `fetchPriority` | `"auto" | "high" | "low" | undefined` | — | Provides a hint of the relative priority to use when fetching the image. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority). |
| `group` | `ImageGroup | undefined` | — | A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component. If not provided, the default image group is used. |
| `height` | `number | undefined` | — | The intrinsic height of the image. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height). |
| `itemProp` | `string | undefined` | — | Associates the image with a microdata object. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop). |
| `loading` | `"eager" | "lazy" | undefined` | — | Whether the image should be loaded immediately or lazily when scrolled into view. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading). |
| `referrerPolicy` | `HTMLAttributeReferrerPolicy | undefined` | — | A string indicating which referrer to use when fetching the resource. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy). |
| `renderError` | `(() => ReactNode) | undefined` | — | A function that is called to render a fallback when the image fails to load. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `src` | `string | ImageSource[] | undefined` | — | The URL of the image or a list of conditional sources. |
| `styles` | `StyleString | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `width` | `number | undefined` | — | The intrinsic width of the image. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width). |

---

# Source: https://react-spectrum.adobe.com/InlineAlert.md

# InlineAlert

Inline alerts display a non-modal message associated with objects in a view.
These are often used in form validation, providing a place to aggregate feedback related to multiple fields.

```tsx
import {InlineAlert, Heading, Content} from '@react-spectrum/s2';

<InlineAlert>
  <Heading>Payment Information</Heading>
  <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
</InlineAlert>
```

## Auto focus

Use the `autoFocus` prop to focus the alert when it first renders. This is useful for displaying alerts that need immediate attention, such as form submission errors.

```tsx
import {InlineAlert, Heading, Content, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [shown, setShown] = useState(false);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'})}>
      <Button variant="primary" onPress={() => setShown(!shown)}>
        {shown ? 'Hide Alert' : 'Show Alert'}
      </Button>
      {shown &&
        <InlineAlert variant="negative" autoFocus>
          <Heading>Error</Heading>
          <Content>There was an error processing your request. Please try again.</Content>
        </InlineAlert>
      }
    </div>
  );
}
```

## API

```tsx
<InlineAlert>
  <Heading />
  <Content />
</InlineAlert>
```

### InlineAlert

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `autoFocus` | `boolean | undefined` | — | Whether to automatically focus the Inline Alert when it first renders. |
| `children` | `ReactNode` | — | The contents of the Inline Alert. |
| `fillStyle` | `"border" | "subtleFill" | "boldFill" | undefined` | border | The visual style of the Inline Alert. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"informative" | "neutral" | "positive" | "notice" | "negative" | undefined` | neutral | The semantic tone of a Inline Alert. |

---

# Source: https://react-spectrum.adobe.com/Link.md

# Link

Links allow users to navigate to a different location.
They can be presented inline inside a paragraph or as standalone text.

```tsx
import {Link} from '@react-spectrum/s2';

<Link />
```

## Events

Links with an `href` will be handled by the browser, or via a [client side router](getting-started.md). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.

```tsx
import {Link} from '@react-spectrum/s2';

<Link onPress={() => alert('Pressed link')}>Link</Link>
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — |  |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| `isQuiet` | `boolean | undefined` | — | Whether the link should be displayed with a quiet style. |
| `isStandalone` | `boolean | undefined` | — | Whether the link is on its own vs inside a longer string of text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the link appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"primary" | "secondary" | undefined` | 'primary' | The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link. |

---

# Source: https://react-spectrum.adobe.com/LinkButton.md

# LinkButton



```tsx
import {LinkButton} from '@react-spectrum/s2';

<LinkButton />
```

## API

```tsx
<LinkButton>
  <Icon />
  <Text />
</LinkButton>
```

### LinkButton

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The content to display in the Button. |
| `download` | `string | boolean | undefined` | — | 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). |
| `fillStyle` | `"outline" | "fill" | undefined` | 'fill' | The background style of the Button. |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| `isDisabled` | `boolean | undefined` | — | Whether the link is disabled. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Button. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the Button appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"accent" | "negative" | "primary" | "secondary" | "premium" | "genai" | undefined` | 'primary' | The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. |

---

# Source: https://react-spectrum.adobe.com/Menu.md

# Menu

Menus display a list of actions or options that a user can choose.

```tsx
import {Menu, MenuTrigger, MenuItem, MenuSection, SubmenuTrigger, Header, Heading, Text, ActionButton} from '@react-spectrum/s2';
import Image from '@react-spectrum/s2/icons/Image';
import Copy from '@react-spectrum/s2/icons/Copy';
import DeviceTablet from '@react-spectrum/s2/icons/DeviceTablet';
import DeviceDesktop from '@react-spectrum/s2/icons/DeviceDesktop';

function Example(props) {
  return (
    <MenuTrigger>
      <ActionButton>Publish</ActionButton>
      <Menu {...props}>
        <MenuSection>
          <Header>
            <Heading>Publish and export</Heading>
            <Text slot="description">
              Social media, other formats
            </Text>
          </Header>
          <MenuItem
            textValue="quick export"
            onAction={() => alert('Quick export')}>
            <Image />
            <Text slot="label">Quick Export</Text>
            <Text slot="description">
              Share a low-res snapshot.
            </Text>
          </MenuItem>
          <SubmenuTrigger>
            <MenuItem textValue="open a copy">
              <Copy />
              <Text slot="label">Open a copy</Text>
              <Text slot="description">
                Illustrator for iPad or desktop
              </Text>
            </MenuItem>
            <Menu>
              <MenuSection>
                <Header>
                  <Heading>Open a copy in</Heading>
                </Header>
                <MenuItem
                  textValue="ipad"
                  onAction={() => alert('Open on iPad')}>
                  <DeviceTablet />
                  <Text slot="label">Illustrator for iPad</Text>
                </MenuItem>
                <MenuItem
                  textValue="desktop"
                  onAction={() => alert('Open on desktop')}>
                  <DeviceDesktop />
                  <Text slot="label">Illustrator for desktop</Text>
                </MenuItem>
              </MenuSection>
            </Menu>
          </SubmenuTrigger>
        </MenuSection>
        <MenuSection selectionMode="multiple" defaultSelectedKeys={['files']}>
          <MenuItem id="files">Show files</MenuItem>
          <MenuItem id="folders">Show folders</MenuItem>
        </MenuSection>
      </Menu>
    </MenuTrigger>
  );
}
```

## Content

`Menu` follows the [Collection Components API](collections.md?component=Menu), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children.

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton} from '@react-spectrum/s2';

let items = [
  {id: 'cut', name: 'Cut'},
  {id: 'copy', name: 'Copy'},
  {id: 'paste', name: 'Paste'},
  {id: 'select-all', name: 'Select All'}
];

<MenuTrigger>
  <ActionButton>Edit</ActionButton>
  {/*- begin highlight -*/}
  <Menu items={items}>
    {item => <MenuItem>{item.name}</MenuItem>}
  </Menu>
  {/*- end highlight -*/}
</MenuTrigger>
```

### Slots

`MenuItem` supports icons or images, `label` and `description` text slots, and keyboard shortcuts.

## Vanilla CSS example

```tsx
import {MenuTrigger, ActionButton, Menu, MenuItem, Text, Keyboard} from '@react-spectrum/s2';
import Copy from '@react-spectrum/s2/icons/Copy';
import Cut from '@react-spectrum/s2/icons/Cut';
import Paste from '@react-spectrum/s2/icons/Paste';

<MenuTrigger>
  <ActionButton>Edit</ActionButton>
  <Menu>
    <MenuItem textValue="Copy">
      {/*- begin highlight -*/}
      <Copy />
      <Text slot="label">Copy</Text>
      <Text slot="description">Copy the selected text</Text>
      <Keyboard>⌘C</Keyboard>
      {/*- end highlight -*/}
    </MenuItem>
    <MenuItem textValue="Cut">
      <Cut />
      <Text slot="label">Cut</Text>
      <Text slot="description">Cut the selected text</Text>
      <Keyboard>⌘X</Keyboard>
    </MenuItem>
    <MenuItem textValue="Paste">
      <Paste />
      <Text slot="label">Paste</Text>
      <Text slot="description">Paste the copied text</Text>
      <Keyboard>⌘V</Keyboard>
    </MenuItem>
  </Menu>
</MenuTrigger>
```

## S2 example

```tsx
import {MenuTrigger, ActionButton, Menu, MenuItem, Text, Image} from '@react-spectrum/s2';
import normal from 'url:./assets/normal.png';
import multiply from 'url:./assets/multiply.png';
import screen from 'url:./assets/screen.png';

<MenuTrigger>
  <ActionButton>Blend mode</ActionButton>
  <Menu>
    <MenuItem textValue="normal">
      {/*- begin highlight -*/}
      <Image src={normal} />
      <Text slot="label">Normal</Text>
      <Text slot="description">No effect applied.</Text>
      {/*- end highlight -*/}
    </MenuItem>
    <MenuItem textValue="multiply">
      <Image src={multiply} />
      <Text slot="label">Multiply</Text>
      <Text slot="description">Add contrast, detail, and darken shadows.</Text>
    </MenuItem>
    <MenuItem textValue="screen">
      <Image src={screen} />
      <Text slot="label">Screen</Text>
      <Text slot="description">Reduce contrast and brighten details.</Text>
    </MenuItem>
  </Menu>
</MenuTrigger>
```

<InlineAlert variant="notice">
  <Heading>Accessibility</Heading>
  <Content>Interactive elements (e.g. buttons) within menu items are not allowed. This will break keyboard and screen reader navigation. Only add textual or decorative graphics (e.g. icons or images) as children.</Content>
</InlineAlert>

### Sections

Use the `<MenuSection>` component to group options. A `<Header>` element, with a `<Heading>` and optional `description` slot can be included to label a section. Sections without a header must have an `aria-label`.

```tsx
import {MenuTrigger, ActionButton, Menu, MenuItem, MenuSection, Header, Heading, Text} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Publish</ActionButton>
  <Menu>
    {/*- begin highlight -*/}
    <MenuSection>
      <Header>
        <Heading>Export</Heading>
        <Text slot="description">Save to your device</Text>
      </Header>
      {/*- end highlight -*/}
      <MenuItem>Image…</MenuItem>
      <MenuItem>Video…</MenuItem>
      <MenuItem>Text…</MenuItem>
    </MenuSection>
    <MenuSection>
      <Header>
        <Heading>Share</Heading>
        <Text slot="description">Share to social media</Text>
      </Header>
      <MenuItem>YouTube…</MenuItem>
      <MenuItem>Instagram…</MenuItem>
      <MenuItem>Email…</MenuItem>
    </MenuSection>
  </Menu>
</MenuTrigger>
```

### Submenus

Wrap a `<MenuItem>` and a `<Menu>` with a `<SubmenuTrigger>` to create a submenu.

```tsx
import {Menu, MenuTrigger, MenuItem, SubmenuTrigger, ActionButton} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Actions</ActionButton>
  <Menu>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Paste</MenuItem>
    {/*- begin highlight -*/}
    <SubmenuTrigger>
      <MenuItem id="share">Share</MenuItem>
      <Menu>
      {/*- end highlight -*/}
        <MenuItem>Email</MenuItem>
        <MenuItem>SMS</MenuItem>
        <MenuItem>Copy Link</MenuItem>
      </Menu>
    </SubmenuTrigger>
  </Menu>
</MenuTrigger>
```

### Links

Use the `href` prop on a `<MenuItem>` to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework.

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton} from '@react-spectrum/s2';

function Example(props) {
  return (
    <MenuTrigger>
      <ActionButton>Links</ActionButton>
      <Menu {...props}>
        {/*- begin highlight -*/}
        <MenuItem href="https://adobe.com/" target="_blank">Adobe</MenuItem>
        {/*- end highlight -*/}
        <MenuItem href="https://apple.com/" target="_blank">Apple</MenuItem>
        <MenuItem href="https://google.com/" target="_blank">Google</MenuItem>
        <MenuItem href="https://microsoft.com/" target="_blank">Microsoft</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}
```

### Popover content

Wrap the Menu in a [Popover](Popover.md) to add additional sibling elements. This example includes a header with interactive content.

```tsx
import {Popover, MenuTrigger, ActionButton, Menu, MenuItem, MenuSection, SubmenuTrigger, Avatar, Switch, Divider, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Buildings from '@react-spectrum/s2/icons/Buildings';
import Settings from '@react-spectrum/s2/icons/Settings';

<MenuTrigger>
  <ActionButton aria-label="Account">
    <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
  </ActionButton>
  {/*- begin highlight -*/}
  <Popover>
  {/*- end highlight -*/}
    <div className={style({paddingTop: 4, display: 'flex', flexDirection: 'column', gap: 12})}>
      <div className={style({display: 'flex', gap: 12, alignItems: 'center', marginX: 12})}>
        <Avatar src="https://i.imgur.com/xIe7Wlb.png" size={56} />
        <div>
          <div className={style({font: 'title'})}>Devon Govett</div>
          <div className={style({font: 'ui'})}>user@example.com</div>
          <Switch styles={style({marginTop: 4})}>Dark theme</Switch>
        </div>
      </div>
      <Divider styles={style({marginX: 12})} />
      <Menu aria-label="Account">
        <MenuSection>
          <SubmenuTrigger>
            <MenuItem>
              <Buildings />
              <Text slot="label">Organization</Text>
              <Text slot="value">Nike</Text>
            </MenuItem>
            <Menu selectionMode="single" selectedKeys={['nike']}>
              <MenuItem id="adobe">Adobe</MenuItem>
              <MenuItem id="nike">Nike</MenuItem>
              <MenuItem id="apple">Apple</MenuItem>
            </Menu>
          </SubmenuTrigger>
          <MenuItem>
            <Settings />
            <Text slot="label">Settings</Text>
          </MenuItem>
        </MenuSection>
        <MenuSection>
          <MenuItem>Legal notices</MenuItem>
          <MenuItem>Sign out</MenuItem>
        </MenuSection>
      </Menu>
    </div>
  </Popover>
</MenuTrigger>
```

### Autocomplete

Use [Autocomplete](react-aria:Autocomplete.md) from React Aria Components with a [SearchField](SearchField.md) to make a menu searchable.

```tsx
import {Autocomplete, MenuTrigger, ActionButton, Menu, MenuItem, Popover, SearchField} from '@react-spectrum/s2';
import {useFilter} from 'react-aria-components';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let {contains} = useFilter({sensitivity: 'base'});

  return (
    <MenuTrigger>
      <ActionButton>Add tag...</ActionButton>
      <Popover aria-label="Select a tag">
        {/*- begin highlight -*/}
        <Autocomplete filter={contains}>
          <SearchField aria-label="Search tags" autoFocus />
          <Menu styles={style({marginTop: 8})}>
            {/*- end highlight -*/}
            <MenuItem>News</MenuItem>
            <MenuItem>Travel</MenuItem>
            <MenuItem>Shopping</MenuItem>
            <MenuItem>Business</MenuItem>
            <MenuItem>Entertainment</MenuItem>
            <MenuItem>Food</MenuItem>
            <MenuItem>Technology</MenuItem>
            <MenuItem>Health</MenuItem>
            <MenuItem>Science</MenuItem>
          </Menu>
        </Autocomplete>
      </Popover>
    </MenuTrigger>
  );
}
```

## Selection

Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=Menu) for more details.

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton, Selection} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set(['rulers']));

  return (
    <>
      <MenuTrigger>
        <ActionButton>View</ActionButton>
        <Menu
          {...props}
          /*- begin highlight -*/
          
          selectedKeys={selected}
          onSelectionChange={setSelected}>
          {/*- end highlight */}
          <MenuItem id="grid">Pixel grid</MenuItem>
          <MenuItem id="rulers">Rulers</MenuItem>
          <MenuItem id="comments" isDisabled>Comments</MenuItem>
          <MenuItem id="layout">Layout guides</MenuItem>
          <MenuItem id="toolbar">Toolbar</MenuItem>
        </Menu>
      </MenuTrigger>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}
```

### Section-level selection

Each section in a menu may have independent selection states by passing `selectionMode` and `selectedKeys` to the `MenuSection`.

```tsx
import {Menu, MenuTrigger, MenuItem, MenuSection, Header, Heading, ActionButton, Selection} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [style, setStyle] = useState<Selection>(new Set(['bold']));
  let [align, setAlign] = useState<Selection>(new Set(['left']));
  return (
    <MenuTrigger>
      <ActionButton>Edit</ActionButton>
      <Menu>
        <MenuSection>
          <Header>
            <Heading>Clipboard</Heading>
          </Header>
          <MenuItem>Cut</MenuItem>
          <MenuItem>Copy</MenuItem>
          <MenuItem>Paste</MenuItem>
        </MenuSection>
        {/*- begin highlight -*/}
        <MenuSection
          selectionMode="multiple"
          selectedKeys={style}
          onSelectionChange={setStyle}>
          {/*- end highlight -*/}
          <Header>
            <Heading>Text style</Heading>
          </Header>
          <MenuItem id="bold">Bold</MenuItem>
          <MenuItem id="italic">Italic</MenuItem>
          <MenuItem id="underline">Underline</MenuItem>
        </MenuSection>
        <MenuSection selectionMode="single" selectedKeys={align} onSelectionChange={setAlign}>
          <Header>
            <Heading>Text alignment</Heading>
          </Header>
          <MenuItem id="left">Left</MenuItem>
          <MenuItem id="center">Center</MenuItem>
          <MenuItem id="right">Right</MenuItem>
        </MenuSection>
      </Menu>
    </MenuTrigger>
  );
}
```

## Menu trigger

MenuTrigger accepts props to control trigger interactions and Menu positioning.

```tsx
import {MenuTrigger, Menu, MenuItem, ActionButton} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Copy</ActionButton>
  <Menu>
    <MenuItem>Copy as plain text</MenuItem>
    <MenuItem>Copy as rich text</MenuItem>
    <MenuItem>Copy URL</MenuItem>
  </Menu>
</MenuTrigger>
```

## API

```tsx
<MenuTrigger>
  <Button />
  <Menu>
    <MenuItem>
      <Icon /> or <Image />
      <Text slot="label" />
      <Text slot="description" />
      <Keyboard />
    </MenuItem>
    <MenuSection>
      <Header>
        <Heading />
        <Text slot="description" />
      </Header>
      <MenuItem />
    </MenuSection>
    <SubmenuTrigger>
      <MenuItem />
      <Menu />
    </SubmenuTrigger>
  </Menu>
</MenuTrigger>
```

### MenuTrigger

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"start" | "end" | undefined` | 'start' | Alignment of the menu relative to the trigger. |
| `children` | `ReactNode` | — |  |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `direction` | `"top" | "bottom" | "start" | "end" | "left" | "right" | undefined` | 'bottom' | Where the Menu opens relative to its trigger. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `shouldFlip` | `boolean | undefined` | true | Whether the menu should automatically flip direction when space is limited. |
| `trigger` | `MenuTriggerType | undefined` | 'press' | How the menu is triggered. |

### Menu

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | FocusStrategy | undefined` | — | Where the focus should be set. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the menu or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `hideLinkOutIcon` | `boolean | undefined` | — | Hides the default link out icons on menu items that open links in a new tab. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when an item is selected. |
| `onClose` | `(() => void) | undefined` | — | Handler that is called when the menu should close after selecting an item. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `shouldFocusWrap` | `boolean | undefined` | — | Whether keyboard navigation is circular. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Menu. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### MenuItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for this item. |
| `children` | `ReactNode` | — | The contents of the item. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when the item is selected. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |

### MenuSection

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for the section. |
| `children` | `ReactNode` | — | The children of the menu section. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The currently disabled keys in the collection (controlled). |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `id` | `Key | undefined` | — | The unique id of the section. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the section. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `value` | `T | undefined` | — | The object value that this section represents. When using dynamic collections, this is set automatically. |

### SubmenuTrigger

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactElement<unknown, string | JSXElementConstructor<any>>[]` | — | The contents of the SubmenuTrigger. The first child should be an Item (the trigger) and the second child should be the Popover (for the submenu). |

---

# Source: https://react-spectrum.adobe.com/Meter.md

# Meter

Meters are visual representations of a quantity or an achievement.
Their progress is determined by user actions, rather than system actions.

```tsx
import {Meter} from '@react-spectrum/s2';

<Meter />
```

## Value

By default, the `value` prop is a percentage between 0 and 100. Use the `minValue`, and `maxValue` props to set a custom value scale.

```tsx
import {Meter} from '@react-spectrum/s2';

<Meter />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `formatOptions` | `Intl.NumberFormatOptions | undefined` | \{style: 'percent'} | The display format of the value label. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `number | undefined` | 100 | The largest value allowed for the input. |
| `minValue` | `number | undefined` | 0 | The smallest value allowed for the input. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Meter. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the button appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `number | undefined` | 0 | The current value (controlled). |
| `valueLabel` | `ReactNode` | — | The content to display as the value's label (e.g. 1 of 4). |
| `variant` | `"informative" | "positive" | "notice" | "negative" | undefined` | 'informative' | The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter. |

---

# Source: https://react-spectrum.adobe.com/NumberField.md

# NumberField

NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.

```tsx
import {NumberField} from '@react-spectrum/s2';

<NumberField />
```

## Value

Use the `value` or `defaultValue` prop to set the number value. The `onChange` event is called when the user finishes editing the value (e.g. on blur, incrementing, or decrementing).

```tsx
import {NumberField} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(25);
  return (
    <div>
      <NumberField
        label="Cookies to buy"
        placeholder="Enter a number"
        value={value}
        onChange={setValue}
      />
      <p>Current value: {value}</p>
    </div>
  );
}
```

### Format options

Use the `formatOptions` prop to control how the value is formatted (according to the user's locale). This is compatible with the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) API.

```tsx
import {NumberField} from '@react-spectrum/s2';

<NumberField />
```

### Value scale

Use the `minValue`, `maxValue`, and `step` props to set the allowed values. Steps are calculated starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc.

```tsx
import {NumberField} from '@react-spectrum/s2';

<NumberField />
```

### Numbering system

By default, `NumberField` displays the value using the numbering system for the user's locale. Use `<Provider>` to override the numbering system by setting the [Unicode numbering system locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem#adding_a_numbering_system_via_the_locale_string). The Latin, Arabic, Devanagari, Bengali, and Han positional decimal numbering systems are currently supported.

{console.log(docs.exports.Provider)}

```tsx
import {Provider, NumberField} from '@react-spectrum/s2';

<Provider>
  <NumberField
    label="Value"
    defaultValue={1024}
    placeholder="Enter a number" />
</Provider>
```

## Forms

Use the `name` prop to submit the raw number value (not a formatted string) to the server. Set the `isRequired` prop to validate that the user enters a value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {NumberField, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <NumberField
        {...props}
        label="Width"
        name="width"
        
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `decrementAriaLabel` | `string | undefined` | — | A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. |
| `defaultValue` | `number | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `formatOptions` | `Intl.NumberFormatOptions | undefined` | — | Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. |
| `hideStepper` | `boolean | undefined` | false | Whether to hide the increment and decrement buttons. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `incrementAriaLabel` | `string | undefined` | — | A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `isWheelDisabled` | `boolean | undefined` | — | Enables or disables changing the value with scroll. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `number | undefined` | — | The largest value allowed for the input. |
| `minValue` | `number | undefined` | — | The smallest value allowed for the input. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBeforeInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: number) => void) | undefined` | — | Handler that is called when the value changes. |
| `onCompositionEnd` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| `onCompositionStart` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event). |
| `onCopy` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| `onCut` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPaste` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| `onSelect` | `ReactEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event). |
| `placeholder` | `string | undefined` | — | Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the NumberField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `step` | `number | undefined` | — | The amount that the input value changes with each increment or decrement "tick". |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: number) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `number | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/Picker.md

# Picker

Pickers allow users to choose a single option from a collapsible list of options when space is limited.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2';

<Picker>
  <PickerItem>Chocolate</PickerItem>
  <PickerItem>Mint</PickerItem>
  <PickerItem>Strawberry</PickerItem>
  <PickerItem>Vanilla</PickerItem>
  <PickerItem>Chocolate Chip Cookie Dough</PickerItem>
</Picker>
```

## Content

`Picker` follows the [Collection Components API](collections.md?component=Picker), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2';

function Example() {
  let options = [
    { id: 1, name: 'Aardvark' },
    { id: 2, name: 'Cat' },
    { id: 3, name: 'Dog' },
    { id: 4, name: 'Kangaroo' },
    { id: 5, name: 'Koala' },
    { id: 6, name: 'Penguin' },
    { id: 7, name: 'Snake' },
    { id: 8, name: 'Turtle' },
    { id: 9, name: 'Wombat' }
  ];

  return (
    /*- begin highlight -*/
    <Picker label="Animals" items={options}>
      {(item) => <PickerItem>{item.name}</PickerItem>}
    </Picker>
    /*- end highlight -*/
  );
}
```

### Slots

`PickerItem` supports icons, avatars, and `label` and `description` text slots.

```tsx
import {Avatar, Picker, PickerItem, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Comment from '@react-spectrum/s2/icons/Comment';
import Edit from '@react-spectrum/s2/icons/Edit';
import UserSettings from '@react-spectrum/s2/icons/UserSettings';

const users = Array.from({length: 5}, (_, i) => ({
  id: `user${i + 1}`,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  avatar: 'https://i.imgur.com/kJOwAdv.png'
}));

<div className={style({display: 'flex', gap: 12, flexWrap: 'wrap'})}>
  <Picker label="Permissions" defaultValue="read">
    <PickerItem id="read" textValue="Read">
      {/*- begin highlight -*/}
      <Comment />
      <Text slot="label">Read</Text>
      <Text slot="description">Comment only</Text>
      {/*- end highlight -*/}
    </PickerItem>
    <PickerItem id="write" textValue="Write">
      <Edit />
      <Text slot="label">Write</Text>
      <Text slot="description">Read and write only</Text>
    </PickerItem>
    <PickerItem id="admin" textValue="Admin">
      <UserSettings />
      <Text slot="label">Admin</Text>
      <Text slot="description">Full access</Text>
    </PickerItem>
  </Picker>
  <Picker label="Share" items={users} defaultValue="user1">
    {(item) => (
      <PickerItem id={item.id} textValue={item.name}>
        {/*- begin highlight -*/}
        <Avatar slot="avatar" src={item.avatar} />
        {/*- end highlight -*/}
        <Text slot="label">{item.name}</Text>
        <Text slot="description">{item.email}</Text>
      </PickerItem>
    )}
  </Picker>
</div>
```

<InlineAlert variant="notice">
  <Heading>Accessibility</Heading>
  <Content>Interactive elements (e.g. buttons) within picker items are not allowed. This will break keyboard and screen reader navigation. Only add textual or decorative graphics (e.g. icons) as children.</Content>
</InlineAlert>

### Sections

Use the `<PickerSection>` component to group options. A `<Header>` element, with a `<Heading>` and optional `description` slot can be included to label a section. Sections without a header must have an `aria-label`.

```tsx
import {Picker, PickerSection, PickerItem, Header, Heading, Text} from '@react-spectrum/s2';

<Picker label="Ice cream flavor">
  {/*- begin highlight -*/}
  <PickerSection>
    <Header>
      <Heading>Neopolitan flavors</Heading>
      <Text slot="description">These flavors are common</Text>
    </Header>
    {/*- end highlight -*/}
    <PickerItem>Chocolate</PickerItem>
    <PickerItem>Strawberry</PickerItem>
    <PickerItem>Vanilla</PickerItem>
  </PickerSection>
  <PickerSection>
    <Header>
      <Heading>Others</Heading>
      <Text slot="description">These flavors are uncommon</Text>
    </Header>
    <PickerItem>Matcha</PickerItem>
    <PickerItem>Ube</PickerItem>
    <PickerItem>Prickly pear</PickerItem>
  </PickerSection>
</Picker>
```

### Asynchronous loading

Use the `loadingState` and `onLoadMore` props to enable async loading and infinite scrolling.

```tsx
import {Picker, PickerItem, useAsyncList} from '@react-spectrum/s2';

interface Character {
  name: string
}

function AsyncLoadingExample() {
  let list = useAsyncList<Character>({
    async load({signal, cursor}) {
      let res = await fetch(
        cursor || `https://pokeapi.co/api/v2/pokemon`,
        { signal }
      );
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <Picker
      aria-label="Pokemon"
      items={list.items}
      /*- begin highlight -*/
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}>
      {/*- end highlight -*/}
      {(item) => <PickerItem id={item.name}>{item.name}</PickerItem>}
    </Picker>
  );
}
```

### Links

Use the `href` prop on a `<PickerItem>` to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework. Link items in a `Picker` are not selectable.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2';

<Picker label="Project">
  <PickerItem href="https://example.com/" target="_blank">Create new…</PickerItem>
  <PickerItem>Proposal</PickerItem>
  <PickerItem>Budget</PickerItem>
  <PickerItem>Onboarding</PickerItem>
</Picker>
```

## Value

Use the `defaultValue` or `value` prop to set the selected item. The value corresponds to the `id` prop of an item. When `selectionMode="multiple"`, `value` and `onChange` accept an array. Items can be disabled with the `isDisabled` prop.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example(props) {
  let [animal, setAnimal] = useState("bison");

  return (
    <div>
      <Picker
        {...props}
        label="Pick an animal"
        
        value={animal}
        onChange={setAnimal}
      >
        <PickerItem id="koala">Koala</PickerItem>
        <PickerItem id="kangaroo">Kangaroo</PickerItem>
        <PickerItem id="platypus" isDisabled>Platypus</PickerItem>
        <PickerItem id="eagle">Bald Eagle</PickerItem>
        <PickerItem id="bison">Bison</PickerItem>
        <PickerItem id="skunk">Skunk</PickerItem>
      </Picker>
      <pre className={style({font: 'body'})}>Current selection: {JSON.stringify(animal)}</pre>
    </div>
  );
}
```

## Forms

Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects an option, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {Picker, PickerItem, Form, Button} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <Picker
        {...props}
        label="Animal"
        /*- begin highlight -*/
        name="animal"
        
        /*- end highlight -*/
        description="Please select an animal.">
        <PickerItem id="aardvark">Aardvark</PickerItem>
        <PickerItem id="cat">Cat</PickerItem>
        <PickerItem id="dog">Dog</PickerItem>
        <PickerItem id="kangaroo">Kangaroo</PickerItem>
        <PickerItem id="panda">Panda</PickerItem>
        <PickerItem id="snake">Snake</PickerItem>
      </Picker>
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## Popover options

The open state of the Picker can be controlled via the `defaultOpen` and `isOpen` props. The `align`, `direction`, `shouldFlip` and `menuWidth` props control the behavior of the popover.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [open, setOpen] = useState(false);

  return (
    <div>
      <p>Select is {open ? 'open' : 'closed'}</p>
      <Picker
        {...props}
        label="Choose frequency"
        /*- begin highlight -*/
        
        isOpen={open}
        onOpenChange={setOpen}>
        {/*- end highlight -*/}
        <PickerItem id="rarely">Rarely</PickerItem>
        <PickerItem id="sometimes">Sometimes</PickerItem>
        <PickerItem id="always">Always</PickerItem>
      </Picker>
    </div>
  );
}
```

## API

```tsx
<Picker>
  <PickerItem>
    <Icon /> or <Avatar />
    <Text slot="label" />
    <Text slot="description" />
  </PickerItem>
  <PickerSection>
    <Header>
      <Heading />
      <Text slot="description" />
    </Header>
    <PickerItem />
  </PickerSection>
</Picker>
```

### Picker

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"start" | "end" | undefined` | 'start' | Alignment of the menu relative to the input target. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `React.ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `contextualHelp` | `React.ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultOpen` | `boolean | undefined` | — | Sets the default open state of the menu. |
| `defaultSelectedKey` | `Key | undefined` | — | The initial selected key in the collection (uncontrolled). |
| `defaultValue` | `ValueType<M> | undefined` | — | The default value (uncontrolled). |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `description` | `React.ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `direction` | `"top" | "bottom" | undefined` | 'bottom' | Direction the menu will render relative to the Picker. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `errorMessage` | `React.ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isOpen` | `boolean | undefined` | — | Sets the open state of the menu. |
| `isQuiet` | `boolean | undefined` | — | Whether the picker should be displayed with a quiet style. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `label` | `React.ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `loadingState` | `LoadingState | undefined` | — | The current loading state of the Picker. |
| `menuWidth` | `number | undefined` | — | Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. |
| `name` | `string | undefined` | — | The name of the input, used when submitting an HTML form. |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: ValueType<M>) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onLoadMore` | `(() => any) | undefined` | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Method that is called when the open state of the menu changes. |
| `onSelectionChange` | `((key: Key | null) => void) | undefined` | — | Handler that is called when the selection changes. |
| `placeholder` | `string | undefined` | 'Select an item' (localized) | Temporary text that occupies the select when it is empty. |
| `selectedKey` | `Key | null | undefined` | — | The currently selected key in the collection (controlled). |
| `selectionMode` | `M | undefined` | 'single' | Whether single or multiple selection is enabled. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Picker. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: ValidationType<M>) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `ValueType<M> | undefined` | — | The current value (controlled). |

### PickerItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for this item. |
| `children` | `React.ReactNode` | — |  |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the item. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onBlur` | `((e: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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` | `React.HTMLAttributeReferrerPolicy | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `React.HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the item's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `object | undefined` | — | The object value that this item represents. When using dynamic collections, this is set automatically. |

### PickerSection

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for the section. |
| `children` | `React.ReactNode | ((item: T) => React.ReactElement)` | — | Static child items or a function to render children. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `id` | `Key | undefined` | — | The unique id of the section. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the section. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `T | undefined` | — | The object value that this section represents. When using dynamic collections, this is set automatically. |

---

# Source: https://react-spectrum.adobe.com/Popover.md

# Popover

A popover is an overlay element positioned relative to a trigger.

```tsx
import {Popover, DialogTrigger, ActionButton, Form, TextField, Switch, Button} from '@react-spectrum/s2';
import Feedback from '@react-spectrum/s2/icons/Feedback';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  return (
    <DialogTrigger>
      <ActionButton aria-label="Feedback">
        <Feedback />
      </ActionButton>
      {/*- begin focus -*/}
      <Popover {...props}>
        <div className={style({padding: 12})}>
          <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
          <Form>
            <TextField label="Subject" placeholder="Enter a summary" />
            <TextField label="Description" isRequired placeholder="Enter your feedback" />
            <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
            <Button styles={style({marginStart: 'auto'})}>Submit</Button>
          </Form>
        </div>
      </Popover>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

## Custom anchor

To position a popover relative to a different element than its trigger, use the `triggerRef` and `isOpen` props instead of `<DialogTrigger>`. `onOpenChange` will be called when the user closes the popover.

```tsx
import {Popover, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState, useRef} from 'react';

function Example() {
  let [isOpen, setOpen] = useState(false);
  let triggerRef = useRef(null);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'})}>
      <Button onPress={() => setOpen(!isOpen)}>
        Open popover
      </Button>
      <div
        ref={triggerRef}
        className={style({
          padding: 8,
          backgroundColor: 'gray-100',
          borderRadius: 'default',
          font: 'ui'
        })}>
        Popover appears here
      </div>
      <Popover
        /*- begin highlight -*/
        triggerRef={triggerRef}
        isOpen={isOpen}
        onOpenChange={setOpen}>
        {/*- end highlight -*/}
        <div className={style({font: 'ui'})}>
          Popover with custom trigger reference
        </div>
      </Popover>
    </div>
  );
}

<Example />
```

## API

```tsx
<DialogTrigger>
  <Button />
  <Popover>
    {/* ... */}
  </Popover>
</DialogTrigger>
```

### DialogTrigger

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — |  |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |

### Popover

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `arrowRef` | `RefObject<Element | null> | undefined` | — | A ref for the popover arrow element. |
| `boundaryElement` | `Element | undefined` | document.body | Element that that serves as the positioning boundary. |
| `children` | `ChildrenOrFunction<PopoverRenderProps>` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `containerPadding` | `number | undefined` | 12 | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number | undefined` | 0 | The additional offset applied along the cross axis between the element and its anchor element. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `hideArrow` | `boolean | undefined` | false | Whether a popover's arrow should be hidden. |
| `isEntering` | `boolean | undefined` | — | Whether the popover is currently performing an entry animation. |
| `isExiting` | `boolean | undefined` | — | Whether the popover is currently performing an exit animation. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `maxHeight` | `number | undefined` | — | The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height. |
| `offset` | `number | undefined` | 8 | The additional offset applied along the main axis between the element and its anchor element. |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `placement` | `Placement | undefined` | 'bottom' | The placement of the element with respect to its anchor element. |
| `scrollRef` | `RefObject<Element | null> | undefined` | overlayRef | A ref for the scrollable region within the overlay. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `size` | `"S" | "M" | "L" | undefined` | — | The size of the Popover. If not specified, the popover fits its contents. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StyleString | undefined` | — | The styles of the popover. |
| `trigger` | `string | undefined` | — | The name of the component that triggered the popover. This is reflected on the element as the `data-trigger` attribute, and can be used to provide specific styles for the popover depending on which element triggered it. |
| `triggerRef` | `RefObject<Element | null> | undefined` | — | The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSTABLE_portalContainer` | `Element | undefined` | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. |

---

# Source: https://react-spectrum.adobe.com/ProgressBar.md

# ProgressBar

ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
They can represent either determinate or indeterminate progress.

```tsx
import {ProgressBar} from '@react-spectrum/s2';

<ProgressBar />
```

## Value

By default, the `value` prop is a percentage between 0 and 100. Use the `minValue`, and `maxValue` props to set a custom value scale.

```tsx
import {ProgressBar} from '@react-spectrum/s2';

<ProgressBar />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `formatOptions` | `Intl.NumberFormatOptions | undefined` | \{style: 'percent'} | The display format of the value label. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isIndeterminate` | `boolean | undefined` | — | Whether presentation is indeterminate when progress isn't known. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `number | undefined` | 100 | The largest value allowed for the input. |
| `minValue` | `number | undefined` | 0 | The smallest value allowed for the input. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the ProgressBar. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the button appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `number | undefined` | 0 | The current value (controlled). |
| `valueLabel` | `ReactNode` | — | The content to display as the value's label (e.g. 1 of 4). |

---

# Source: https://react-spectrum.adobe.com/ProgressCircle.md

# ProgressCircle

ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
They can represent determinate or indeterminate progress.

```tsx
import {ProgressCircle} from '@react-spectrum/s2';

<ProgressCircle />
```

## Value

By default, the `value` prop is a percentage between 0 and 100. Use the `minValue`, and `maxValue` props to set a custom value scale.

```tsx
import {ProgressCircle} from '@react-spectrum/s2';

<ProgressCircle />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isIndeterminate` | `boolean | undefined` | — | Whether presentation is indeterminate when progress isn't known. |
| `maxValue` | `number | undefined` | 100 | The largest value allowed for the input. |
| `minValue` | `number | undefined` | 0 | The smallest value allowed for the input. |
| `size` | `"S" | "M" | "L" | undefined` | 'M' | The size of the ProgressCircle. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the button appears over a color background. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `number | undefined` | 0 | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/Provider.md

# Provider

Provider is the container for all React Spectrum components.
It loads the font and sets the colorScheme, locale, and other application level settings.

```tsx
'use client';
import {Button, Provider} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};


<Provider
  
  styles={style({padding: 12})}
>
  <Button>
    Hello React Spectrum!
  </Button>
</Provider>
```

## Locales

By default, React Spectrum chooses the locale matching the user’s browser/operating system language, but this can be overridden with the locale prop if you have an application specific setting. This prop accepts a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.

```tsx
<Provider locale="en-US">
  <YourApp />
</Provider>
```

<Disclosure isQuiet>
  <DisclosureTitle>Supported Locales</DisclosureTitle>

  <DisclosurePanel>
    <ul style={{columnWidth: 200, paddingLeft: 16, fontFamily: 'adobe-clean-spectrum-vf'}}>
      <li>Arabic (United Arab Emirates)</li>
      <li>Bulgarian (Bulgaria)</li>
      <li>Chinese (Simplified)</li>
      <li>Chinese (Traditional)</li>
      <li>Croatian (Croatia)</li>
      <li>Czech (Czech Republic)</li>
      <li>Danish (Denmark)</li>
      <li>Dutch (Netherlands)</li>
      <li>English (Great Britain)</li>
      <li>English (United States)</li>
      <li>Estonian (Estonia)</li>
      <li>Finnish (Finland)</li>
      <li>French (Canada)</li>
      <li>French (France)</li>
      <li>German (Germany)</li>
      <li>Greek (Greece)</li>
      <li>Hebrew (Israel)</li>
      <li>Hungarian (Hungary)</li>
      <li>Italian (Italy)</li>
      <li>Japanese (Japan)</li>
      <li>Korean (Korea)</li>
      <li>Latvian (Latvia)</li>
      <li>Lithuanian (Lithuania)</li>
      <li>Norwegian (Norway)</li>
      <li>Polish (Poland)</li>
      <li>Portuguese (Brazil)</li>
      <li>Romanian (Romania)</li>
      <li>Russian (Russia)</li>
      <li>Serbian (Serbia)</li>
      <li>Slovakian (Slovakia)</li>
      <li>Slovenian (Slovenia)</li>
      <li>Spanish (Spain)</li>
      <li>Swedish (Sweden)</li>
      <li>Turkish (Turkey)</li>
      <li>Ukrainian (Ukraine)</li>
    </ul>
  </DisclosurePanel>
</Disclosure>

## Client side routing

The Provider component accepts an optional `router` prop. This enables React Spectrum components that render links to perform client side navigation using your application or framework's client side router. See the [getting started guide](getting-started.md) for details on how to set this up.

```tsx
let navigate = useNavigateFromYourRouter();

<Provider router={{navigate}}>
  <YourApp />
</Provider>
```

## Server side rendering

When using SSR, the `<Provider>` component can be rendered as the root `<html>` element. The `locale` prop should always be specified to avoid hydration errors.

```tsx
<Provider elementType="html" locale="en-US">
  <YourApp />
</Provider>
```

## API

### Provider

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `background` | `"base" | "layer-1" | "layer-2" | undefined` | — | The background for this provider. If not provided, the background is transparent. |
| `children` | `ReactNode` | — | The content of the Provider. |
| `colorScheme` | `ColorScheme | undefined` | — | The color scheme for your application. Defaults to operating system preferences. |
| `elementType` | `keyof JSX.IntrinsicElements | undefined` | div | The DOM element to render. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `locale` | `string | undefined` | 'en-US' | The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. |
| `router` | `Router | undefined` | — | Provides a client side router to all nested React Spectrum links to enable client side navigation. |
| `styles` | `StyleString | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/RadioGroup.md

# RadioGroup

Radio groups allow users to select a single option from a list of mutually exclusive options.
All possible options are exposed up front for users to compare.

```tsx
import {RadioGroup, Radio} from '@react-spectrum/s2';

<RadioGroup>
  <Radio value="cats">Cat</Radio>
  <Radio value="dogs">Dog</Radio>
  <Radio value="dragon">Dragon</Radio>
</RadioGroup>
```

## Value

Use the `value` or `defaultValue` prop to set the selected item, and `onChange` to handle selection changes.

```tsx
import {RadioGroup, Radio} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState<string | null>(null);

  return (
    <>
      <RadioGroup
        label="Favorite sport"
        /*- begin highlight -*/
        value={selected}
        onChange={setSelected}>
        {/*- end highlight -*/}
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>
      <p>Current selection: {selected || 'None'}</p>
    </>
  );
}
```

## Forms

Use the `name` prop to submit the selected radio to the server. Set the `isRequired` prop to validate that the user selects an option, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {RadioGroup, Radio, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <RadioGroup
        {...props}
        label="Favorite pet"
        /*- begin highlight -*/
        name="pet"
        
        /*- end highlight -*/
      >
        <Radio value="dog">Dog</Radio>
        <Radio value="cat">Cat</Radio>
        <Radio value="dragon">Dragon</Radio>
      </RadioGroup>
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

```tsx
<RadioGroup>
  <Radio />
</RadioGroup>
```

### RadioGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `React.ReactNode` | — | The Radios contained within the RadioGroup. |
| `contextualHelp` | `React.ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string | null | undefined` | — | The default value (uncontrolled). |
| `description` | `React.ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `React.ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the RadioGroup should be displayed with an emphasized style. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `React.ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: string) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `orientation` | `Orientation | undefined` | 'vertical' | The axis the radio elements should align with. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the RadioGroup. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: string | null) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string | null | undefined` | — | The current value (controlled). |

### Radio

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The label for the element. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputRef` | `RefObject<HTMLInputElement | null> | undefined` | — | A ref for the HTML input element. |
| `isDisabled` | `boolean | undefined` | — | Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string` | — | The value of the radio button, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value). |

---

# Source: https://react-spectrum.adobe.com/RangeCalendar.md

# RangeCalendar

RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.

```tsx
import {RangeCalendar} from '@react-spectrum/s2';

<RangeCalendar />
```

## Value

Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

```tsx
import {parseDate, getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from 'react-aria';
import {RangeCalendar} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [range, setRange] = useState({
    start: parseDate('2025-02-03'),
    end: parseDate('2025-02-12')
  });
  let formatter = useDateFormatter({ dateStyle: 'long' });
  
  return (
    <>
      <RangeCalendar
        value={range}
        onChange={setRange}
      />
      <p>Selected range: {formatter.formatRange(
        range.start.toDate(getLocalTimeZone()),
        range.end.toDate(getLocalTimeZone())
      )}</p>
    </>
  );
}
```

### International calendars

By default, `RangeCalendar` displays the value using the calendar system for the user's locale. Use `<Provider>` to override the calendar system by setting the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string). The `onChange` event always receives a date in the same calendar as the `value` or `defaultValue` (Gregorian if no value is provided), regardless of the displayed locale.

```tsx
import {Provider, RangeCalendar} from '@react-spectrum/s2';
import {parseDate} from '@internationalized/date';

<Provider>
  <RangeCalendar
    defaultValue={{
      start: parseDate('2025-02-03'),
      end: parseDate('2025-02-12')
    }} />
</Provider>
```

### Custom calendar systems

`RangeCalendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the [@internationalized/date docs](react-aria:internationalized/date/Calendar.md#custom-calendars) for an example implementation.

```tsx
import type {AnyCalendarDate} from '@internationalized/date';
import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
import {RangeCalendar} from '@react-spectrum/s2';

export default function Example() {
  return (
    <RangeCalendar
      firstDayOfWeek="sun"
      createCalendar={() => new Custom454()} />
  );
}

// See @internationalized/date docs linked above.
class Custom454 extends GregorianCalendar {
  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
  getDaysInMonth(date) {
    return this.weekPattern[date.month - 1] * 7;
  }

  fromJulianDay(jd: number): CalendarDate {
    let gregorian = super.fromJulianDay(jd);

    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
    for (let months = 0; months < this.weekPattern.length; months++) {
      let weeksInMonth = this.weekPattern[months];
      let monthEnd = monthStart.add({weeks: weeksInMonth});
      if (monthEnd.compare(gregorian) > 0) {
        let days = gregorian.compare(monthStart);
        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
      }
      monthStart = monthEnd;
    }

    throw Error('Date is not in any month somehow!');
  }

  toJulianDay(date: AnyCalendarDate): number {
    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
    for (let month = 1; month < date.month; month++) {
      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
    }

    let gregorian = monthStart.add({days: date.day - 1});
    return super.toJulianDay(gregorian);
  }

  getFormattableMonth(date) {
    let gregorian = toCalendar(date, new GregorianCalendar());
    return gregorian.set({month: date.month, day: 1});
  }

  isEqual(other) {
    return other instanceof Custom454;
  }
}
```

## Validation

Use the `minValue` and `maxValue` props to set the valid date range. The `isDateUnavailable` callback prevents certain dates from being selected. Use `allowsNonContiguousRanges` to allow selecting ranges containing unavailable dates. For custom validation rules, set the `isInvalid` prop and the `errorMessage` slot.

```tsx
import {today, getLocalTimeZone} from '@internationalized/date';
import {RangeCalendar} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let now = today(getLocalTimeZone());
  let [range, setRange] = useState({
    start: now.add({days: 6}),
    end: now.add({ days: 14 })
  });
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 15 }), now.add({ days: 17 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];
  let isInvalid = range.end.compare(range.start) > 7;

  return (
    <RangeCalendar
      {...props}
      aria-label="Trip dates"
      value={range}
      onChange={setRange}
      
      minValue={today(getLocalTimeZone())}
      isDateUnavailable={date => (
        disabledRanges.some((interval) =>
          date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
        )
      )}
      isInvalid={isInvalid}
      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : undefined} />
  );
}
```

## Controlling the focused date

Use the `focusedValue` or `defaultFocusedValue` prop to control which date is focused. This controls which month is visible. The `onFocusChange` event is called when a date is focused by the user.

```tsx
import {RangeCalendar, ActionButton} from '@react-spectrum/s2';
import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let defaultDate = new CalendarDate(2021, 7, 1);
  let [focusedDate, setFocusedDate] = useState(defaultDate);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
      <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
        Today
      </ActionButton>
      <RangeCalendar
        focusedValue={focusedDate}
        onFocusChange={setFocusedDate}
      />
    </div>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `allowsNonContiguousRanges` | `boolean | undefined` | — | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | false | Whether to automatically focus the calendar when it mounts. |
| `createCalendar` | `((identifier: CalendarIdentifier) => Calendar) | undefined` | — | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| `defaultFocusedValue` | `DateValue | null | undefined` | — | The date that is focused when the calendar first mounts (uncontrolled). |
| `defaultValue` | `RangeValue<T> | null | undefined` | — | The default value (uncontrolled). |
| `errorMessage` | `ReactNode` | — | The error message to display when the calendar is invalid. |
| `firstDayOfWeek` | `"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | undefined` | — | The day that starts the week. |
| `focusedValue` | `DateValue | null | undefined` | — | Controls the currently focused date within the calendar. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDateUnavailable` | `((date: DateValue) => boolean) | undefined` | — | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| `isDisabled` | `boolean | undefined` | false | Whether the calendar is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the current selection is invalid according to application logic. |
| `isReadOnly` | `boolean | undefined` | false | Whether the calendar value is immutable. |
| `maxValue` | `DateValue | null | undefined` | — | The maximum allowed date that a user may select. |
| `minValue` | `DateValue | null | undefined` | — | The minimum allowed date that a user may select. |
| `onChange` | `((value: RangeValue<MappedDateValue<T>>) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocusChange` | `((date: CalendarDate) => void) | undefined` | — | Handler that is called when the focused date changes. |
| `pageBehavior` | `PageBehavior | undefined` | visible | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
| `selectionAlignment` | `"center" | "start" | "end" | undefined` | 'center' | Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `RangeValue<T> | null | undefined` | — | The current value (controlled). |
| `visibleMonths` | `number | undefined` | 1 | The number of months to display at once. |

---

# Source: https://react-spectrum.adobe.com/RangeSlider.md

# RangeSlider

RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.

```tsx
import {RangeSlider} from '@react-spectrum/s2';

<RangeSlider />
```

## Value

Use the `value` or `defaultValue` prop to set the RangeSlider's value. The value is an object with `start` and `end` properties. The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released.

```tsx
import {RangeSlider} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState({start: 25, end: 75});
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <RangeSlider
        label="Cookies to buy"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {JSON.stringify(currentValue)}{'\n'}
        onChangeEnd value: {JSON.stringify(finalValue)}
      </pre>
    </>
  );
}
```

### Value scale

By default, slider values are percentages between 0 and 100. Use the `minValue`, `maxValue`, and `step` props to set the allowed values. Steps are calculated starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc.

```tsx
import {RangeSlider} from '@react-spectrum/s2';

<RangeSlider />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `RangeValue<number> | undefined` | — | The default value (uncontrolled). |
| `endName` | `string | undefined` | — | The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `formatOptions` | `Intl.NumberFormatOptions | undefined` | — | The display format of the value label. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the whole Slider is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the Slider should be displayed with an emphasized style. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `number | undefined` | 100 | The slider's maximum value. |
| `minValue` | `number | undefined` | 0 | The slider's minimum value. |
| `onChange` | `((value: RangeValue<number>) => void) | undefined` | — | Handler that is called when the value changes. |
| `onChangeEnd` | `((value: RangeValue<number>) => void) | undefined` | — | Fired when the slider stops moving, due to being let go. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Slider. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `startName` | `string | undefined` | — | The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `step` | `number | undefined` | 1 | The slider's step value. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `thumbStyle` | `"default" | "precise" | undefined` | 'default' | The style of the Slider's thumb. |
| `trackStyle` | `"thin" | "thick" | undefined` | 'thin' | The style of the Slider's track. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `RangeValue<number> | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/SearchField.md

# SearchField

A SearchField is a text field designed for searches.

```tsx
import {SearchField} from '@react-spectrum/s2';

<SearchField />
```

## Value

Use the `value` or `defaultValue` prop to set the text value, and `onChange` to handle user input. `onSubmit` is called when the user presses <Keyboard>Enter</Keyboard>.

```tsx
import {SearchField} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [search, setSearch] = useState('');
  let [submittedSearch, setSubmittedSearch] = useState('');

  return (
    <div>
      <SearchField
        label="Search"
        placeholder="Search documents"
        value={search}
        onChange={setSearch}
        onSubmit={setSubmittedSearch} />
      {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        Value: {search}{'\n'}
        Submitted value: {submittedSearch}
      </pre>
    </div>
  );
}
```

## Forms

Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, `maxLength`, `pattern`, or `type` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {SearchField, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <SearchField
        {...props}
        label="Search"
        placeholder="Search documents"
        name="search"
        
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-activedescendant` | `string | undefined` | — | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| `aria-autocomplete` | `"none" | "list" | "inline" | "both" | undefined` | — | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined` | — | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoCorrect` | `string | undefined` | — | 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `enterKeyHint` | `"search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined` | — | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputMode` | `"text" | "numeric" | "search" | "none" | "url" | "tel" | "email" | "decimal" | undefined` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxLength` | `number | undefined` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |
| `minLength` | `number | undefined` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBeforeInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). |
| `onBlur` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: string) => void) | undefined` | — | Handler that is called when the value changes. |
| `onClear` | `(() => void) | undefined` | — | Handler that is called when the clear button is pressed. |
| `onCompositionEnd` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| `onCompositionStart` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event). |
| `onCopy` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| `onCut` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| `onFocus` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPaste` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| `onSelect` | `ReactEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event). |
| `onSubmit` | `((value: string) => void) | undefined` | — | Handler that is called when the SearchField is submitted. |
| `pattern` | `string | undefined` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |
| `placeholder` | `string | undefined` | — | Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the SearchField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `spellCheck` | `string | undefined` | — | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck). |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `type` | `"text" | "search" | (string & {}) | "url" | "tel" | "email" | "password" | undefined` | 'search' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: string) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/SegmentedControl.md

# SegmentedControl

A SegmentedControl is a mutually exclusive group of buttons used for view switching.

```tsx
import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';

<SegmentedControl>
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
  <SegmentedControlItem id="year">Year</SegmentedControlItem>
</SegmentedControl>
```

## Content

SegmentedControlItem supports icons and text as children. When a visible label is omitted, provide an `aria-label`.

## Vanilla CSS example

```tsx
import {SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
import AlignLeft from '@react-spectrum/s2/icons/AlignLeft';
import AlignCenter from '@react-spectrum/s2/icons/AlignCenter';
import AlignRight from '@react-spectrum/s2/icons/AlignRight';

<SegmentedControl aria-label="Text alignment">
  <SegmentedControlItem id="left">
    {/*- begin highlight -*/}
    <AlignLeft />
    <Text>Left</Text>
    {/*- end highlight -*/}
  </SegmentedControlItem>
  <SegmentedControlItem id="center">
    <AlignCenter />
    <Text>Center</Text>
  </SegmentedControlItem>
  <SegmentedControlItem id="right">
    <AlignRight />
    <Text>Right</Text>
  </SegmentedControlItem>
</SegmentedControl>
```

```tsx
import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
import AlignLeft from '@react-spectrum/s2/icons/AlignLeft';
import AlignCenter from '@react-spectrum/s2/icons/AlignCenter';
import AlignRight from '@react-spectrum/s2/icons/AlignRight';

<SegmentedControl aria-label="Text alignment">
  <SegmentedControlItem id="left" aria-label="Align left">
    {/*- begin highlight -*/}
    <AlignLeft />
     {/*- end highlight -*/}
  </SegmentedControlItem>
  <SegmentedControlItem id="center" aria-label="Align center">
    <AlignCenter />
  </SegmentedControlItem>
  <SegmentedControlItem id="right" aria-label="Align right">
    <AlignRight />
  </SegmentedControlItem>
</SegmentedControl>
```

## Selection

Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The selected key corresponds to the `id` prop of a `<SegmentedControlItem>`. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=Tabs#single-selection) for more details.

```tsx
import {SegmentedControl, SegmentedControlItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState<Key>('month');

  return (
    <div>
      <SegmentedControl
        /*- begin highlight -*/
        selectedKey={selected}
        onSelectionChange={setSelected}
        /*- end highlight -*/
        aria-label="Time granularity">
        <SegmentedControlItem id="day">Day</SegmentedControlItem>
        <SegmentedControlItem id="week" isDisabled>Week</SegmentedControlItem>
        <SegmentedControlItem id="month">Month</SegmentedControlItem>
        <SegmentedControlItem id="year">Year</SegmentedControlItem>
      </SegmentedControl>
      <p>Selected: {selected}</p>
    </div>
  );
}
```

## API

```tsx
<SegmentedControl>
  <SegmentedControlItem>
    <Icon />
    <Text />
  </SegmentedControlItem>
</SegmentedControl>
```

### SegmentedControl

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the segmented control. |
| `defaultSelectedKey` | `Key | undefined` | — | The id of the initial selected item (uncontrolled). |
| `isDisabled` | `boolean | undefined` | — | Whether the segmented control is disabled. |
| `isJustified` | `boolean | undefined` | — | Whether the items should divide the container width equally. |
| `onSelectionChange` | `((id: Key) => void) | undefined` | — | Handler that is called when the selection changes. |
| `selectedKey` | `Key | null | undefined` | — | The id of the currently selected item (controlled). |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### SegmentedControlItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the segmented control item. |
| `id` | `Key` | — | The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled or not. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/SelectBoxGroup.md

# SelectBoxGroup

SelectBoxGroup allows users to select one or more options from a list.

```tsx
import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled1 from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
import PaperAirplane from '@react-spectrum/s2/illustrations/linear/Paperairplane';

<SelectBoxGroup
  aria-label="Select a cloud"
  
  styles={style({width: 'full'})}>
  <SelectBox id="aws" textValue="Amazon Web Services">
    <Server />
    <Text slot="label">Amazon Web Services</Text>
    <Text slot="description">Reliable cloud infrastructure</Text>
  </SelectBox>
  <SelectBox id="azure" textValue="Microsoft Azure">
    <AlertNotice />
    <Text slot="label">Microsoft Azure</Text>
  </SelectBox>
  <SelectBox id="gcp" textValue="Google Cloud Platform">
    <PaperAirplane />
    <Text slot="label">Google Cloud Platform</Text>
  </SelectBox>
  <SelectBox id="ibm" textValue="IBM Cloud">
    <StarFilled1 />
    <Text slot="label">IBM Cloud</Text>
    <Text slot="description">Hybrid cloud solutions</Text>
  </SelectBox>
</SelectBoxGroup>
```

## Content

`SelectBoxGroup` follows the [Collection Components API](collections.md?component=SelectBoxGroup), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children.

```tsx
import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Home from '@react-spectrum/s2/illustrations/linear/Home';
import Phone from '@react-spectrum/s2/illustrations/linear/Phone';
import MailOpen from '@react-spectrum/s2/illustrations/linear/MailOpen';

let options = [
  { id: 'address', name: 'Home address', illustration: <Home /> },
  { id: 'email', name: 'Email address', illustration: <MailOpen /> },
  { id: 'phone', name: 'Phone number', illustration: <Phone /> }
];

function Example() {

  return (
    <SelectBoxGroup
      aria-label="Contact info"
      /*- begin highlight -*/
      items={options}
      /*- end highlight -*/
      selectionMode="multiple"
      styles={style({width: 'full'})}>
      {/*- begin highlight -*/}
      {((item) => (
        <SelectBox id={item.id} textValue={item.name}>
          {item.illustration}
          <Text slot="label">{item.name}</Text>
        </SelectBox>
      ))}
      {/*- end highlight -*/}
    </SelectBoxGroup>
  );
}
```

## Selection

Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=SelectBoxGroup) for more details.

```tsx
import {SelectBoxGroup, SelectBox, Text, type Selection} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled1 from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
import PaperAirplane from '@react-spectrum/s2/illustrations/linear/Paperairplane';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <>
      <SelectBoxGroup
        {...props}
        aria-label="Select a cloud"
        
        selectedKeys={selected}
        onSelectionChange={setSelected}
        styles={style({width: 'full'})}>
        <SelectBox id="aws" textValue="Amazon Web Services">
          <Server />
          <Text slot="label">Amazon Web Services</Text>
          <Text slot="description">Reliable cloud infrastructure</Text>
        </SelectBox>
        <SelectBox id="azure" textValue="Microsoft Azure">
          <AlertNotice />
          <Text slot="label">Microsoft Azure</Text>
        </SelectBox>
        <SelectBox id="gcp" textValue="Google Cloud Platform">
          <PaperAirplane />
          <Text slot="label">Google Cloud Platform</Text>
        </SelectBox>
        <SelectBox id="ibm" textValue="IBM Cloud">
          <StarFilled1 />
          <Text slot="label">IBM Cloud</Text>
          <Text slot="description">Hybrid cloud solutions</Text>
        </SelectBox>
      </SelectBoxGroup>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}
```

## API

```tsx
<SelectBoxGroup>
  <SelectBox>
    <Illustration />
    <Text slot="label" />
    <Text slot="description" />
  </SelectBox>
</SelectBoxGroup>
```

### SelectBoxGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | FocusStrategy | undefined` | — | Whether to auto focus the listbox or an option. |
| `children` | `React.ReactNode | ((item: T) => ReactNode)` | — | The SelectBox elements contained within the SelectBoxGroup. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the listbox or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the SelectBoxGroup is disabled. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `onBlur` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onFocus` | `((e: React.FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `orientation` | `Orientation | undefined` | 'vertical' | The layout direction of the content in each SelectBox. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `"single" | "multiple" | undefined` | 'single' | The selection mode for the SelectBoxGroup. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### SelectBox

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for this item. |
| `children` | `React.ReactNode` | — | The contents of the SelectBox. |
| `id` | `Key | undefined` | — | The unique id of the SelectBox. |
| `isDisabled` | `boolean | undefined` | — | Whether the SelectBox is disabled. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `textValue` | `string | undefined` | — | A string representation of the SelectBox's contents, used for features like typeahead. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Skeleton.md

# Skeleton

A Skeleton wraps around content to render it as a placeholder.

```tsx
import {Skeleton, Image, Text} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import preview from 'url:./assets/preview.png';
import Select from '@react-spectrum/s2/icons/Select';

<Skeleton>
  <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}})}>
    <Image
      src={preview}
      width={1600}
      height={1200}
      styles={style({height: 160, borderRadius: 'default', flexShrink: 0, aspectRatio: '4 / 3'})} />
    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
      <Text styles={style({font: 'heading-lg'})}>Placeholder title</Text>
      <Text styles={style({font: 'body'})}>This is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.</Text>
      <div className={style({display: 'flex', gap: 4, alignItems: 'center'})}>
        <Select />
        <Text styles={style({font: 'ui'})}>Here is an icon.</Text>
      </div>
    </div>
  </div>
</Skeleton>
```

## Content

Skeleton replaces text, images, and icons inside it with a placeholder shimmer effect. Use mock data within your real component to create a loading screen that accurately simulates the final layout.

The following components are currently affected by Skeleton:

* [Image](Image.md)
* `Text`
* [Link](Link.md)
* `Icon`
* [StatusLight](StatusLight.md)
* [Badge](Badge.md)
* [Meter](Meter.md)

Form components within a skeleton are also disabled.

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — |  |
| `isLoading` | `boolean` | — |  |

---

# Source: https://react-spectrum.adobe.com/Slider.md

# Slider

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

```tsx
import {Slider} from '@react-spectrum/s2';

<Slider />
```

## Value

Use the `value` or `defaultValue` prop to set the slider's value. The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released.

```tsx
import {Slider} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(25);
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <Slider
        label="Cookies to buy"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue}{'\n'}
        onChangeEnd value: {finalValue}
      </pre>
    </>
  );
}
```

### Value scale

By default, slider values are percentages between 0 and 100. Use the `minValue`, `maxValue`, and `step` props to set the allowed values. Steps are calculated starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc.

```tsx
import {Slider} from '@react-spectrum/s2';

<Slider />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `number | undefined` | — | The default value (uncontrolled). |
| `fillOffset` | `number | undefined` | — | The offset from which to start the fill. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `formatOptions` | `Intl.NumberFormatOptions | undefined` | — | The display format of the value label. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the whole Slider is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the Slider should be displayed with an emphasized style. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `number | undefined` | 100 | The slider's maximum value. |
| `minValue` | `number | undefined` | 0 | The slider's minimum value. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `onChange` | `((value: number) => void) | undefined` | — | Handler that is called when the value changes. |
| `onChangeEnd` | `((value: number) => void) | undefined` | — | Fired when the slider stops moving, due to being let go. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Slider. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `step` | `number | undefined` | 1 | The slider's step value. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `thumbStyle` | `"default" | "precise" | undefined` | 'default' | The style of the Slider's thumb. |
| `trackStyle` | `"thin" | "thick" | undefined` | 'thin' | The style of the Slider's track. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `number | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/StatusLight.md

# StatusLight

Status lights are used to color code categories and labels commonly found in data visualization.
When status lights have a semantic meaning, they should use semantic variant colors.

```tsx
import {StatusLight} from '@react-spectrum/s2';

<StatusLight />
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display as the label. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `role` | `"status" | undefined` | — | An accessibility role for the status light. Should be set when the status can change at runtime, and no more than one status light will update simultaneously. For cases where multiple statuses can change at the same time, use a Toast instead. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the StatusLight. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `variant` | `"informative" | "neutral" | "positive" | "notice" | "negative" | "yellow" | "chartreuse" | "celery" | "seafoam" | "cyan" | "indigo" | "purple" | "fuchsia" | "magenta" | "pink" | "turquoise" | "brown" | "cinnamon" | "silver" | undefined` | 'neutral' | The variant changes the color of the status light. When status lights have a semantic meaning, they should use the variant for semantic colors. |

---

# Source: https://react-spectrum.adobe.com/Switch.md

# Switch

Switches allow users to turn an individual option on or off.
They are usually used to activate or deactivate a specific setting.

```tsx
import {Switch} from '@react-spectrum/s2';

<Switch />
```

## Selection

Use the `isSelected` or `defaultSelected` prop to set the selection state, and `onChange` to handle selection changes.

```tsx
import {Switch} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <Switch 
        {...props}
        isSelected={selected}
        onChange={setSelection}
      >
        Low power mode
      </Switch>
      <p>{selected ? 'Low' : 'High'} power mode active.</p>
    </>
  );
}
```

## Forms

Use the `name` and `value` props to submit the switch to the server. See the [Forms](forms.md) guide to learn more.

```tsx
import {Switch, Button, Form} from '@react-spectrum/s2';

<Form>
  {/*- begin highlight -*/}
  <Switch name="wifi">Wi-Fi</Switch>
  {/*- end highlight -*/}
  <Button type="submit">Submit</Button>
</Form>
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — |  |
| `defaultSelected` | `boolean | undefined` | — | Whether the Switch should be selected (uncontrolled). |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputRef` | `RefObject<HTMLInputElement | null> | undefined` | — | A ref for the HTML input element. |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the Switch should be displayed with an emphasized style. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isSelected` | `boolean | undefined` | — | Whether the Switch should be selected (controlled). |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((isSelected: boolean) => void) | undefined` | — | Handler that is called when the Switch's selection state changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the Switch. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `value` | `string | undefined` | — | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). |

---

# Source: https://react-spectrum.adobe.com/TableView.md

# TableView

Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TableView
  
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  <TableBody>
    <Row id="1">
      <Cell>Projects</Cell>
      <Cell>File folder</Cell>
      <Cell>6/7/2025</Cell>
    </Row>
    <Row id="2">
      <Cell>Pictures</Cell>
      <Cell>File folder</Cell>
      <Cell>4/7/2025</Cell>
    </Row>
    <Row id="3">
      <Cell>2024 Annual Financial Report</Cell>
      <Cell>Text document</Cell>
      <Cell>12/30/2024</Cell>
    </Row>
    <Row id="4">
      <Cell>Job Posting</Cell>
      <Cell>Text Document</Cell>
      <Cell>1/18/2025</Cell>
    </Row>
  </TableBody>
</TableView>
```

## Content

`TableView` follows the [Collection Components API](collections.md?component=Table), accepting both static and dynamic collections.
In this example, both the columns and the rows are provided to the table via a render function, enabling the user to hide and show columns and add additional rows.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, CheckboxGroup, Checkbox, ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const columns = [
  {name: 'Name', id: 'name', isRowHeader: true},
  {name: 'Type', id: 'type'},
  {name: 'Date Modified', id: 'date'}
];

const initialRows = [
  {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
  {id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
  {id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
  {id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
];

function FileTable() {
  let [showColumns, setShowColumns] = useState(['name', 'type', 'date']);
  let visibleColumns = columns.filter(column => showColumns.includes(column.id));

  let [rows, setRows] = useState(initialRows);
  let addRow = () => {
    let date = new Date().toLocaleDateString();
    setRows(rows => [
      ...rows,
      {id: rows.length + 1, name: 'file.txt', date, type: 'Text Document'}
    ]);
  };

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'start', width: 'full'})}>
      <CheckboxGroup aria-label="Show columns" value={showColumns} onChange={setShowColumns} orientation="horizontal">
        <Checkbox value="type">Type</Checkbox>
        <Checkbox value="date">Date Modified</Checkbox>
      </CheckboxGroup>
      <TableView aria-label="Files" styles={style({width: 'full'})}>
        <TableHeader columns={visibleColumns}>
          {column => (
            <Column isRowHeader={column.isRowHeader}>
              {column.name}
            </Column>
          )}
        </TableHeader>
        {/*- begin highlight -*/}
        <TableBody items={rows} dependencies={[visibleColumns]}>
          {item => (
            /*- end highlight -*/
            <Row columns={visibleColumns}>
              {column => <Cell>{item[column.id]}</Cell>}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionButton onPress={addRow}>Add row</ActionButton>
    </div>
  );
}
```

<InlineAlert variant="notice">
  <Heading>Memoization</Heading>
  <Content>Dynamic collections are automatically memoized to improve performance. Use the `dependencies` prop to invalidate cached elements that depend
  on external state (e.g. `columns` in this example).</Content>
</InlineAlert>

### Asynchronous loading

Use the `loadingState` and `onLoadMore` props to enable async loading and infinite scrolling.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, useAsyncList} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

interface Character {
  name: string;
  height: number;
  mass: number;
  birth_year: number;
}

function AsyncSortTable() {
  let list = useAsyncList<Character>({
    async load({ signal, cursor }) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(
        cursor || 'https://swapi.py4e.com/api/people/?search=',
        { signal }
      );
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <TableView
      aria-label="Star Wars characters"
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}
      styles={style({width: 'full', height: 320})}>
      <TableHeader>
        <Column id="name" isRowHeader>Name</Column>
        <Column id="height">Height</Column>
        <Column id="mass">Mass</Column>
        <Column id="birth_year">Birth Year</Column>
      </TableHeader>
      <TableBody items={list.items}>
        {(item) => (
          <Row id={item.name}>
            <Cell>{item.name}</Cell>
            <Cell>{item.height}</Cell>
            <Cell>{item.mass}</Cell>
            <Cell>{item.birth_year}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

### Links

Use the `href` prop on a Row to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection.md) for more details.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TableView
  
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>URL</Column>
    <Column>Date added</Column>
  </TableHeader>
  <TableBody>
    {/*- begin highlight -*/}
    <Row href="https://adobe.com/" target="_blank">
      {/*- end highlight -*/}
      <Cell>Adobe</Cell>
      <Cell>https://adobe.com/</Cell>
      <Cell>January 28, 2023</Cell>
    </Row>
    <Row href="https://google.com/" target="_blank">
      <Cell>Google</Cell>
      <Cell>https://google.com/</Cell>
      <Cell>April 5, 2023</Cell>
    </Row>
    <Row href="https://nytimes.com/" target="_blank">
      <Cell>New York Times</Cell>
      <Cell>https://nytimes.com/</Cell>
      <Cell>July 12, 2023</Cell>
    </Row>
  </TableBody>
</TableView>
```

### Empty state

Use `renderEmptyState` to render placeholder content when the table is empty.

```tsx
import {TableView, TableHeader, Column, TableBody, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';

<TableView aria-label="Search results" styles={style({width: 'full', height: 320})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  {/*- begin highlight -*/}
  <TableBody
    /*- begin highlight -*/
    renderEmptyState={() => (
      <IllustratedMessage>
        <FolderOpen />
        <Heading>No results</Heading>
        <Content>Press <Link href="https://adobe.com">here</Link> for more info.</Content>
      </IllustratedMessage>
    )}>
    {/*- end highlight -*/}
    {[]}
  </TableBody>
</TableView>
```

### Cell options

Use the `align` prop on a Column and Cell to set the text alignment. `showDivider` adds a divider between a cell and the next cell. `colSpan` makes a cell span multiple columns.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const rows = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

const columns = [
  {id: 'name', name: 'Name', isRowHeader: true, showDivider: true, align: undefined},
  {id: 'type', name: 'Type', isRowHeader: false, showDivider: true, align: 'center'},
  {id: 'level', name: 'Level', isRowHeader: false, showDivider: false, align: 'end'}
] as const;

function TableWithDividers() {
  return (
    <TableView
      aria-label="Favorite pokemon"
      styles={style({width: 400, maxWidth: 'full'})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column
            /*- begin highlight -*/
            showDivider={column.showDivider}
            align={column.align}
            /*- end highlight -*/
            isRowHeader={column.isRowHeader}>
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody>
        <Collection items={rows}>
          {item => (
            <Row id={item.id} columns={columns}>
              {(column) => (
                <Cell
                  /*- begin highlight -*/
                  showDivider={column.showDivider}
                  align={column.align}>
                  {/*- end highlight -*/}
                  {item[column.id]}
                </Cell>
              )}
            </Row>
          )}
        </Collection>
        <Row>
          {/*- begin highlight -*/}
          <Cell colSpan={2} align="end" showDivider>Total:</Cell>
          {/*- end highlight -*/}
          <Cell align="end">{rows.reduce((p, v) => p + v.level, 0)}</Cell>
        </Row>
      </TableBody>
    </TableView>
  );
}
```

### Column menus

Use the `menuItems` prop to add custom menu items to a Column. See the [Menu](Menu.md) docs for more details.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, MenuSection, MenuItem} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const rows = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

const columns = [
  {id: 'name', name: 'Name', isRowHeader: true},
  {id: 'type', name: 'Type'},
  {id: 'level', name: 'Level'}
];

function CustomMenusTable() {
  return (
    <TableView aria-label="Favorite pokemon" styles={style({width: 400, maxWidth: 'full'})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column
            menuItems={
              <>
                <MenuSection>
                  <MenuItem onAction={() => alert(`Filtering "${column.name}" column`)}>Filter</MenuItem>
                </MenuSection>
                <MenuSection>
                  <MenuItem onAction={() => alert(`Hiding "${column.name}" column`)}>Hide column</MenuItem>
                  <MenuItem onAction={() => alert(`Managing the "${column.name}" column`)}>Manage columns</MenuItem>
                </MenuSection>
              </>
            }
            isRowHeader={column.isRowHeader}>
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody items={rows}>
        {item => (
          <Row id={item.id} columns={columns}>
            {(column) => {
              return <Cell>{item[column.id]}</Cell>;
            }}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

### Editable cells

Render an `<EditableCell>` instead of a `<Cell>` to allow users to edit the value. Editing is triggered by an `<ActionButton slot="edit">` and occurs in a popover that can contain one or more inputs.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key, type ColumnProps} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import User from '@react-spectrum/s2/icons/User';
import Edit from '@react-spectrum/s2/icons/Edit';
import {useCallback} from 'react';
import {useListData} from '@react-stately/data';

let defaultItems = [
  {id: 1, fruits: 'Apples', task: 'Collect', farmer: 'Eva'},
  {id: 2, fruits: 'Oranges', task: 'Collect', farmer: 'Steven'},
  {id: 3, fruits: 'Pears', task: 'Collect', farmer: 'Michael'},
  {id: 4, fruits: 'Cherries', task: 'Collect', farmer: 'Sara'},
  {id: 5, fruits: 'Dates', task: 'Collect', farmer: 'Karina'},
  {id: 6, fruits: 'Bananas', task: 'Collect', farmer: 'Otto'},
  {id: 7, fruits: 'Melons', task: 'Collect', farmer: 'Matt'},
  {id: 8, fruits: 'Figs', task: 'Collect', farmer: 'Emily'},
  {id: 9, fruits: 'Blueberries', task: 'Collect', farmer: 'Amelia'},
  {id: 10, fruits: 'Blackberries', task: 'Collect', farmer: 'Isla'}
];

let editableColumns: Array<Omit<ColumnProps, 'children'> & {name: string}> = [
  {name: 'Fruits', id: 'fruits', isRowHeader: true, width: '2fr', minWidth: 200},
  {name: 'Task', id: 'task', width: '1fr', minWidth: 150},
  {name: 'Farmer', id: 'farmer', width: '1fr', minWidth: 150}
];

export default function EditableTable(props) {
  let columns = editableColumns;
  let data = useListData({initialItems: defaultItems});

  let onChange = useCallback((id: Key, columnId: Key, values: any) => {
    let value = values[columnId];
    if (value == null) {
      return;
    }
    data.update(id, (prevItem) => ({...prevItem, [columnId]: value}));
  }, [data]);

  return (
    <TableView aria-label="Dynamic table" {...props} styles={style({height: 208, width: 'full'})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column {...column}>{column.name}</Column>
        )}
      </TableHeader>
      <TableBody items={data.items}>
        {item => (
          <Row id={item.id} columns={columns}>
            {(column) => {
              if (column.id === 'fruits') {
                return (
                  <EditableCell
                    aria-label={`Edit ${item[column.id]} in ${column.name}`}
                    align={column.align}
                    showDivider={column.showDivider}
                    onSubmit={(e) => {
                      e.preventDefault();
                      let formData = new FormData(e.target as HTMLFormElement);
                      let values = Object.fromEntries(formData.entries());
                      onChange(item.id, column.id!, values);
                    }}
                    renderEditing={() => (
                      <TextField
                        aria-label="Fruit name edit field"
                        autoFocus
                        validate={value => value.length > 0 ? null : 'Fruit name is required'}
                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
                        defaultValue={item[column.id!]}
                        name={column.id! as string} />
                    )}>
                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
                      <span className={style({minWidth: 0, truncate: true})}>
                        {item[column.id]}
                      </span>
                      <ActionButton slot="edit" aria-label="Edit fruit">
                        <Edit />
                      </ActionButton>
                    </div>
                  </EditableCell>
                );
              }
              if (column.id === 'farmer') {
                return (
                  <EditableCell
                    align={column.align}
                    showDivider={column.showDivider}
                    onSubmit={(e) => {
                      e.preventDefault();
                      let formData = new FormData(e.target as HTMLFormElement);
                      let values = Object.fromEntries(formData.entries());
                      onChange(item.id, column.id!, values);
                    }}
                    renderEditing={() => (
                      <Picker
                        aria-label="Edit farmer"
                        autoFocus
                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
                        defaultValue={item[column.id!]}
                        name={column.id! as string}
                        items={defaultItems}>
                        {item => (
                          <PickerItem textValue={item.farmer} id={item.farmer}>
                            <User />
                            <Text>{item.farmer}</Text>
                          </PickerItem>
                        )}
                      </Picker>
                    )}>
                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
                      {item[column.id]}
                      <ActionButton slot="edit" aria-label="Edit fruit"><Edit /></ActionButton>
                    </div>
                  </EditableCell>
                );
              }
              return <Cell align={column.align} showDivider={column.showDivider}>{item[column.id!]}</Cell>;
            }}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

## Selection and actions

Use `selectionMode` to enable single or multiple selection, and `selectedKeys` (matching each row's `id`) to control the selected rows. Return an [ActionBar](ActionBar.md) from `renderActionBar` to handle bulk actions, and use `onAction` for row navigation. Disable rows with `isDisabled`. See the [selection guide](selection.md) for details.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, ActionBar, ActionButton, Text, type Selection} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Copy from '@react-spectrum/s2/icons/Copy';
import Delete from '@react-spectrum/s2/icons/Delete';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <>
      <TableView
        {...props}
        aria-label="Favorite pokemon"
        styles={style({width: 'full', height: 200})}
        
        selectedKeys={selected}
        onSelectionChange={setSelected}
        onAction={key => alert(`Clicked ${key}`)}
        renderActionBar={(selectedKeys) => {
          let selection = selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ');
          return (
            <ActionBar>
              <ActionButton onPress={() => alert(`Edit ${selection}`)}>
                <Edit />
                <Text>Edit</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Copy ${selection}`)}>
                <Copy />
                <Text>Copy</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Delete ${selection}`)}>
                <Delete />
                <Text>Delete</Text>
              </ActionButton>
            </ActionBar>
          );
        }}>
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
          <Column>Level</Column>
        </TableHeader>
        <TableBody>
          <Row id="charizard">
            <Cell>Charizard</Cell>
            <Cell>Fire, Flying</Cell>
            <Cell>67</Cell>
          </Row>
          <Row id="blastoise">
            <Cell>Blastoise</Cell>
            <Cell>Water</Cell>
            <Cell>56</Cell>
          </Row>
          <Row id="venusaur" isDisabled>
            <Cell>Venusaur</Cell>
            <Cell>Grass, Poison</Cell>
            <Cell>83</Cell>
          </Row>
          <Row id="pikachu">
            <Cell>Pikachu</Cell>
            <Cell>Electric</Cell>
            <Cell>100</Cell>
          </Row>
        </TableBody>
      </TableView>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}
```

## Sorting

Set the `allowsSorting` prop on a Column to make it sortable. When the column header is pressed, `onSortChange` is called with a `SortDescriptor` including the sorted column and direction (ascending or descending). Use this to sort the data accordingly, and pass the `sortDescriptor` prop to the TableView to display the sorted column.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, type SortDescriptor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

const rows = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

function SortableTable() {
  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | null>(null);
  let sortedRows = rows;
  if (sortDescriptor) {
    sortedRows = rows.toSorted((a, b) => {
      let first = a[sortDescriptor.column];
      let second = b[sortDescriptor.column];
      let cmp = first < second ? -1 : 1;
      if (sortDescriptor.direction === 'descending') {
        cmp = -cmp;
      }
      return cmp;
    });
  }

  return (
    <TableView
      aria-label="Favorite pokemon"
      styles={style({width: 400, maxWidth: 'full'})}
      sortDescriptor={sortDescriptor ?? undefined}
      onSortChange={setSortDescriptor}
    >
      <TableHeader>
        {/*- begin highlight -*/}
        <Column id="name" isRowHeader allowsSorting>Name</Column>
        <Column id="type" allowsSorting>Type</Column>
        <Column id="level" allowsSorting>Level</Column>
        {/*- end highlight -*/}
      </TableHeader>
      <TableBody items={sortedRows}>
        {item => (
          <Row>
            <Cell>{item.name}</Cell>
            <Cell>{item.type}</Cell>
            <Cell>{item.level}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

## Column resizing

Set the `allowsResizing` prop on a Column to make it resizable. Use the `defaultWidth`, `width`, `minWidth`, and `maxWidth` props on a Column to control resizing behavior. These accept pixels, percentages, or fractional values (the [fr](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) unit). The default column width is `1fr`.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const rows = [
  {id: 1, name: '2022 Roadmap Proposal Revision 012822 Copy (2)', date: 'November 27, 2022 at 4:56PM', size: '214 KB'},
  {id: 2, name: 'Budget', date: 'January 27, 2021 at 1:56AM', size: '14 MB'},
  {id: 3, name: 'Welcome Email Template', date: 'July 24, 2022 at 2:48 PM', size: '20 KB'},
  {id: 4, name: 'Job Posting_8301', date: 'May 30, 2025', size: '139 KB'}
];

<TableView aria-label="Table with resizable columns" styles={style({width: 400, maxWidth: 'full'})}>
  <TableHeader>
    {/*- begin highlight -*/}
    <Column id="file" isRowHeader maxWidth={500} allowsResizing>
      File Name
    </Column>
    <Column id="size" width={80}>Size</Column>
    <Column id="date" minWidth={100} allowsResizing>
      Date Modified
    </Column>
    {/*- end highlight -*/}
  </TableHeader>
  <TableBody items={rows}>
    {item => (
      <Row>
        <Cell>{item.name}</Cell>
        <Cell>{item.size}</Cell>
        <Cell>{item.date}</Cell>
      </Row>
    )}
  </TableBody>
</TableView>
```

### Resize events

The TableView's `onResize` event is called when a column resizer is moved by the user. The `onResizeEnd` event is called when the user finishes resizing. These receive a `Map` containing the widths of all columns in the TableView. This example persists the column widths in `localStorage`.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useSyncExternalStore} from 'react';

const rows = [
  {id: 1, name: '2022 Roadmap Proposal Revision 012822 Copy (2)', date: 'November 27, 2022 at 4:56PM', size: '214 KB'},
  {id: 2, name: 'Budget', date: 'January 27, 2021 at 1:56AM', size: '14 MB'},
  {id: 3, name: 'Welcome Email Template', date: 'July 24, 2022 at 2:48 PM', size: '20 KB'},
  {id: 4, name: 'Job Posting_8301', date: 'May 30, 2025', size: '139 KB'}
];

const columns = [
  {id: 'file', name: 'File Name'},
  {id: 'size', name: 'Size'},
  {id: 'date', name: 'Date'}
];

const initialWidths = new Map<string, string | number>([
  ['file', '1fr'],
  ['size', 80],
  ['date', 100]
]);

export default function ResizableTable() {
  let columnWidths = useSyncExternalStore(subscribe, getColumnWidths, getInitialWidths);

  return (
    <TableView
      aria-label="Table with resizable columns"
      onResize={setColumnWidths}
      styles={style({width: 400, maxWidth: 'full'})}>
      <TableHeader columns={columns} dependencies={[columnWidths]}>
        {column => (
          <Column
            isRowHeader={column.id === 'file'}
            allowsResizing
            width={columnWidths.get(column.id)}
          >
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody items={rows}>
        {item => (
          <Row>
            <Cell>{item.name}</Cell>
            <Cell>{item.size}</Cell>
            <Cell>{item.date}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

let parsedWidths;
function getColumnWidths() {
  // Parse column widths from localStorage.
  if (!parsedWidths) {
    let data = localStorage.getItem('table-widths');
    if (data) {
      parsedWidths = new Map(JSON.parse(data));
    }
  }
  return parsedWidths || initialWidths;
}

function setColumnWidths(widths) {
  // Store new widths in localStorage, and trigger subscriptions.
  localStorage.setItem('table-widths', JSON.stringify(Array.from(widths)));
  window.dispatchEvent(new Event('storage'));
}

function getInitialWidths() {
  return initialWidths;
}

function subscribe(fn) {
  let onStorage = () => {
    // Invalidate cache.
    parsedWidths = null;
    fn();
  };

  window.addEventListener('storage', onStorage);
  return () => window.removeEventListener('storage', onStorage);
}
```

## API

```tsx
<TableView>
  <TableHeader>
    <Column />
  </TableHeader>
  <TableBody>
    <Row>
      <Cell />
      <EditableCell />
    </Row>
  </TableBody>
</TableView>
```

### TableView

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `React.ReactNode` | — | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `density` | `"compact" | "regular" | "spacious" | undefined` | 'regular' | Sets the amount of vertical padding within each cell. |
| `disabledBehavior` | `DisabledBehavior | undefined` | "all" | Whether `disabledKeys` applies to all interactions, or only selection. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | A list of row keys to disable. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the table or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isQuiet` | `boolean | undefined` | — | Whether the Table should be displayed with a quiet style. |
| `loadingState` | `LoadingState | undefined` | — | The current loading state of the table. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when a user performs an action on a row. |
| `onLoadMore` | `(() => any) | undefined` | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |
| `onResize` | `((widths: Map<Key, ColumnSize>) => void) | undefined` | — | Handler that is called when a user performs a column resize. Can be used with the width property on columns to put the column widths into a controlled state. |
| `onResizeEnd` | `((widths: Map<Key, ColumnSize>) => void) | undefined` | — | Handler that is called after a user performs a column resize. Can be used to store the widths of columns for another future session. |
| `onResizeStart` | `((widths: Map<Key, ColumnSize>) => void) | undefined` | — | Handler that is called when a user starts a column resize. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `onSortChange` | `((descriptor: SortDescriptor) => any) | undefined` | — | Handler that is called when the sorted column or direction changes. |
| `overflowMode` | `"wrap" | "truncate" | undefined` | 'truncate' | Sets the overflow behavior for the cell contents. |
| `renderActionBar` | `((selectedKeys: "all" | Set<Key>) => ReactElement) | undefined` | — | Provides the ActionBar to display when rows are selected in the TableView. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `shouldSelectOnPressUp` | `boolean | undefined` | — | Whether selection should occur on press up instead of press down. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `sortDescriptor` | `SortDescriptor | undefined` | — | The current sorted column and direction. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### TableHeader

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode | ((item: T) => ReactElement)` | — | A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. |
| `columns` | `Iterable<T> | undefined` | — | A list of table columns. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the column cache when using dynamic collections. |

### Column

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"center" | "start" | "end" | undefined` | 'start' | The alignment of the column's contents relative to its allotted width. |
| `allowsResizing` | `boolean | undefined` | — | Whether the column allows resizing. |
| `allowsSorting` | `boolean | undefined` | — | Whether the column allows sorting. |
| `children` | `React.ReactNode` | — | The content to render as the column header. |
| `defaultWidth` | `ColumnSize | null | undefined` | — | The default width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`. |
| `id` | `Key | undefined` | — | The unique id of the column. |
| `isRowHeader` | `boolean | undefined` | — | Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. |
| `maxWidth` | `ColumnStaticSize | null | undefined` | — | The maximum width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`. |
| `menuItems` | `React.ReactNode` | — | Menu fragment to be rendered inside the column header's menu. |
| `minWidth` | `ColumnStaticSize | null | undefined` | — | The minimum width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`. |
| `showDivider` | `boolean | undefined` | — | Whether the column should render a divider between it and the next column. |
| `textValue` | `string | undefined` | — | A string representation of the column's contents, used for accessibility announcements. |
| `width` | `ColumnSize | null | undefined` | — | The width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`. |

### TableBody

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `renderEmptyState` | `((props: TableBodyRenderProps) => ReactNode) | undefined` | — | Provides content to display when there are no rows in the table. |

### Row

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode | ((item: T) => ReactElement)` | — | The cells within the row. Supports static items or a function for dynamic rendering. |
| `columns` | `Iterable<T> | undefined` | — | A list of columns used when dynamically rendering cells. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the cell cache when using dynamic collections. |
| `dir` | `string | undefined` | — |  |
| `download` | `string | boolean | undefined` | — | 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 | undefined` | — |  |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the row. |
| `inert` | `boolean | undefined` | — |  |
| `isDisabled` | `boolean | undefined` | — | Whether the row is disabled. |
| `lang` | `string | undefined` | — |  |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on the row. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onAnimationEnd` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAnimationEndCapture` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAnimationIteration` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAnimationIterationCapture` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAnimationStart` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAnimationStartCapture` | `React.AnimationEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAuxClick` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onAuxClickCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onClick` | `((e: React.MouseEvent<FocusableElement>) => void) | undefined` | — | **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. |
| `onClickCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onContextMenu` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onContextMenuCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onDoubleClick` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onDoubleClickCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onGotPointerCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onGotPointerCaptureCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onLostPointerCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onLostPointerCaptureCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseDown` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseDownCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseEnter` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseLeave` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseMove` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseMoveCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseOut` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseOutCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseOver` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseOverCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseUp` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onMouseUpCapture` | `React.MouseEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerCancel` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerCancelCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerDown` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerDownCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerEnter` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerLeave` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerMove` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerMoveCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerOut` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerOutCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerOver` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerOverCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerUp` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onPointerUpCapture` | `React.PointerEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onScroll` | `React.UIEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onScrollCapture` | `React.UIEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchCancel` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchCancelCapture` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchEnd` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchEndCapture` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchMove` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchMoveCapture` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchStart` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTouchStartCapture` | `React.TouchEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionCancel` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionCancelCapture` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionEnd` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionEndCapture` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionRun` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionRunCapture` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionStart` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onTransitionStartCapture` | `React.TransitionEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onWheel` | `React.WheelEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `onWheelCapture` | `React.WheelEventHandler<HTMLTableRowElement> | undefined` | — |  |
| `ping` | `string | undefined` | — | 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` | `React.HTMLAttributeReferrerPolicy | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `target` | `React.HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the row's contents, used for features like typeahead. |
| `translate` | `"yes" | "no" | undefined` | — |  |

### Cell

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `"center" | "start" | "end" | undefined` | 'start' | The alignment of the column's contents relative to its allotted width. |
| `children` | `React.ReactNode` | — | The content to render as the cell children. |
| `colSpan` | `number | undefined` | — | Indicates how many columns the data cell spans. |
| `id` | `Key | undefined` | — | The unique id of the cell. |
| `isSticky` | `boolean | undefined` | — |  |
| `showDivider` | `boolean | undefined` | — | Whether the column should render a divider between it and the next column. |
| `textValue` | `string | undefined` | — | A string representation of the cell's contents, used for features like typeahead. |

### EditableCell

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `action` | `string | ((formData: FormData) => void | Promise<void>) | undefined` | — | The action to submit the form to. Only available in React 19+. |
| `align` | `"center" | "start" | "end" | undefined` | 'start' | The alignment of the column's contents relative to its allotted width. |
| `children` | `React.ReactNode` | — | The content to render as the cell children. |
| `colSpan` | `number | undefined` | — | Indicates how many columns the data cell spans. |
| `id` | `Key | undefined` | — | The unique id of the cell. |
| `isSaving` | `boolean | undefined` | — | Whether the cell is currently being saved. |
| `onCancel` | `(() => void) | undefined` | — | Handler that is called when the user cancels the edit. |
| `onSubmit` | `((e: FormEvent<HTMLFormElement>) => void) | undefined` | — | Handler that is called when the value has been changed and is ready to be saved. |
| `renderEditing` | `() => ReactNode` | — | The component which will handle editing the cell. For example, a `TextField` or a `Picker`. |
| `showDivider` | `boolean | undefined` | — | Whether the column should render a divider between it and the next column. |
| `textValue` | `string | undefined` | — | A string representation of the cell's contents, used for features like typeahead. |

## Related Types

### SortDescriptor

| Name | Type | Description |
|------|------|-------------|
| `column` \* | `Key` | The key of the column to sort by. |
| `direction` \* | `SortDirection` | The direction to sort by. |

---

# Source: https://react-spectrum.adobe.com/Tabs.md

# Tabs

Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.

```tsx
import {Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
import Settings from '@react-spectrum/s2/illustrations/gradient/generic1/GearSetting';

<Tabs
  
  styles={style({minWidth: 250})}>
  <TabList aria-label="Tabs">
    <Tab id="home">Home</Tab>
    <Tab id="files">Files</Tab>
    <Tab id="search">Search</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="home">
    <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
      <Home />
    </div>
  </TabPanel>
  <TabPanel id="files">
    <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
      <Folder />
    </div>
  </TabPanel>
  <TabPanel id="search">
    <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
      <Search />
    </div>
  </TabPanel>
  <TabPanel id="settings">
    <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
      <Settings />
    </div>
  </TabPanel>
</Tabs>
```

## Content

`TabList` follows the [Collection Components API](collections.md?component=Tabs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children.

```tsx
import {ActionButton, ActionButtonGroup, Tabs, TabList, Tab, TabPanel, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import AddCircle from '@react-spectrum/s2/icons/AddCircle';
import RemoveCircle from '@react-spectrum/s2/icons/RemoveCircle';

function Example() {
  let [tabs, setTabs] = useState([
    {id: 1, title: 'Tab 1', content: 'Tab body 1'},
    {id: 2, title: 'Tab 2', content: 'Tab body 2'},
    {id: 3, title: 'Tab 3', content: 'Tab body 3'}
  ]);

  let addTab = () => {
    setTabs(tabs => [
      ...tabs,
      {
        id: tabs.length + 1,
        title: `Tab ${tabs.length + 1}`,
        content: `Tab body ${tabs.length + 1}`
      }
    ]);
  };

  let removeTab = () => {
    if (tabs.length > 1) {
      setTabs(tabs => tabs.slice(0, -1));
    }
  };

  return (
    <Tabs aria-label="Tabs" styles={style({width: 'full'})}>
      <div className={style({display: 'flex', alignItems: 'center'})}>
        <TabList
          items={tabs}
          styles={style({flexShrink: 1, flexGrow: 1, flexBasis: 'auto'})}>
          {item => <Tab>{item.title}</Tab>}
        </TabList>
        <ActionButtonGroup density="compact" size="S">
          <ActionButton onPress={addTab} aria-label="Add tab">
            <AddCircle />
          </ActionButton>
          <ActionButton onPress={removeTab} aria-label="Remove tab">
            <RemoveCircle />
          </ActionButton>
        </ActionButtonGroup>
      </div>
      {/*- begin highlight -*/}
      <Collection items={tabs}>
        {item => <TabPanel>{item.content}</TabPanel>}
      </Collection>
      {/*- end highlight -*/}
    </Tabs>
  )
}
```

### Icons

`Tag` supports icons and text as children. Text is always required, but can be hidden when the tabs are expanded using the `labelBehavior` prop.

```tsx
"use client"
import {Tabs, TabList, Tab, TabPanel, Text} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Bell from '@react-spectrum/s2/icons/Bell';
import Heart from '@react-spectrum/s2/icons/Heart';

<Tabs>
  <TabList>
    <Tab id="edit">
      {/*- begin highlight -*/}
      <Edit />
      <Text>Edit</Text>
      {/*- end highlight -*/}
    </Tab>
    <Tab id="bell">
      <Bell />
      <Text>Notifications</Text>
    </Tab>
    <Tab id="heart">
      <Heart />
      <Text>Likes</Text>
    </Tab>
  </TabList>
  <TabPanel id="edit">
    Review your edits
  </TabPanel>
  <TabPanel id="bell">
    Check your notifications
  </TabPanel>
  <TabPanel id="heart">
    See your likes
  </TabPanel>
</Tabs>
```

### Overflow behavior

Horizontal tabs automatically collapse into a Picker when space is limited.

```tsx
import {Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 320,
    maxWidth: 'full',
    padding: 16,
    boxSizing: 'border-box',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'gray-300',
    borderRadius: 'default',
    overflow: 'hidden',
    resize: 'horizontal'
  })}>
  {/*- begin focus -*/}
  <Tabs aria-label="Tabs">
    <TabList>
      <Tab id="home">Home</Tab>
      <Tab id="profile">Profile</Tab>
      <Tab id="contact">Contact</Tab>
      <Tab id="about">About</Tab>
    </TabList>
    <TabPanel id="home">
      Welcome home
    </TabPanel>
    <TabPanel id="profile">
      View your profile
    </TabPanel>
    <TabPanel id="contact">
      Find your contacts
      </TabPanel>
    <TabPanel id="about">
      Learn more
    </TabPanel>
  </Tabs>
  {/*- end focus -*/}
</div>
```

## Selection

Use the `defaultSelectedKey` or `selectedKey` prop to set the selected tab. The selected key corresponds to the `id` prop of a `<Tab>`. Tabs can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=Tabs#single-selection) for more details.

```tsx
import {Tabs, TabList, Tab, TabPanel, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
import Settings from '@react-spectrum/s2/illustrations/gradient/generic1/GearSetting';
import {useState} from 'react';

function Example() {
  let [tab, setTab] = useState<Key>("files");
  return (
    <div>
      <Tabs
        aria-label="Tabs"
        selectedKey={tab}
        onSelectionChange={setTab}
      >
        <TabList aria-label="Tabs">
          <Tab id="home">Home</Tab>
          <Tab id="files">Files</Tab>
          <Tab id="search" isDisabled>Search</Tab>
          <Tab id="settings">Settings</Tab>
        </TabList>
        <TabPanel id="home">
          <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
            <Home />
          </div>
        </TabPanel>
        <TabPanel id="files">
          <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
            <Folder />
          </div>
        </TabPanel>
        <TabPanel id="search">
          <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
            <Search />
          </div>
        </TabPanel>
        <TabPanel id="settings">
          <div className={style({size: 'full', display: 'flex', alignItems: 'center', justifyContent: 'center'})}>
            <Settings />
          </div>
        </TabPanel>
      </Tabs>
      <p>Selected tab: {tab}</p>
    </div>
  );
}
```

## API

```tsx
<Tabs>
  <TabList>
    <Tab>
      <Icon />
      <Text />
    </Tab>
  </TabList>
  <TabPanel />
</Tabs>
```

### Tabs

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the tabs. |
| `defaultSelectedKey` | `Key | undefined` | — | The initial selected key in the collection (uncontrolled). |
| `density` | `"compact" | "regular" | undefined` | 'regular' | The amount of space between the tabs. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
| `keyboardActivation` | `"manual" | "automatic" | undefined` | 'automatic' | Whether tabs are activated automatically on focus or manually. |
| `labelBehavior` | `"show" | "hide" | undefined` | 'show' | Defines if the text within the tabs should be hidden and only the icon should be shown. The text is always visible when the item is collapsed into a picker. |
| `onSelectionChange` | `((key: Key) => void) | undefined` | — | Handler that is called when the selection changes. |
| `orientation` | `Orientation | undefined` | 'horizontal' | The orientation of the tabs. |
| `selectedKey` | `Key | null | undefined` | — | The currently selected key in the collection (controlled). |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### TabList

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The content to display in the tablist. |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### Tab

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the tab. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the tab. |
| `isDisabled` | `boolean | undefined` | — | Whether the tab is disabled. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### TabPanel

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content to display in the tab panels. |
| `id` | `Key | undefined` | — | The unique id of the tab. |
| `shouldForceMount` | `boolean | undefined` | false | Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/TagGroup.md

# TagGroup

Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

```tsx
import {TagGroup, Tag} from '@react-spectrum/s2';

<TagGroup>
  <Tag>Chocolate</Tag>
  <Tag>Mint</Tag>
  <Tag>Strawberry</Tag>
  <Tag>Vanilla</Tag>
  <Tag>Chocolate Chip Cookie Dough</Tag>
  <Tag>Rocky Road</Tag>
  <Tag>Butter Pecan</Tag>
  <Tag>Neapolitan</Tag>
  <Tag>Salted Caramel</Tag>
  <Tag>Mint Chocolate Chip</Tag>
  <Tag>Tonight Dough</Tag>
  <Tag>Lemon Cookie</Tag>
  <Tag>Cookies and Cream</Tag>
  <Tag>Phish Food</Tag>
  <Tag>Peanut Butter Cup</Tag>
  <Tag>Coffee</Tag>
  <Tag>Pistachio</Tag>
  <Tag>Cherry</Tag>
</TagGroup>
```

## Content

`TagGroup` follows the [Collection Components API](collections.md?component=TagGroup), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. Items can be removed via the `onRemove` event.

```tsx
import {TagGroup, Tag, useListData} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function PhotoCategories() {
  let list = useListData({
    initialItems: [
      {id: 1, name: 'Landscape'},
      {id: 2, name: 'Portrait'},
      {id: 3, name: 'Night'},
      {id: 4, name: 'Dual'},
      {id: 5, name: 'Golden Hour'}
    ]
  });

  return (
    <TagGroup
      label="Photo categories"
      styles={style({maxWidth: 320})}
      /*- begin highlight -*/
      items={list.items}
      onRemove={(keys) => list.remove(...keys)}>
      {/*- end highlight -*/}
      {(item) => <Tag>{item.name}</Tag>}
    </TagGroup>
  );
}
```

### Slots

`Tag` supports icons, avatars, or images, and text as children.

## S2 example

```tsx
import {TagGroup, Tag, Text} from '@react-spectrum/s2';
import FileText from '@react-spectrum/s2/icons/FileText';
import Camera from '@react-spectrum/s2/icons/Camera';
import Filmstrip from '@react-spectrum/s2/icons/Filmstrip';
import VectorDraw from '@react-spectrum/s2/icons/VectorDraw';

<TagGroup label="Media types">
  <Tag textValue="Text">
    {/*- begin highlight -*/}
    <FileText />
    <Text>Text</Text>
    {/*- end highlight -*/}
  </Tag>
  <Tag textValue="Photos">
    <Camera />
    <Text>Photos</Text>
  </Tag>
  <Tag textValue="Videos">
    <Filmstrip />
    <Text>Videos</Text>
  </Tag>
  <Tag textValue="Illustration">
    <VectorDraw />
    <Text>Illustration</Text>
  </Tag>
</TagGroup>
```

```tsx
import {TagGroup, Tag, Avatar, Text} from '@react-spectrum/s2';

<TagGroup label="Users">
  <Tag textValue="Abraham Baker">
    {/*- begin highlight -*/}
    <Avatar src="https://www.untitledui.com/images/avatars/abraham-baker" />
    <Text>Abraham Baker</Text>
    {/*- end highlight -*/}
  </Tag>
  <Tag textValue="Adriana Sullivan">
    <Avatar src="https://www.untitledui.com/images/avatars/adriana-sullivan" />
    <Text>Adriana Sullivan</Text>
  </Tag>
  <Tag textValue="Jonathan Kelly">
    <Avatar src="https://www.untitledui.com/images/avatars/jonathan-kelly" />
    <Text>Jonathan Kelly</Text>
  </Tag>
  <Tag textValue="Zara Bush">
    <Avatar src="https://www.untitledui.com/images/avatars/zara-bush" />
    <Text>Zara Bush</Text>
  </Tag>
</TagGroup>
```

```tsx
import {TagGroup, Tag, Image, Text} from '@react-spectrum/s2';

<TagGroup label="Dogs">
  <Tag textValue="Golden Retriever">
    {/*- begin highlight -*/}
    <Image src="https://images.unsplash.com/photo-1422565096762-bdb997a56a84?w=100&h=100&fit=crop" />
    <Text>Golden Retriever</Text>
    {/*- end highlight -*/}
  </Tag>
  <Tag textValue="Pug">
    <Image src="https://images.unsplash.com/photo-1523626797181-8c5ae80d40c2?w=100&h=100&fit=crop" />
    <Text>Pug</Text>
  </Tag>
  <Tag textValue="Chihuahua">
    <Image src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?w=100&h=100&fit=crop" />
    <Text>Chihuahua</Text>
  </Tag>
  <Tag textValue="Husky">
    <Image src="https://images.unsplash.com/photo-1491604612772-6853927639ef?w=100&h=100&fit=crop" />
    <Text>Husky</Text>
  </Tag>
</TagGroup>
```

### Links

Use the `href` prop on a `<Tag>` to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework.

```tsx
import {TagGroup, Tag} from '@react-spectrum/s2';

<TagGroup label="Photo categories">
  {/*- begin highlight -*/}
  <Tag href="https://en.wikipedia.org/wiki/Landscape_photography" target="_blank">Landscape</Tag>
  {/*- end highlight -*/}
  <Tag href="https://en.wikipedia.org/wiki/Portrait_photography" target="_blank">Portrait</Tag>
  <Tag href="https://en.wikipedia.org/wiki/Macro_photography" target="_blank">Macro</Tag>
  <Tag href="https://en.wikipedia.org/wiki/Night_photography" target="_blank">Night</Tag>
  <Tag href="https://en.wikipedia.org/wiki/Dualphotography" target="_blank">Dual</Tag>
  <Tag href="https://en.wikipedia.org/wiki/Golden_hour_(photography)" target="_blank">Golden Hour</Tag>
</TagGroup>
```

### Empty state

Use `renderEmptyState` to render placeholder content when the TagGroup is empty.

```tsx
import {TagGroup, Link} from '@react-spectrum/s2';

<TagGroup
  label="Photo categories"
  renderEmptyState={() => (
    <>No categories. <Link href="https://react-spectrum.adobe.com/">Click here</Link> to add some.</>
  )}>
  {[]}
</TagGroup>
```

## Selection

Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=TagGroup) for more details.

```tsx
import {TagGroup, Tag, type Selection} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <div>
      <TagGroup
        {...props}
        label="Amenities"
        selectedKeys={selected}
        onSelectionChange={setSelected}
      >
        <Tag id="laundry">Laundry</Tag>
        <Tag id="fitness">Fitness center</Tag>
        <Tag id="parking" isDisabled>Parking</Tag>
        <Tag id="pool">Swimming pool</Tag>
        <Tag id="breakfast">Breakfast</Tag>
      </TagGroup>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </div>
  );
}
```

## Group actions

Use the `groupActionLabel` and `onGroupAction` props to add an action button at the end of the tags.

```tsx
import {TagGroup, Tag} from '@react-spectrum/s2';

<TagGroup
  label="Interests"
  /*- begin highlight -*/
  groupActionLabel="Clear"
  onGroupAction={() => alert('Clear')}>
  {/*- end highlight -*/}
  <Tag>News</Tag>
  <Tag>Travel</Tag>
  <Tag>Gaming</Tag>
  <Tag>Shopping</Tag>
</TagGroup>
```

## API

```tsx
<TagGroup>
  <Tag>
    <Icon /> or <Avatar /> or <Image />
    <Text />
  </Tag>
</TagGroup>
```

### TagGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `description` | `ReactNode` | — | A description for the tag group. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `errorMessage` | `ReactNode` | — | An error message for the field. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the TagGroup or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `groupActionLabel` | `string | undefined` | — | The label to display on the action button. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isEmphasized` | `boolean | undefined` | — | Whether the tags are displayed in an emphasized style. |
| `isInvalid` | `boolean | undefined` | — | Whether the tags are displayed in a error state. |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxRows` | `number | undefined` | — | Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. |
| `onGroupAction` | `(() => void) | undefined` | — | Handler that is called when the action button is pressed. |
| `onRemove` | `((keys: Set<Key>) => void) | undefined` | — | Handler that is called when a user deletes a tag. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `renderEmptyState` | `(() => ReactNode) | undefined` | — | Provides content to display when there are no items in the tag group. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionBehavior` | `SelectionBehavior | undefined` | — | How multiple selection should behave in the collection. |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `shouldSelectOnPressUp` | `boolean | undefined` | — | Whether selection should occur on press up instead of press down. |
| `size` | `"S" | "M" | "L" | undefined` | 'M' | The size of the tag group. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### Tag

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | The children of the tag. |
| `download` | `string | boolean | undefined` | — | 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). |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | A unique id for the tag. |
| `isDisabled` | `boolean | undefined` | — | Whether the tag is disabled. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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 | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `target` | `HTMLAttributeAnchorTarget | undefined` | — | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `textValue` | `string | undefined` | — | A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string. |

---

# Source: https://react-spectrum.adobe.com/TextArea.md

# TextArea

A textarea allows a user to input mult-line text.

```tsx
import {TextArea} from '@react-spectrum/s2';

<TextArea />
```

## Value

Use the `value` or `defaultValue` prop to set the text value, and `onChange` to handle user input.

```tsx
import {TextArea} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [name, setName] = useState('');

  return (
    <>
      <TextArea
        label="Comment"
        placeholder="Share your thoughts!"
        value={name}
        onChange={setName} />
      {/*- end highlight -*/}
      <p>Your comment: {name}</p>
    </>
  );
}
```

## Forms

Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, or `maxLength` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {TextArea, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <TextArea
        {...props}
        label="Comment"
        placeholder="Share your thoughts!"
        name="email"
        description="Please provide at least 10 characters."
        
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

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

---

# Source: https://react-spectrum.adobe.com/TextField.md

# TextField

TextFields are text inputs that allow users to input custom text entries
with a keyboard. Various decorations can be displayed around the field to
communicate the entry requirements.

```tsx
import {TextField} from '@react-spectrum/s2';

<TextField />
```

## Value

Use the `value` or `defaultValue` prop to set the text value, and `onChange` to handle user input.

```tsx
import {TextField} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [name, setName] = useState('');

  return (
    <>
      <TextField
        label="Name"
        placeholder="Enter your full name"
        value={name}
        onChange={setName} />
      {/*- end highlight -*/}
      <p>Your name: {name}</p>
    </>
  );
}
```

## Forms

Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, `maxLength`, `pattern`, or `type` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {TextField, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <TextField
        {...props}
        label="Email"
        placeholder="Enter your email"
        name="email"
        
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-activedescendant` | `string | undefined` | — | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| `aria-autocomplete` | `"none" | "list" | "inline" | "both" | undefined` | — | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-errormessage` | `string | undefined` | — | Identifies the element that provides an error message for the object. |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined` | — | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoCorrect` | `string | undefined` | — | 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `string | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `enterKeyHint` | `"search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined` | — | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `inputMode` | `"text" | "numeric" | "search" | "none" | "url" | "tel" | "email" | "decimal" | undefined` | — | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxLength` | `number | undefined` | — | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). |
| `minLength` | `number | undefined` | — | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBeforeInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event). |
| `onBlur` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: string) => void) | undefined` | — | Handler that is called when the value changes. |
| `onCompositionEnd` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| `onCompositionStart` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event). |
| `onCopy` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| `onCut` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| `onFocus` | `((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onInput` | `FormEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPaste` | `ClipboardEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| `onSelect` | `ReactEventHandler<HTMLInputElement> | undefined` | — | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event). |
| `pattern` | `string | undefined` | — | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). |
| `placeholder` | `string | undefined` | — | Temporary text that occupies the text input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the text field. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `spellCheck` | `string | undefined` | — | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck). |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `type` | `"text" | "search" | (string & {}) | "url" | "tel" | "email" | "password" | undefined` | 'text' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: string) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `string | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/TimeField.md

# TimeField

TimeFields allow users to enter and edit time values using a keyboard.
Each part of the time is displayed in an individually editable segment.

```tsx
import {TimeField} from '@react-spectrum/s2';

<TimeField />
```

## Value

Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](react-aria:internationalized/date/.md) package. `TimeField` accepts plain [Time](react-aria:internationalized/date/Time.md), [CalendarDateTime](react-aria:internationalized/date/CalendarDateTime.md), or [ZonedDateTime](react-aria:internationalized/date/ZonedDateTime.md), but only displays the time.

```tsx
import {Time} from '@internationalized/date';
import {TimeField} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [time, setTime] = useState<Time | null>(new Time(11, 45));
  
  return (
    <>
      <TimeField
        value={time}
        onChange={setTime} />
      {/*- end highlight -*/}
      <p>Selected time: {time ? time.toString() : '--'}</p>
    </>
  );
}
```

### Format options

The time format is automatically determined based on the user's locale. `TimeField` supports several props to control how values are displayed.

```tsx
import {parseZonedDateTime} from '@internationalized/date';
import {TimeField} from '@react-spectrum/s2';

<TimeField
  
  defaultValue={parseZonedDateTime('2025-02-03T17:45:00[America/Los_Angeles]')} />
```

## Forms

Use the `name` prop to submit the selected date to the server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) string. Set the `isRequired`, `minValue`, or `maxValue` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms.md) guide to learn more.

```tsx
import {Time} from '@internationalized/date';
import {TimeField, Form, Button} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <TimeField
        {...props}
        label="Appointment time"
        name="time"
        
        minValue={new Time(9)}
        maxValue={new Time(17)}
        validate={time => time?.minute % 15 !== 0 ? 'Appointments start every 15 minutes.' : null}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## API

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `contextualHelp` | `ReactNode` | — | A ContextualHelp element to place next to the label. |
| `defaultValue` | `T | null | undefined` | — | The default value (uncontrolled). |
| `description` | `ReactNode` | — | A description for the field. Provides a hint such as specific requirements for what to choose. |
| `errorMessage` | `ReactNode | ((v: ValidationResult) => ReactNode)` | — | An error message for the field. |
| `form` | `string | undefined` | — | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| `granularity` | `"hour" | "minute" | "second" | undefined` | 'minute' | Determines the smallest unit that is displayed in the time picker. |
| `hideTimeZone` | `boolean | undefined` | — | Whether to hide the time zone abbreviation. |
| `hourCycle` | `24 | 12 | undefined` | — | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the input is disabled. |
| `isInvalid` | `boolean | undefined` | — | Whether the input value is invalid. |
| `isReadOnly` | `boolean | undefined` | — | Whether the input can be selected but not changed by the user. |
| `isRequired` | `boolean | undefined` | — | Whether user input is required on the input before form submission. |
| `label` | `ReactNode` | — | The content to display as the label. |
| `labelAlign` | `Alignment | undefined` | 'start' | The label's horizontal alignment relative to the element it is labeling. |
| `labelPosition` | `LabelPosition | undefined` | 'top' | The label's overall position relative to the element it is labeling. |
| `maxValue` | `TimeValue | null | undefined` | — | The maximum allowed time that a user may select. |
| `minValue` | `TimeValue | null | undefined` | — | The minimum allowed time that a user may select. |
| `name` | `string | undefined` | — | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| `necessityIndicator` | `NecessityIndicator | undefined` | 'icon' | Whether the required state should be shown as an icon or text. |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((value: MappedTimeValue<T> | null) => void) | undefined` | — | Handler that is called when the value changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `placeholderValue` | `T | undefined` | — | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle. |
| `shouldForceLeadingZeros` | `boolean | undefined` | — | Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale. |
| `size` | `"S" | "M" | "L" | "XL" | undefined` | 'M' | The size of the TimeField. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `validate` | `((value: MappedTimeValue<T>) => ValidationError | true | null | undefined) | undefined` | — | 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. |
| `validationBehavior` | `"aria" | "native" | undefined` | 'native' | 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. |
| `value` | `T | null | undefined` | — | The current value (controlled). |

---

# Source: https://react-spectrum.adobe.com/Toast.md

# Toast



```tsx
import {ToastContainer, ButtonGroup, Button, ToastQueue} from '@react-spectrum/s2';

function App(props) {
  return (
    <>
      <ToastContainer {...props} />
      <ButtonGroup>
        <Button
          onPress={() => ToastQueue.neutral('Toast available')}
          variant="secondary">
          Show Neutral Toast
        </Button>
        <Button
          onPress={() => ToastQueue.positive('Toast is done!')}
          variant="primary">
          Show Positive Toast
        </Button>
        <Button
          onPress={() => ToastQueue.negative('Toast is burned!')}
          variant="negative">
          Show Negative Toast
        </Button>
        <Button
          onPress={() => ToastQueue.info('Toasting…')}
          variant="accent">
          Show Info Toast
        </Button>
      </ButtonGroup>
    </>
  );
}
```

## Actions

Use the `actionLabel` and `onAction` options to add an action button to the toast. Set `shouldCloseOnAction` to true to close the toast when the user presses the button.

```tsx
import {Button, ToastQueue} from '@react-spectrum/s2';

<Button
  onPress={() => ToastQueue.info('An update is available', {
    /*- begin highlight -*/
    actionLabel: 'Update',
    onAction: () => alert('Updating!'),
    shouldCloseOnAction: true
    /*- end highlight -*/
  })}>
  Show actionable toast
</Button>
```

## Dismissal

Use the `timeout` option to automatically hide a toast after a delay. For accessibility, toasts have a minimum timeout of 5 seconds, and actionable toasts will not auto dismiss. Timers will pause when the user focuses or hovers over a toast.

```tsx
import {Button, ToastQueue} from '@react-spectrum/s2';

<Button
  onPress={() => ToastQueue.positive('Toast is done!', {
    /*- begin highlight -*/
    timeout: 5000
    /*- end highlight -*/
  })}>
  Show auto-dismissing toast
</Button>
```

### Programmatic dismissal

Use the close function returned by `ToastQueue` to programmatically dismiss a toast that is no longer relevant. The `onClose` event is triggered when a toast is dismissed, either by user action or programmatically.

```tsx
import {Button, ToastQueue, Text} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [close, setClose] = useState<(() => void) | null>(null);

  return (
    <Button
      onPress={() => {
        /*- begin highlight -*/
        if (!close) {
          let close = ToastQueue.negative('Unable to save', {
            onClose: () => setClose(null)
          });
          setClose(() => close);
        } else {
          close();
        }
        /*- end highlight -*/
      }}>
      <Text>{close ? 'Hide Toast' : 'Show Toast'}</Text>
    </Button>
  );
}
```

## API

### ToastContainer

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | "Notifications" | An accessibility label for the toast region. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `dir` | `string | undefined` | — |  |
| `hidden` | `boolean | undefined` | — |  |
| `inert` | `boolean | undefined` | — |  |
| `lang` | `string | undefined` | — |  |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onClick` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onClickCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseLeave` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerLeave` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement> | undefined` | — |  |
| `onScroll` | `UIEventHandler<HTMLDivElement> | undefined` | — |  |
| `onScrollCapture` | `UIEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionCancel` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionCancelCapture` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionRun` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionRunCapture` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionStart` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onTransitionStartCapture` | `TransitionEventHandler<HTMLDivElement> | undefined` | — |  |
| `onWheel` | `WheelEventHandler<HTMLDivElement> | undefined` | — |  |
| `onWheelCapture` | `WheelEventHandler<HTMLDivElement> | undefined` | — |  |
| `placement` | `ToastPlacement | undefined` | "bottom" | Placement of the toast container on the page. |
| `translate` | `"yes" | "no" | undefined` | — |  |

### ToastQueue

#### Toast Options

| Name | Type | Description |
|------|------|-------------|
| `actionLabel` | `string | undefined` | A label for the action button within the toast. |
| `onAction` | `(() => void) | undefined` | Handler that is called when the action button is pressed. |
| `shouldCloseOnAction` | `boolean | undefined` | Whether the toast should automatically close when an action is performed. |
| `onClose` | `(() => void) | undefined` | Handler that is called when the toast is closed, either by the user or after a timeout. |
| `timeout` | `number | undefined` | A timeout to automatically close the toast after, in milliseconds. |
| `id` | `string | undefined` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

---

# Source: https://react-spectrum.adobe.com/ToggleButton.md

# ToggleButton

ToggleButtons allow users to toggle a selection on or off, for example
switching between two states or modes.

```tsx
import {ToggleButton} from '@react-spectrum/s2';

<ToggleButton />
```

## Selection

Use the `isSelected` or `defaultSelected` prop to set the selection state, and `onChange` to handle selection changes.

```tsx
import {ToggleButton} from '@react-spectrum/s2';
import {useState} from 'react';
import Star from '@react-spectrum/s2/icons/Star';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <ToggleButton
        {...props}
        aria-label="Star"
        /*- begin highlight -*/
        isSelected={selected}
        onChange={setSelection}>
        {/*- end highlight -*/}
        <Star />
      </ToggleButton>
      <p>{selected ? 'Starred' : 'Not starred'}</p>
    </>
  );
}
```

## API

```tsx
<ToggleButton>
  <Icon /> or <Avatar />
  <Text />
</ToggleButton>
```

### ToggleButton

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-controls` | `string | undefined` | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-disabled` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element is disabled to users of assistive technology. |
| `aria-expanded` | `boolean | "true" | "false" | undefined` | — | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined` | — | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `aria-pressed` | `boolean | "true" | "false" | "mixed" | undefined` | — | Indicates the current "pressed" state of toggle buttons. |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ReactNode` | — | The content to display in the button. |
| `defaultSelected` | `boolean | undefined` | — | Whether the element should be selected (uncontrolled). |
| `excludeFromTabOrder` | `boolean | undefined` | — | 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. |
| `id` | `Key | undefined` | — | When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. |
| `isDisabled` | `boolean | undefined` | — | Whether the button is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). |
| `isQuiet` | `boolean | undefined` | — | Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). |
| `isSelected` | `boolean | undefined` | — | Whether the element should be selected (controlled). |
| `onBlur` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element loses focus. |
| `onChange` | `((isSelected: boolean) => void) | undefined` | — | Handler that is called when the element's selection state changes. |
| `onFocus` | `((e: FocusEvent<Element>) => void) | undefined` | — | Handler that is called when the element receives focus. |
| `onFocusChange` | `((isFocused: boolean) => void) | undefined` | — | Handler that is called when the element's focus status changes. |
| `onKeyDown` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is pressed. |
| `onKeyUp` | `((e: KeyboardEvent) => void) | undefined` | — | Handler that is called when a key is released. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `preventFocusOnPress` | `boolean | undefined` | — | Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | 'M' | The size of the ActionButton. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the ActionButton appears over a color background. |
| `styles` | `StylesProp | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/ToggleButtonGroup.md

# ToggleButtonGroup

A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.

```tsx
import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';

<ToggleButtonGroup>
  <ToggleButton id="bold">
    <TextBold />
    <Text>Bold</Text>
  </ToggleButton>
  <ToggleButton id="italic">
    <TextItalic />
    <Text>Italic</Text>
  </ToggleButton>
  <ToggleButton id="underline">
    <TextUnderline />
    <Text>Underline</Text>
  </ToggleButton>
</ToggleButtonGroup>
```

## Selection

Use the `selectionMode` prop to enable single or multiple selection. The selected toggle buttons can be controlled via the `selectedKeys` prop, matching the `id` of each `<ToggleButton>`. Toggle buttons can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=ToggleButtonGroup) for more details.

```tsx
import {ToggleButtonGroup, ToggleButton, type Key} from '@react-spectrum/s2';
import {useState} from 'react';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';
import TextStrikeThrough from '@react-spectrum/s2/icons/TextStrikeThrough';

function Example(props) {
  let [selected, setSelected] = useState(new Set<Key>(['bold']));

  return (
    <>
      <ToggleButtonGroup
        {...props}
        aria-label="Text style"
        density="compact"
        /*- begin highlight -*/
        
        selectedKeys={selected}
        onSelectionChange={setSelected}>
        {/*- end highlight -*/}
        <ToggleButton id="bold" aria-label="Bold">
          <TextBold />
        </ToggleButton>
        <ToggleButton id="italic" aria-label="Italic" isDisabled>
          <TextItalic />
        </ToggleButton>
        <ToggleButton id="underline" aria-label="Underline">
          <TextUnderline />
        </ToggleButton>
        <ToggleButton id="strike" aria-label="Strikethrough">
          <TextStrikeThrough />
        </ToggleButton>
      </ToggleButtonGroup>
      <p>Current selection: {[...selected].join(', ')}</p>
    </>
  );
}
```

## API

```tsx
<ToggleButtonGroup>
  <ToggleButton />
</ToggleButtonGroup>
```

### ToggleButtonGroup

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The children of the group. |
| `defaultSelectedKeys` | `Iterable<Key> | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `density` | `"compact" | "regular" | undefined` | "regular" | Spacing between the buttons. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `isDisabled` | `boolean | undefined` | — | Whether the group is disabled. |
| `isEmphasized` | `boolean | undefined` | — | Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). |
| `isJustified` | `boolean | undefined` | — | Whether the buttons should divide the container width equally. |
| `isQuiet` | `boolean | undefined` | — | Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). |
| `onSelectionChange` | `((keys: Set<Key>) => void) | undefined` | — | Handler that is called when the selection changes. |
| `orientation` | `"horizontal" | "vertical" | undefined` | 'horizontal' | The axis the group should align with. |
| `selectedKeys` | `Iterable<Key> | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `"single" | "multiple" | undefined` | 'single' | Whether single or multiple selection is enabled. |
| `size` | `"S" | "M" | "L" | "XL" | "XS" | undefined` | "M" | Size of the buttons. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `staticColor` | `"black" | "white" | "auto" | undefined` | — | The static color style to apply. Useful when the ActionButtonGroup appears over a color background. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/Tooltip.md

# Tooltip

Display container for Tooltip content. Has a directional arrow dependent on its placement.

```tsx
import {Tooltip, TooltipTrigger, ActionButton} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';

<TooltipTrigger>
  <ActionButton aria-label="Edit name"><Edit /></ActionButton>
  <Tooltip>Edit name</Tooltip>
</TooltipTrigger>
```

## Interactions

Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Once a tooltip is displayed, other tooltips display immediately. If the user waits for the "cooldown period" before hovering another element, the warmup timer restarts.

```tsx
import {TooltipTrigger, Tooltip, ActionButton} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Edit from '@react-spectrum/s2/icons/Edit';
import Save from '@react-spectrum/s2/icons/SaveFloppy';

function Example(props) {
  return (
    <div className={style({display: 'flex', gap: 8})}>
      {/*- begin highlight -*/}
      <TooltipTrigger {...props}>
      {/*- end highlight -*/}
        <ActionButton aria-label="Edit">
          <Edit />
        </ActionButton>
        <Tooltip>
          Edit
        </Tooltip>
      </TooltipTrigger>
      <TooltipTrigger {...props}>
        <ActionButton aria-label="Save">
          <Save />
        </ActionButton>
        <Tooltip>
          Save
        </Tooltip>
      </TooltipTrigger>
    </div>
  );
}
```

<InlineAlert
  variant="notice"
  UNSAFE_style={{marginTop: '2rem'}}
>
  <Heading>Accessibility</Heading>
  <Content>Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a [Popover](Popover.md) to show information in an adjacent element.</Content>
</InlineAlert>

## Non-interactive elements

Tooltips must be placed on focusable elements so they are accessible to keyboard and screen reader users. Use [ContextualHelp](ContextualHelp.md) to provide context for non-interactive elements such as plain text or disabled buttons.

```tsx
import {Button, ContextualHelp, Heading, Content} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({display: 'flex', gap: 8, alignItems: 'center'})}>
  <Button isDisabled>Delete resource</Button>
  {/*- begin highlight -*/}
  <ContextualHelp variant="info">
    <Heading>Permission required</Heading>
    <Content>
      Your admin must grant you permission before you can delete resources.
    </Content>
  </ContextualHelp>
  {/*- end highlight -*/}
</div>
```

## API

```tsx
<TooltipTrigger>
  <Button />
  <Tooltip />
</TooltipTrigger>
```

### TooltipTrigger

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | The content of the tooltip. |
| `containerPadding` | `number | undefined` | 12 | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number | undefined` | 0 | The additional offset applied along the cross axis between the element and its anchor element. |
| `defaultOpen` | `boolean | undefined` | — | Whether the overlay is open by default (uncontrolled). |
| `delay` | `number | undefined` | 1500 | The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). |
| `isDisabled` | `boolean | undefined` | — | Whether the tooltip should be disabled, independent from the trigger. |
| `isOpen` | `boolean | undefined` | — | Whether the overlay is open by default (controlled). |
| `onOpenChange` | `((isOpen: boolean) => void) | undefined` | — | Handler that is called when the overlay's open state changes. |
| `placement` | `"top" | "bottom" | "start" | "end" | "left" | "right" | undefined` | 'top' | The placement of the element with respect to its anchor element. |
| `shouldCloseOnPress` | `boolean | undefined` | true | Whether the tooltip should close when the trigger is pressed. |
| `shouldFlip` | `boolean | undefined` | true | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `trigger` | `"focus" | "hover" | undefined` | 'hover' | By default, opens for both focus and hover. Can be made to open only for focus. |

### Tooltip

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ReactNode` | — | The content of the tooltip. |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

---

# Source: https://react-spectrum.adobe.com/TreeView.md

# TreeView

A tree view provides users with a way to navigate nested hierarchical information.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';

<TreeView
  aria-label="Files"
  
  defaultExpandedKeys={['documents']}>
  <TreeViewItem id="documents" textValue="Documents">
    <TreeViewItemContent>Documents</TreeViewItemContent>
    <TreeViewItem id="project-a" textValue="Project A">
      <TreeViewItemContent>Project A</TreeViewItemContent>
      <TreeViewItem id="report" textValue="Weekly Report">
        <TreeViewItemContent>Weekly Report</TreeViewItemContent>
      </TreeViewItem>
    </TreeViewItem>
    <TreeViewItem id="readme" textValue="README">
      <TreeViewItemContent>README</TreeViewItemContent>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>
```

## Content

`TreeView` follows the [Collection Components API](collections.md?component=TreeView), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a recursive function to render the children.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection} from '@react-spectrum/s2';

let items = [
  {id: 1, title: 'Documents', type: 'directory', children: [
    {id: 2, title: 'Project', type: 'directory', children: [
      {id: 3, title: 'Weekly Report', type: 'file', children: []},
      {id: 4, title: 'Budget', type: 'file', children: []}
    ]}
  ]},
  {id: 5, title: 'Photos', type: 'directory', children: [
    {id: 6, title: 'Image 1', type: 'file', children: []},
    {id: 7, title: 'Image 2', type: 'file', children: []}
  ]}
];

<TreeView
  aria-label="Files"
  defaultExpandedKeys={[1, 4]}
  items={items}
  selectionMode="multiple">
  {function renderItem(item) {
    return (
      <TreeViewItem textValue={item.title}>
        <TreeViewItemContent>{item.title}</TreeViewItemContent>
        {/*- begin highlight -*/}
        {/* recursively render children */}
        <Collection items={item.children}>
          {renderItem}
        </Collection>
        {/*- end highlight -*/}
      </TreeViewItem>
    );
  }}
</TreeView>
```

### Slots

`TreeViewItemContent` supports icons, `Text`, [ActionMenu](ActionMenu.md), and [ActionButtonGroup](ActionButtonGroup.md) as children.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection, ActionMenu, MenuItem, Text} from '@react-spectrum/s2';
import Folder from '@react-spectrum/s2/icons/Folder';
import File from '@react-spectrum/s2/icons/File';
import Edit from '@react-spectrum/s2/icons/Edit';
import Delete from '@react-spectrum/s2/icons/Delete';

let items = [
  {id: 1, title: 'Documents', type: 'directory', children: [
    {id: 2, title: 'Project', type: 'directory', children: [
      {id: 3, title: 'Weekly Report', type: 'file', children: []},
      {id: 4, title: 'Budget', type: 'file', children: []}
    ]}
  ]},
  {id: 5, title: 'Photos', type: 'directory', children: [
    {id: 6, title: 'Image 1', type: 'file', children: []},
    {id: 7, title: 'Image 2', type: 'file', children: []}
  ]}
];

<TreeView
  aria-label="Files"
  defaultExpandedKeys={[1, 4]}
  items={items}
  selectionMode="multiple">
  {function renderItem(item) {
    return (
      <TreeViewItem textValue={item.title}>
        <TreeViewItemContent>
          {/*- begin highlight -*/}
          {item.type === 'directory' ? <Folder /> : <File />}
          <Text>{item.title}</Text>
          <ActionMenu>
          {/*- end highlight -*/}
            <MenuItem>
              <Edit />
              <Text>Edit</Text>
            </MenuItem>
            <MenuItem>
              <Delete />
              <Text>Delete</Text>
            </MenuItem>
          </ActionMenu>
        </TreeViewItemContent>
        <Collection items={item.children}>
          {renderItem}
        </Collection>
      </TreeViewItem>
    );
  }}
</TreeView>
```

### Asynchronous loading

Use [renderEmptyState](#empty-state) to display a spinner during initial load. To enable infinite scrolling, render a `<TreeViewLoadMoreItem>` at the end of each `<TreeViewItem>`.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem, Collection, useAsyncList} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

interface Character {
  name: string
}

function AsyncLoadingExample() {
  let starWarsList = useAsyncList<Character>({
    async load({signal, cursor}) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  let pokemonList = useAsyncList<Character>({
    async load({signal, cursor, filterText}) {
      let res = await fetch(
        cursor || `https://pokeapi.co/api/v2/pokemon`,
        {signal}
      );
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <TreeView
      aria-label="Async loading tree"
      styles={style({height: 300})}>
      <TreeViewItem textValue="Pokemon">
        <TreeViewItemContent>Pokemon</TreeViewItemContent>
        <Collection items={pokemonList.items}>
          {(item) => (
            <TreeViewItem id={item.name} textValue={item.name}>
              <TreeViewItemContent>{item.name}</TreeViewItemContent>
            </TreeViewItem>
          )}
        </Collection>
        {/*- begin highlight -*/}
        <TreeViewLoadMoreItem
          onLoadMore={pokemonList.loadMore}
          loadingState={pokemonList.loadingState} />
        {/*- end highlight -*/}
      </TreeViewItem>
      <TreeViewItem textValue="Star Wars">
        <TreeViewItemContent>Star Wars</TreeViewItemContent>
        <Collection items={starWarsList.items}>
          {(item) => (
            <TreeViewItem id={item.name} textValue={item.name}>
              <TreeViewItemContent>{item.name}</TreeViewItemContent>
            </TreeViewItem>
          )}
        </Collection>
        {/*- begin highlight -*/}
        <TreeViewLoadMoreItem
          onLoadMore={starWarsList.loadMore}
          loadingState={starWarsList.loadingState} />
        {/*- end highlight -*/}
      </TreeViewItem>
    </TreeView>
  );
}
```

### Links

Use the `href` prop on a `<TreeItem>` to create a link. See the [getting started guide](getting-started.md) to learn how to integrate with your framework.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';

<TreeView
  aria-label="TreeView with links"
  selectionMode="multiple"
  defaultExpandedKeys={['bulbasaur', 'ivysaur']}>
  <TreeViewItem
    /*- begin highlight -*/
    href="https://pokemondb.net/pokedex/bulbasaur"
    target="_blank"
    /*- end highlight -*/
    id="bulbasaur"
    textValue="Bulbasaur">
    <TreeViewItemContent>Bulbasaur</TreeViewItemContent>
    <TreeViewItem
      id="ivysaur"
      href="https://pokemondb.net/pokedex/ivysaur"
      target="_blank"
      textValue="Ivysaur">
      <TreeViewItemContent>Ivysaur</TreeViewItemContent>
      <TreeViewItem
        id="venusaur"
        textValue="Venusaur"
        href="https://pokemondb.net/pokedex/venusaur"
        target="_blank">
        <TreeViewItemContent>Venusaur</TreeViewItemContent>
      </TreeViewItem>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>
```

### Empty state

Use `renderEmptyState` to render placeholder content when the tree is empty.

```tsx
import {TreeView, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';

<TreeView
  aria-label="Search results"
  /*- begin highlight -*/
  renderEmptyState={() => (
    <IllustratedMessage>
      <FolderOpen />
      <Heading>No results</Heading>
      <Content>Press <Link href="https://adobe.com">here</Link> for more info.</Content>
    </IllustratedMessage>
  )}>
  {/*- end highlight -*/}
  {[]}
</TreeView>
```

## Selection and actions

Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.md?component=Tree) for more details.

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <div className={style({width: 'full'})}>
      <TreeView
        {...props}
        aria-label="Pokemon evolution"
        styles={style({height: 250, width: 'full', maxWidth: 300})}
        
        selectedKeys={selected}
        onSelectionChange={setSelected}
        onAction={key => alert(`Clicked ${key}`)}
      >
        <TreeViewItem id="bulbasaur" textValue="Bulbasaur">
          <TreeViewItemContent>Bulbasaur</TreeViewItemContent>
          <TreeViewItem id="ivysaur" textValue="Ivysaur">
            <TreeViewItemContent>Ivysaur</TreeViewItemContent>
            <TreeViewItem id="venusaur" isDisabled textValue="Venusaur">
              <TreeViewItemContent>Venusaur</TreeViewItemContent>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem id="charmander" textValue="Charmander">
          <TreeViewItemContent>Charmander</TreeViewItemContent>
          <TreeViewItem id="charmeleon" textValue="Charmeleon">
            <TreeViewItemContent>Charmeleon</TreeViewItemContent>
            <TreeViewItem id="charizard" textValue="Charizard">
              <TreeViewItemContent>Charizard</TreeViewItemContent>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem id="squirtle" textValue="Squirtle">
          <TreeViewItemContent>Squirtle</TreeViewItemContent>
          <TreeViewItem id="wartortle" textValue="Wartortle">
            <TreeViewItemContent>Wartortle</TreeViewItemContent>
            <TreeViewItem id="blastoise" textValue="Blastoise">
              <TreeViewItemContent>Blastoise</TreeViewItemContent>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
      </TreeView>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </div>
  );
}
```

## API

```tsx
<TreeView>
  <TreeViewItem>
    <TreeViewItemContent>
      <Icon />
      <Text />
      <ActionMenu /> or <ActionButtonGroup />
    </TreeViewItemContent>
    <TreeViewItem>
      {/* ... */}
    </TreeViewItem>
    <TreeViewLoadMoreItem />
  </TreeViewItem>
</TreeView>
```

### TreeView

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoFocus` | `boolean | FocusStrategy | undefined` | — | Whether to auto focus the gridlist or an option. |
| `children` | `React.ReactNode | ((item: T) => ReactNode)` | — | The contents of the collection. |
| `defaultExpandedKeys` | `Iterable<Key> | undefined` | — | The initial expanded keys in the collection (uncontrolled). |
| `defaultSelectedKeys` | `Iterable<Key> | "all" | undefined` | — | The initial selected keys in the collection (uncontrolled). |
| `dependencies` | `readonly any[] | undefined` | — | Values that should invalidate the item cache when using dynamic collections. |
| `disabledBehavior` | `DisabledBehavior | undefined` | 'all' | Whether `disabledKeys` applies to all interactions, or only selection. |
| `disabledKeys` | `Iterable<Key> | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `disallowEmptySelection` | `boolean | undefined` | — | Whether the collection allows empty selection. |
| `escapeKeyBehavior` | `"clearSelection" | "none" | undefined` | 'clearSelection' | Whether pressing the escape key should clear selection in the grid list or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `expandedKeys` | `Iterable<Key> | undefined` | — | The currently expanded keys in the collection (controlled). |
| `id` | `string | undefined` | — | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `items` | `Iterable<T> | undefined` | — | Item objects in the collection. |
| `onAction` | `((key: Key) => void) | undefined` | — | Handler that is called when a user performs an action on an item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onExpandedChange` | `((keys: Set<Key>) => any) | undefined` | — | Handler that is called when items are expanded or collapsed. |
| `onSelectionChange` | `((keys: Selection) => void) | undefined` | — | Handler that is called when the selection changes. |
| `renderEmptyState` | `((props: TreeEmptyStateRenderProps) => ReactNode) | undefined` | — | Provides content to display when there are no items in the list. |
| `selectedKeys` | `Iterable<Key> | "all" | undefined` | — | The currently selected keys in the collection (controlled). |
| `selectionMode` | `SelectionMode | undefined` | — | The type of selection that is allowed in the collection. |
| `shouldSelectOnPressUp` | `boolean | undefined` | — | Whether selection should occur on press up instead of press down. |
| `slot` | `string | null | undefined` | — | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `styles` | `StylesPropWithHeight | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. |
| `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |
| `UNSAFE_style` | `React.CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |

### TreeViewItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-label` | `string | undefined` | — | An accessibility label for this tree item. |
| `children` | `React.ReactNode` | — | The content of the tree item along with any nested children. Supports static nested tree items or use of a Collection to dynamically render nested tree items. |
| `download` | `string | boolean | undefined` | — | 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). |
| `hasChildItems` | `boolean | undefined` | — | Whether this item has children, even if not loaded yet. |
| `href` | `string | undefined` | — | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `hrefLang` | `string | undefined` | — | 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 | undefined` | — | The unique id of the tree row. |
| `isDisabled` | `boolean | undefined` | — | Whether the item is disabled. |
| `onAction` | `(() => void) | undefined` | — | Handler that is called when a user performs an action on this tree item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| `onHoverChange` | `((isHovering: boolean) => void) | undefined` | — | Handler that is called when the hover state changes. |
| `onHoverEnd` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction ends. |
| `onHoverStart` | `((e: HoverEvent) => void) | undefined` | — | Handler that is called when a hover interaction starts. |
| `onPress` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when the press is released over the target. |
| `onPressChange` | `((isPressed: boolean) => void) | undefined` | — | Handler that is called when the press state changes. |
| `onPressEnd` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| `onPressStart` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press interaction starts. |
| `onPressUp` | `((e: PressEvent) => void) | undefined` | — | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `ping` | `string | undefined` | — | 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` | `React.HTMLAttributeReferrerPolicy | undefined` | — | 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 | undefined` | — | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| `routerOptions` | `undefined` | — | Options for the configured client side router. |
| `target` | `React.HTMLAttributeAnchorTarget | undefined` | — | 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 tree item's contents, used for features like typeahead. |
| `value` | `object | undefined` | — | The object value that this tree item represents. When using dynamic collections, this is set automatically. |

### TreeViewItemContent

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | — | Rendered contents of the tree item or child items. |

### TreeViewLoadMoreItem

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `loadingState` | `LoadingState | undefined` | — | The current loading state of the TreeView or TreeView row. |
| `onLoadMore` | `(() => any) | undefined` | — | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. |

---

# Source: https://react-spectrum.adobe.com/collections.md

# Collections

Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. Learn how to load and render collections using React Spectrum's compositional API.

## Static collections

A **static collection** is a collection that does not change over time (e.g. hard coded). This is common for components like menus where the items are built into the application rather than user data.

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Menu</ActionButton>
  <Menu>
    <MenuItem>Open</MenuItem>
    <MenuItem>Edit</MenuItem>
    <MenuItem>Delete</MenuItem>
  </Menu>
</MenuTrigger>
```

### Sections

Sections or groups of items can be constructed by wrapping the items in a section element. A `<Header>` can also be rendered within a section to provide a section title.

## Menu example

```tsx
import {Menu, MenuTrigger, MenuItem, MenuSection, ActionButton, Header, Heading} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Menu</ActionButton>
  <Menu>
    {/*- begin highlight -*/}
    <MenuSection>
      <Header>
        <Heading>Styles</Heading>
      </Header>
      {/*- end highlight -*/}
      <MenuItem>Bold</MenuItem>
      <MenuItem>Underline</MenuItem>
    </MenuSection>
    <MenuSection>
      <Header>
        <Heading>Align</Heading>
      </Header>
      <MenuItem>Left</MenuItem>
      <MenuItem>Middle</MenuItem>
      <MenuItem>Right</MenuItem>
    </MenuSection>
  </Menu>
</MenuTrigger>
```

## Picker example

```tsx
import {Picker, PickerSection, PickerItem, Header, Heading} from '@react-spectrum/s2';

<Picker label="Text style">
  {/*- begin highlight -*/}
  <PickerSection>
    <Header>
      <Heading>Styles</Heading>
    </Header>
    {/*- end highlight -*/}
    <PickerItem id="bold">Bold</PickerItem>
    <PickerItem id="underline">Underline</PickerItem>
  </PickerSection>
  <PickerSection>
    <Header>
      <Heading>Align</Heading>
    </Header>
    <PickerItem id="left">Left</PickerItem>
    <PickerItem id="middle">Middle</PickerItem>
    <PickerItem id="right">Right</PickerItem>
  </PickerSection>
</Picker>
```

## Dynamic collections

A **dynamic collection** is a collection that is based on external data, for example from an API. In addition, it may change over time as items are added, updated, or removed from the collection by a user.

Use the `items` prop to provide an array of objects, and a function to render each item as the `children`. This is similar to using `array.map` to render the children, but automatically memoizes the rendering of each item to improve performance.

```tsx
import {TagGroup, Tag, ActionButton, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import AddIcon from '@react-spectrum/s2/icons/Add';
import {useState} from 'react';

function Example() {
  let [animals, setAnimals] = useState([
    {id: 1, name: 'Aardvark'},
    {id: 2, name: 'Kangaroo'},
    {id: 3, name: 'Snake'}
  ]);

  let addItem = () => {
    setAnimals([
      ...animals,
      {id: animals.length + 1, name: 'Lion'}
    ]);
  };

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 32, width: 320, maxWidth: 'full'})}>
      {/*- begin highlight -*/}
      <TagGroup label="Animals" items={animals}>
        {item => <Tag>{item.name}</Tag>}
      </TagGroup>
      {/*- end highlight -*/}
      <ActionButton onPress={addItem} styles={style({alignSelf: 'start'})}>
        <AddIcon />
        <Text>Add item</Text>
      </ActionButton>
    </div>
  );
}
```

<InlineAlert variant="informative">
  <Heading>useListData</Heading>
  <Content>For convenience, React Spectrum provides a built-in [useListData](react-aria:useListData.md) hook to manage state for an immutable list of items. It includes methods to add, remove, update, and re-order items, and manage corresponding selection state. See the docs for more details.</Content>
</InlineAlert>

### Unique ids

All items in a collection must have a unique id, which is used for [selection](selection.md) and to track item updates. By default, React Spectrum looks for an `id` property on each object in the `items` array. You can also specify an `id` prop when rendering each item. This example uses `item.name` as the `id`.

```tsx
let animals = [
  {name: 'Aardvark'},
  {name: 'Kangaroo'},
  {name: 'Snake'}
];

<Picker label="Animals" items={animals}>
  {item => (
    /*- begin highlight -*/
    <PickerItem id={item.name}>
    {/*- end highlight -*/}
      {item.name}
    </PickerItem>
  )}
</Picker>
```

<InlineAlert variant="notice">
  <Heading>React keys</Heading>
  <Content>React Spectrum automatically sets the React `key` using `id`. If using `array.map`, you'll need to set both `key` and `id`.</Content>
</InlineAlert>

### Dependencies

Dynamic collections are automatically memoized to improve performance. Rendered item elements are cached based on the object identity of the list item. If rendering an item depends on additional external state, the `dependencies` prop must be provided. This invalidates rendered elements similar to dependencies in React's `useMemo` hook.

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {ToggleButtonGroup, ToggleButton} from '@react-spectrum/s2';
import {useState} from 'react';

const items = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', image: 'https://img.pokemondb.net/sprites/home/normal/2x/avif/charizard.avif'},
  {id: 2, name: 'Blastoise', type: 'Water', image: 'https://img.pokemondb.net/sprites/home/normal/2x/avif/blastoise.avif'},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', image: 'https://img.pokemondb.net/sprites/home/normal/2x/avif/venusaur.avif'},
  {id: 4, name: 'Pikachu', type: 'Electric', image: 'https://img.pokemondb.net/sprites/home/normal/2x/avif/pikachu.avif'}
];

export default function Example() {
  let [showType, setShowType] = useState(false);

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 16, width: 320, maxWidth: 'full', alignItems: 'center'})}>
      <ToggleButtonGroup
        aria-label="Display options"
        selectionMode="multiple"
        selectedKeys={showType ? ['type'] : []}
        onSelectionChange={keys => setShowType(keys.has('type'))}
      >
        <ToggleButton id="type">Show type</ToggleButton>
      </ToggleButtonGroup>
      <CardView
        aria-label="Pokemon"
        items={items}
        selectionMode="multiple"
        /*- begin highlight -*/
        dependencies={[showType]}
        /*- end highlight -*/
        styles={style({width: 'full', height: 420})}
      >
        {item => (
          <AssetCard textValue={item.name}>
            <CardPreview>
              <Image src={item.image} />
            </CardPreview>
            <Content>
              <Text slot="title">{item.name}</Text>
              {/*- begin highlight -*/}
              {showType && <Text slot="description">{item.type}</Text>}
              {/*- end highlight -*/}
            </Content>
          </AssetCard>
        )}
      </CardView>
    </div>
  );
}
```

Note that adding dependencies will result in the *entire* list being invalidated when a dependency changes. To avoid this and invalidate only an individual item, update the item object itself rather than accessing external state.

### Combining collections

To combine multiple sources of data, or mix static and dynamic items, use the `<Collection>` component.

```tsx
import {Picker, PickerSection, PickerItem, Header, Heading, Collection} from '@react-spectrum/s2';

let animals = [
  {id: 1, species: 'Aardvark'},
  {id: 2, species: 'Kangaroo'},
  {id: 3, species: 'Snake'}
];

let people = [
  {id: 4, name: 'David'},
  {id: 5, name: 'Mike'},
  {id: 6, name: 'Jane'}
];

<Picker label="Select an item">
  <PickerSection>
    <Header>
      <Heading>Animals</Heading>
    </Header>
    {/*- begin highlight -*/}
    <Collection items={animals}>
      {item => <PickerItem id={item.species}>{item.species}</PickerItem>}
    </Collection>
    {/*- end highlight -*/}
  </PickerSection>
  <PickerSection>
    <Header>
      <Heading>People</Heading>
    </Header>
    <Collection items={people}>
      {item => <PickerItem id={item.name}>{item.name}</PickerItem>}
    </Collection>
  </PickerSection>
</Picker>
```

<InlineAlert variant="notice">
  <Heading>Globally unique ids</Heading>
  <Content>Unlike React keys which must only be unique within each element, the `id` prop must be globally unique across all sections. In the above example, the ids of `animals` and `people` do not conflict.</Content>
</InlineAlert>

## Asynchronous loading

Data can be loaded asynchronously using any data fetching library. [useAsyncList](react-aria:useAsyncList.md) is a built-in option.

Many components support infinite scrolling via the `loadingState` and `onLoadMore` props. These trigger loading of additional pages of items automatically as the user scrolls.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, useAsyncList} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

interface Character {
  name: string
}

function AsyncLoadingExample() {
  /*- begin focus -*/
  let list = useAsyncList<Character>({
    async load({signal, cursor}) {
      let res = await fetch(
        cursor || `https://pokeapi.co/api/v2/pokemon`,
        {signal}
      );
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });
  /*- end focus -*/

  return (
    <TableView
      aria-label="Pokemon"
      selectionMode="single"
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}
      styles={style({width: 'full', height: 320})}
    >
      <TableHeader>
        <Column isRowHeader>Name</Column>
      </TableHeader>
      <TableBody items={list.items}>
        {(item) => (
          <Row id={item.name}>
            <Cell>{item.name}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}
```

---

# Source: https://react-spectrum.adobe.com/error.md

<Error/>

---

# Source: https://react-spectrum.adobe.com/forms.md

# Forms

Learn how to integrate with HTML forms, validate and submit data, and use React Spectrum with form libraries.

## Labels and help text

Accessible forms start with clear, descriptive labels for each field. Use the `label` prop to add a visible label to any field. Additional help text can also be added via the `description` prop. The label and help text are announced by screen readers when the field is focused.

```tsx
import {TextField} from '@react-spectrum/s2';

<TextField
  type="password"
  label="Password"
  placeholder="Choose a password"
  description="Password must be at least 8 characters." />
```

Most fields should have a visible label. In rare exceptions, the `aria-label` or `aria-labelledby` attribute must be provided for assistive technologies.

## Submitting data

How you submit form data depends on your framework, application, and server. By default, HTML forms are submitted by the browser using a full page refresh. You can take control of form submission using the `action` prop or `onSubmit` event.

### Uncontrolled forms

When using React 19, use the `action` prop to handle form submission. This receives a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values for each form field. In React 18 or earlier, use the `onSubmit` event instead.

## Vanilla CSS example

```tsx
import {Form, TextField, Button} from '@react-spectrum/s2';

<Form
  /*- begin highlight -*/
  action={formData => {
    let name = formData.get('name');
    alert(`Hello, ${name}!`);
  }}>
  {/*- end highlight -*/}
  <TextField name="name" label="Name" placeholder="Enter your full name" />
  <Button type="submit">Submit</Button>
</Form>
```

```tsx
import {Form, TextField, Button} from '@react-spectrum/s2';

<Form
  /*- begin highlight -*/
  onSubmit={event => {
    // Prevent default browser page refresh.
    event.preventDefault();

    // Get data from form.
    let target = event.target as HTMLFormElement;
    let formData = new FormData(target);
    let name = formData.get('name');
    alert(`Hello, ${name}!`);

    // Reset form after submission.
    target.reset();
  }}>
  {/*- end highlight -*/}
  <TextField name="name" label="Name" placeholder="Enter your full name" />
  <Button type="submit">Submit</Button>
</Form>
```

### Controlled forms

By default, all React Spectrum components are uncontrolled, which means that the state is stored internally on your behalf. To synchronize the value with another part of the UI as the user edits, use the `value` and `onChange` props with the [useState](https://react.dev/reference/react/useState) hook.

```tsx
'use client';
import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2';
import {useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  /*- begin highlight -*/
  let [name, setName] = useState('');
  /*- end highlight -*/

  let onSubmit = (e) => {
    e.preventDefault();

    // Submit data to your backend API...
    alert(name);
  };

  return (
    <Form onSubmit={onSubmit} styles={style({maxWidth: 320})}>
      <TextField
        label="Name"
        placeholder="Enter your name"
        /*- begin highlight -*/
        value={name}
        onChange={setName} />
      {/*- end highlight -*/}
      <div>You entered: {name}</div>
      <ButtonGroup>
        <Button type="submit" variant="primary">Submit</Button>
        <Button type="reset" variant="secondary">Reset</Button>
      </ButtonGroup>
    </Form>
  );
}
```

## Validation

Well-designed form validation assists the user with specific, helpful error messages without confusing them with unnecessary errors for partial input. React Spectrum supports native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and integration with server-side validation errors.

### Constraint validation

All React Spectrum form components integrate with native HTML [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation). This allows you to define constraints on each field such as required, minimum and maximum values, text formats such as email addresses, and even custom regular expression patterns. These constraints are checked by the browser when the user commits changes to the value (e.g. on blur) or submits the form.

```tsx
import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Form styles={style({maxWidth: 320})}>
  <TextField
    label="Email"
    name="email"
    placeholder="Enter your email"
    /*- begin highlight -*/
    type="email"
    isRequired />
  {/*- end highlight -*/}
  <ButtonGroup>
    <Button type="submit" variant="primary">Submit</Button>
    <Button type="reset" variant="secondary">Reset</Button>
  </ButtonGroup>
</Form>
```

Supported constraints include:

* `isRequired` indicates that a field must have a value before the form can be submitted.
* `minValue` and `maxValue` specify the minimum and maximum value in a date picker or number field.
* `minLength` and `maxLength` specify the minimum and maximum length of text input.
* `pattern` provides a custom [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that a text input must conform to.
* `type="email"` and `type="url"` provide builtin validation for email addresses and URLs.

See each component's documentation for more details on the supported validation props.

### Customizing error messages

By default, React Spectrum displays the error message provided by the browser, which is localized in the user's preferred language. You can customize these messages by providing a function to the `errorMessage` prop. This receives a list of error strings along with a [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object describing why the field is invalid.

```tsx
import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Form styles={style({maxWidth: 320})}>
  <TextField
    label="Name"
    name="name"
    placeholder="Enter your name"
    isRequired
    /*- begin highlight -*/
    errorMessage={({validationDetails}) => (
      validationDetails.valueMissing ? 'Please enter a name.' : ''
    )}
    /*- end highlight -*/
  />
  <ButtonGroup>
    <Button type="submit" variant="primary">Submit</Button>
    <Button type="reset" variant="secondary">Reset</Button>
  </ButtonGroup>
</Form>
```

<InlineAlert variant="informative">
  <Heading>Localization</Heading>
  <Content>The default error messages are localized by the browser using the browser/operating system language setting. React Spectrum's [Provider](Provider.md) has no effect on validation errors.</Content>
</InlineAlert>

### Custom validation

To implement custom validation rules, pass a function to the `validate` prop. This receives the current field value, and can return one or more error messages. These are displayed to the user after the value is committed (e.g. on blur) to avoid distracting them on each keystroke.

```tsx
import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Form styles={style({maxWidth: 320})}>
  <TextField
    label="Username"
    placeholder="Choose a username"
    /*- begin highlight -*/
    validate={value => value === 'admin' ? 'Nice try!' : null}
    /*- end highlight -*/
  />
  <ButtonGroup>
    <Button type="submit" variant="primary">Submit</Button>
    <Button type="reset" variant="secondary">Reset</Button>
  </ButtonGroup>
</Form>
```

### Realtime validation

By default, validation errors are displayed after the value is committed (e.g. on blur), or when the form is submitted. This avoids confusing the user with irrelevant errors while they are still entering a value.

In some cases, validating in realtime can be desirable, such as when meeting password requirements. This can be accomplished by making the field value [controlled](#controlled-forms), and setting the `isInvalid` and `errorMessage` props accordingly.

```tsx
'use client';
import {TextField} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [password, setPassword] = useState('');
  let error;
  if (password.length < 8) {
    error = 'Password must be 8 characters or more.';
  } else if ((password.match(/[A-Z]/g) ?? []).length < 2) {
    error = 'Password must include at least 2 upper case letters';
  } else if ((password.match(/[^a-z]/ig) ?? []).length < 2) {
    error = 'Password must include at least 2 symbols.';
  }

  return (
    <TextField
      type="password"
      label="Password"
      placeholder="Choose a password"
      /*- begin highlight -*/
      isInvalid={!!error}
      errorMessage={error}
      /*- end highlight -*/
      value={password}
      onChange={setPassword} />
  );
}
```

By default, invalid fields block forms from being submitted. To avoid this, use `validationBehavior="aria"`, which will only mark the field as required and invalid for assistive technologies, and will not prevent form submission.

### Server validation

Client side validation is useful to give the user immediate feedback, but data should always be validated on the backend for security and reliability. Your business logic may also include rules which cannot be validated on the frontend.

To display server validation errors, set the `validationErrors` prop on the [Form](Form.md) component. This accepts an object that maps each field's `name` prop to one or more error messages. These are displayed as soon as the `validationErrors` prop is set, and cleared after the user modifies each field's value.

```tsx
'use client';
import {Form, TextField, ButtonGroup, Button} from '@react-spectrum/s2';
import {useActionState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function action(prevState, formData: FormData) {
  return {
    values: Object.fromEntries(formData) as Record<string, string>,
    errors: {
      username: 'Sorry, this username is taken.'
    }
  };
}

function Example() {
  let [{values, errors}, formAction] = useActionState<{values?: Record<string, string>, errors?: Record<string, string>}, FormData>(action, {});

  return (
    <Form
      styles={style({maxWidth: 320})}
      action={formAction}
      /*- begin highlight -*/
      validationErrors={errors}>
      {/*- end highlight -*/}
      <TextField
        label="Username"
        name="username"
        placeholder="Enter your username"
        defaultValue={values?.username}
        isRequired />
      <TextField
        label="Password"
        name="password"
        placeholder="Enter your password"
        defaultValue={values?.password}
        type="password"
        isRequired />
      <ButtonGroup>
        <Button type="submit" variant="primary">Submit</Button>
        <Button type="reset" variant="secondary">Reset</Button>
      </ButtonGroup>
    </Form>
  );
}
```

#### Schema validation

React Spectrum is compatible with errors returned from schema validation libraries like [Zod](https://zod.dev/), which are often used for server-side form validation. Use the [flatten](https://zod.dev/ERROR_HANDLING?id=flattening-errors) method to get a list of errors for each field and return this as part of your HTTP response.

```tsx
// In your server...
import {z} from 'zod';

const schema = z.object({
  name: z.string().min(1),
  age: z.coerce.number().positive()
});

function handleRequest(formData: FormData) {
  let result = schema.safeParse(Object.fromEntries(formData));
  if (!result.success) {
    return {
      /*- begin highlight -*/
      errors: result.error.flatten().fieldErrors
      /*- end highlight -*/
    };
  }

  // Do stuff...

  return {
    errors: {}
  };
}
```

<InlineAlert variant="informative">
  <Heading>Localization</Heading>
  <Content>Error message localization is best done on the server rather than on the client to avoid large bundles. You can submit the user's locale as part of the form data if needed, and use a library like [zod-i18n](https://github.com/aiji42/zod-i18n) to translate the errors.</Content>
</InlineAlert>

#### React Server Actions

[Server Functions](https://react.dev/reference/rsc/server-functions), marked with the `"use server"` directive, allow client components to call async functions executed on the server in supported frameworks (e.g. Next.js).

```tsx
// app/actions.ts
/*- begin highlight -*/
'use server';
/*- end highlight -*/

export async function createTodo(prevState: any, formData: FormData) {
  try {
    // Create the todo...
  } catch (err) {
    return {
      errors: {
        todo: 'Invalid todo.'
      }
    };
  }
}
```

```tsx
// app/add-form.tsx
'use client';

import {useActionState} from 'react';
import {Form, TextField, ActionButton} from '@react-spectrum/s2';
import {createTodo} from '@/app/actions';

export function AddForm() {
  /*- begin highlight -*/
  let [{errors}, formAction] = useActionState(createTodo, {errors: {}});
  /*- end highlight -*/

  return (
    /*- begin highlight -*/
    <Form action={formAction} validationErrors={errors}>
    {/*- end highlight -*/}
      <TextField label="Task" name="todo" />
      <ActionButton type="submit">Add</ActionButton>
    </Form>
  );
}
```

#### React Router actions

[React Router actions](https://reactrouter.com/start/framework/actions) handle form submissions. Use the [useSubmit](https://remix.run/docs/en/main/hooks/use-submit) hook to submit data to the server. An action may return data such as validation errors via the `actionData` route component prop.

```tsx
// app/routes/signup.tsx
import {useSubmit} from 'react-router';
import {Form, TextField, Button} from '@react-spectrum/s2';

export default function SignupForm({actionData}: Route.ComponentProps) {
  let submit = useSubmit();

  return (
    <Form
      /*- begin highlight -*/
      method="post"
      onSubmit={e => {
        e.preventDefault();
        submit(e.currentTarget);
      }}
      validationErrors={actionData?.errors}>
      {/*- end highlight -*/}
      <TextField label="Username" name="username" isRequired />
      <TextField label="Password" name="password" type="password" isRequired />
      <Button type="submit" variant="accent">Submit</Button>
    </Form>
  );
}

export async function action({request}: Route.ActionArgs) {
  try {
    // Validate data and perform action...
  } catch (err) {
    return {
      errors: {
        /*- begin highlight -*/
        username: 'Sorry, this username is taken.'
        /*- end highlight -*/
      }
    };
  }
}
```

## Form libraries

In most cases, uncontrolled forms with the builtin validation features are sufficient. However, if you are building a truly complex form, or integrating React Spectrum components into an existing form, a separate form library such as [React Hook Form](https://react-hook-form.com/) or [Formik](https://formik.org/) may be helpful.

### React Hook Form

[React Hook Form](https://react-hook-form.com/) is a popular form library for React. It is primarily designed to work directly with plain HTML input elements, but supports custom form components like the ones in React Spectrum as well.

Use the [Controller](https://react-hook-form.com/docs/usecontroller/controller) component from React Hook Form to integrate React Spectrum components. Pass the props for the `field` render prop through to the React Spectrum component you're using, and use the `fieldState` to get validation errors to display.

```tsx
import {useForm, Controller} from 'react-hook-form'
import {Form, TextField, Button} from '@react-spectrum/s2';

function App() {
  let {handleSubmit, control} = useForm({
    defaultValues: {
      name: '',
    },
  });
  let onSubmit = (data) => {
    // Call your API here...
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="name"
        rules={{ required: 'Name is required.' }}
        render={({
          field: { name, value, onChange, onBlur, ref },
          fieldState: { invalid, error },
        }) => (
          <TextField
            label="Name"
            name={name}
            value={value}
            onChange={onChange}
            onBlur={onBlur}
            ref={ref}
            isRequired
            isInvalid={invalid}
            errorMessage={error?.message}
          />
        )}
      />
      <Button type="submit" variant="accent">Submit</Button>
    </Form>
  );
}
```

---

# Source: https://react-spectrum.adobe.com/getting-started.md

# Getting started

## Installation

Install React Spectrum with your preferred package manager.

```bash
npm install @react-spectrum/s2
```

## Framework setup

<Tabs
  aria-label="Frameworks"
  density="compact"
>
  <TabList><Tab id="parcel"><Parcel/><Text>Parcel</Text></Tab><Tab id="webpack"><Webpack/><Text>webpack</Text></Tab><Tab id="vite"><Vite/><Text>Vite</Text></Tab><Tab id="next"><Nextjs/><Text>Next.js</Text></Tab><Tab id="react-router"><ReactRouter/><Text>React Router</Text></Tab><Tab id="rollup"><Rollup/><Text>Rollup</Text></Tab><Tab id="esbuild"><ESBuild/><Text>ESBuild</Text></Tab></TabList>

  <TabPanel id="parcel">
    To use React Spectrum in a client-only Parcel SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To optimize CSS generated by style macros into a single [shared bundle](https://parceljs.org/features/code-splitting/#manual-shared-bundles), add the following to your project root `package.json`:

        ```json
        {
          "@parcel/bundler-default": {
            "manualSharedBundles": [
              {
                "name": "s2-styles",
                "types": ["css"],
                "assets": [
                  "**/@react-spectrum/s2/**",
                  // Update this glob as needed to match your source files.
                  "src/**/*.{js,jsx,ts,tsx}"
                ]
              }
            ]
          }
        }
        ```
      </Step>

      <Routers components={props.components}/>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/parcel-resolver-optimize-locales
        ```

        Add the following to your `.parcelrc`.

        ```json
        {
          "extends": "@parcel/config-default",
          "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "..."]
        }
        ```

        In your project root `package.json`, add a `"locales"` field containing the languages you want to support.

        ```json
        {
          "locales": ["en-US", "fr-FR"]
        }
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="webpack">
    To use React Spectrum in a client-only webpack SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the following plugins:

        ```bash
        npm install unplugin-parcel-macros mini-css-extract-plugin css-minimizer-webpack-plugin swc-minify-webpack-plugin lightningcss browserslist --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit `webpack.config.js`:

        ```ts
        // webpack.config.js
        const macros = require('unplugin-parcel-macros');
        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
        const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
        const {SwcMinifyWebpackPlugin} = require("swc-minify-webpack-plugin");
        const {browserslistToTargets} = require('lightningcss');
        const browserslist = require('browserslist');

        // Adjust this to target the browsers your product supports.
        // https://browserslist.dev/
        const BROWSERSLIST = 'last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions';

        module.exports = {
          // ...
          plugins: [
            // Enable style macros.
            macros.webpack(),
            // Extract CSS bundles.
            new MiniCssExtractPlugin({
              // Use content hash in filename for long term cacheability.
              filename: '[name].[contenthash].css',
              // Ignore warnings about CSS order. Style macros generate atomic CSS,
              // which is resilient to ordering differences.
              ignoreOrder: true
            })
          ],
          optimization: {
            // Always enable minimizer plugins (even in development), to reduce duplicate CSS rules.
            minimize: true,
            minimizer: [
              // Minify JavaScript during the production build only.
              // (Used SWC here, but you can also use Terser if you prefer.)
              argv.mode === 'production'
                ? new SwcMinifyWebpackPlugin()
                : null,
              // Use lightningcss to compile CSS. This removes duplicate rules and outputs compatible CSS for your browserslist.
              // In production it also minifies.
              new CssMinimizerPlugin({
                minify: CssMinimizerPlugin.lightningCssMinify,
                minimizerOptions: {
                  minify: argv.mode === 'production',
                  targets: browserslistToTargets(browserslist(BROWSERSLIST))
                }
              })
            ],
            splitChunks: {
              cacheGroups: {
                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
                // smaller bundles instead of producing duplication between pages.
                s2: {
                  name: 's2-styles',
                  test(module) {
                    return module.type === 'css/mini-extract' && (module.identifier().includes('@react-spectrum/s2') || /\.macro-(.*?)\.css/.test(module.identifier()));
                  },
                  chunks: 'all',
                  enforce: true
                }
              }
            }
          }
        };
        ```
      </Step>

      <Routers components={props.components}/>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/optimize-locales-plugin
        ```

        Edit `webpack.config.ts` to add the plugin, and configure the `locales` parameter.

        ```ts
        // webpack.config.js
        const optimizeLocales = require('@react-aria/optimize-locales-plugin');

        module.exports = {
          // ...
          plugins: [
            optimizeLocales.webpack({
              locales: ['en-US', 'fr-FR']
            })
          ]
        };
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="vite">
    To use React Spectrum in a client-only Vite SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:

        ```bash
        npm install unplugin-parcel-macros --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit `vite.config.ts` to add the plugin and optimize the CSS bundle:

        ```ts
        // vite.config.ts
        import {defineConfig} from 'vite';
        import react from '@vitejs/plugin-react';
        import macros from 'unplugin-parcel-macros';

        export default defineConfig({
          plugins: [
            macros.vite(), // Must be first!
            react()
          ],
          build: {
            target: ['es2022'],
            // Lightning CSS produces a much smaller CSS bundle than the default minifier.
            cssMinify: 'lightningcss',
            rollupOptions: {
              output: {
                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
                // smaller bundles instead of producing duplication between pages.
                manualChunks(id) {
                  if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
                    return 's2-styles';
                  }
                }
              }
            }
          }
        });
        ```
      </Step>

      <Routers components={props.components}/>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/optimize-locales-plugin
        ```

        Edit `vite.config.ts` to add the plugin, and configure the `locales` parameter.

        ```ts
        // vite.config.ts
        import {defineConfig} from 'vite';
        import optimizeLocales from '@react-aria/optimize-locales-plugin';

        export default defineConfig({
          plugins: [
            // ...
            {
              ...optimizeLocales.vite({
                locales: ['en-US', 'fr-FR']
              }),
              enforce: 'pre'
            }
          ],
        });
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="next">
    To use React Spectrum with Next.js (app router), setup style macros, ensure the locale on the server matches the client, and configure React Spectrum links to use the Next.js router.

    <InlineAlert variant="notice">
      <Heading>Turbopack is not supported</Heading>
      <Content>`unplugin-parcel-macros` currently only works with webpack, not Turbopack. When using Next.js 16 or later, make sure to start your app with the `--webpack` flag.</Content>
    </InlineAlert>

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:

        ```bash
        npm install unplugin-parcel-macros --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit `next.config.ts` to add the plugin and optimize the CSS:

        ```js
        // next.config.ts
        import macros from 'unplugin-parcel-macros';

        // Create a single instance of the plugin that's shared between server and client builds.
        let plugin = macros.webpack();

        export default {
          webpack(config) {
            config.plugins.push(plugin);

            // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
            // Because atomic CSS has so much overlap between components, loading all CSS up front results in
            // smaller bundles instead of producing duplication between pages.
            config.optimization.splitChunks ||= {};
            config.optimization.splitChunks.cacheGroups ||= {};
            config.optimization.splitChunks.cacheGroups.s2 = {
              name: 's2-styles',
              test(module) {
                return (module.type === 'css/mini-extract' && module.identifier().includes('@react-spectrum/s2')) || /macro-(.*?)\.css/.test(module.identifier());
              },
              chunks: 'all',
              enforce: true
            };

            return config;
          }
        };
        ```
      </Step>

      <Step>
        <Counter/>Create `app/provider.tsx`. This should render a [Provider](Provider.md) to set the locale, page background, and color scheme, load Spectrum fonts, and integrate with the Next.js router. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.

        ```tsx
        // app/provider.tsx
        "use client";

        import {useRouter} from 'next/navigation';
        import {Provider} from '@react-spectrum/s2';

        // Configure the type of the `routerOptions` prop on all React Spectrum components.
        declare module '@react-spectrum/s2' {
          interface RouterConfig {
            routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>['push']>[1]>
          }
        }

        export function ClientProvider({lang, children}) {
          let router = useRouter();

          return (
            <Provider elementType="html" locale={lang} router={{navigate: router.push}}>
              {children}
            </Provider>
          );
        }
        ```
      </Step>

      <Step>
        <Counter/>In your root layout, determine the user's preferred language and render a `ClientProvider` in place of the `<html>` element.

        ```tsx
        // app/layout.tsx
        import {headers} from 'next/headers';
        import {ClientProvider} from './provider';

        export default async function RootLayout({children}) {
          // Get the user's preferred language from the Accept-Language header.
          // You could also get this from a database, URL param, etc.
          const acceptLanguage = (await headers()).get('accept-language');
          const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';

          return (
            <ClientProvider lang={lang}>
              <body>
                {children}
              </body>
            </ClientProvider>
          );
        }
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="react-router">
    To use React Spectrum with React Router (framework mode), setup style macros, ensure the locale on the server matches the client, and configure React Spectrum links to use client side routing. If you're using declarative mode, choose your bundler above.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:

        ```bash
        npm install unplugin-parcel-macros --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit `vite.config.ts` to add the plugin and optimize the CSS bundle:

        ```ts
        // vite.config.ts
        import {defineConfig} from 'vite';
        import macros from 'unplugin-parcel-macros';

        export default defineConfig({
          plugins: [
            macros.vite(), // Must be first!
            // ...
          ],
          build: {
            target: ['es2022'],
            // Lightning CSS produces a much smaller CSS bundle than the default minifier.
            cssMinify: 'lightningcss',
            rollupOptions: {
              output: {
                // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
                // Because atomic CSS has so much overlap between components, loading all CSS up front results in
                // smaller bundles instead of producing duplication between pages.
                manualChunks(id) {
                  if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
                    return 's2-styles';
                  }
                }
              }
            }
          }
        });
        ```
      </Step>

      <Step>
        <Counter/>In your root layout, determine the user's preferred language in a `loader` function and render a [Provider](Provider.md) to set the locale, page background, and color scheme, load Spectrum fonts, and integrate with React Router. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.

        ```tsx
        // app/root.tsx
        import {Provider} from '@react-spectrum/s2';
        import {useNavigate, useHref, useRouteLoaderData, type NavigateOptions, type LoaderFunctionArgs} from 'react-router';
        import type { Route } from "./+types/root";

        /*- begin highlight -*/
        // Configure the type of the `routerOptions` prop on all React Spectrum components.
        declare module '@react-spectrum/s2' {
          interface RouterConfig {
            routerOptions: NavigateOptions
          }
        }
        /*- end highlight -*/

        export async function loader({request}: Route.LoaderArgs) {
          // Get the requested language (e.g. from headers, URL param, database, etc.)
          /*- begin highlight -*/
          const acceptLanguage = request.headers.get('accept-language');
          const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';
          /*- end highlight -*/
          return {lang};
        }

        export function Layout({children}) {
          /*- begin highlight -*/
          let {lang} = useRouteLoaderData('root') || {lang: 'en-US'};
          let navigate = useNavigate();
          /*- end highlight -*/

          return (
            /*- begin highlight -*/
            <Provider elementType="html" locale={lang} router={{navigate, useHref}}>
            {/*- end highlight -*/}
              <head>
                {/* ... */}
              </head>
              <body>
                {/*- begin highlight -*/}
                {/*- end highlight -*/}
                {children}
                {/* ... */}
              </body>
            </Provider>
          );
        }
        ```
      </Step>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/optimize-locales-plugin
        ```

        Edit `vite.config.ts` to add the plugin, and configure the `locales` parameter.

        ```ts
        // vite.config.ts
        import {defineConfig} from 'vite';
        import optimizeLocales from '@react-aria/optimize-locales-plugin';

        export default defineConfig({
          plugins: [
            {
              ...optimizeLocales.vite({
                locales: ['en-US', 'fr-FR']
              }),
              enforce: 'pre'
            }
          ],
        });
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="rollup">
    To use React Spectrum in a client-only Rollup SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:

        ```bash
        npm install unplugin-parcel-macros --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit `rollup.config.js` to add the plugin and optimize the CSS bundle:

        ```ts
        // rollup.config.ts
        import macros from 'unplugin-parcel-macros';

        export default {
          plugins: [
            macros.rollup(), // Must be first!
            // ...
          ],
          output: {
            // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
            // Because atomic CSS has so much overlap between components, loading all CSS up front results in
            // smaller bundles instead of producing duplication between pages.
            manualChunks(id) {
              if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
                return 's2-styles';
              }
            }
          }
        };
        ```
      </Step>

      <Routers components={props.components}/>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/optimize-locales-plugin
        ```

        Edit `rollup.config.js` to add the plugin, and configure the `locales` parameter.

        ```ts
        // rollup.config.js
        import optimizeLocales from '@react-aria/optimize-locales-plugin';

        export default {
          // ...
          plugins: [
            optimizeLocales.rollup({
              locales: ['en-US', 'fr-FR']
            })
          ]
        };
        ```
      </Step>
    </StepList>
  </TabPanel>

  <TabPanel id="esbuild">
    To use React Spectrum in a client-only ESBuild SPA, setup style macros, configure React Spectrum links to use your client side router, and optimize the client bundle to include localized strings for your supported languages.

    <StepList>
      <Step>
        <Counter/>React Spectrum supports styling via [macros](https://parceljs.org/features/macros/), a new bundler feature that enables functions to run at build time. To use style macros, install the bundler plugin:

        ```bash
        npm install unplugin-parcel-macros --dev
        ```
      </Step>

      <Step>
        <Counter/>Edit your build script to add the plugin:

        ```ts
        // build.mjs
        import {build} from 'esbuild';
        import macros from 'unplugin-parcel-macros';

        build({
          plugins: [
            macros.esbuild(), // Must be first!
            // ...
          ]
        });
        ```
      </Step>

      <Routers components={props.components}/>

      <Step>
        <Counter/>By default, React Spectrum includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin.

        ```bash
        npm install @react-aria/optimize-locales-plugin
        ```

        Edit your build script to add the plugin, and configure the `locales` parameter.

        ```ts
        import {build} from 'esbuild';
        import optimizeLocales from '@react-aria/optimize-locales-plugin';

        build({
          // ...
          plugins: [
            optimizeLocales.esbuild({
              locales: ['en-US', 'fr-FR']
            })
          ]
        });
        ```
      </Step>
    </StepList>
  </TabPanel>
</Tabs>

---

# Source: https://react-spectrum.adobe.com/icons.md

# Icons

React Spectrum offers a set of open source icons that can be imported from .

```tsx
import Edit from "@react-spectrum/s2/icons/Edit";

<Edit />
```

## Available icons

* 3D
* 3DAsset
* 3DMaterial
* ABC
* Accessibility
* Add
* AddCircle
* AddContent
* AlertDiamond
* AlertTriangle
* AlignBottom
* AlignCenter
* AlignLeft
* AlignMiddle
* AlignRight
* AlignTop
* Animation
* AnimationNo
* App
* Apps
* AppsAll
* Archive
* ArrowHeadTool
* Artboard
* AspectRatio
* Asset
* Attach
* AudioWave
* AutoSelectSubject
* Background
* BadgeVerified
* Bell
* BellRotated
* BetaApp
* Binoculars
* Blur
* Bookmark
* Brand
* Briefcase
* BrightnessContrast
* Brush
* Bug
* Building
* Buildings
* Calendar
* CalendarAdd
* CalendarDay
* CalendarEdit
* CalendarWeek
* CallCenter
* Camera
* CameraProperties
* Cancel
* CCLibrary
* Channel
* ChartBarVert
* ChartPie
* ChartTrend
* Chat
* CheckBox
* Checkmark
* CheckmarkCircle
* ChevronDoubleLeft
* ChevronDoubleRight
* ChevronDown
* ChevronLeft
* ChevronRight
* ChevronUp
* Circle
* Clock
* ClockPending
* Close
* CloseCaptions
* CloseCircle
* Cloud
* CloudStateDisconnected
* CloudStateError
* CloudStateInProgress
* CloudStateOnline
* CloudStatePaused
* CloudStatePending
* CloudStateSlowConnection
* Code
* Collection
* Color
* ColorFill
* ColorHarmony
* Comment
* CommentCheckmark
* CommentHide
* CommentRemove
* CommentShow
* CommentText
* Community
* Compare
* ContextualTaskBar
* Contrast
* Copy
* CornerRadius
* CornerRadiusBottomLeft
* CornerRadiusBottomRight
* CornerRadiusEach
* CornerRadiusTopLeft
* CornerRadiusTopRight
* Crop
* CropRotate
* CursorClick
* Cut
* Data
* DataAdd
* DataRefresh
* DataSettings
* DataUpload
* Delete
* DeviceAll
* DeviceDesktop
* DeviceDesktopMobile
* DeviceLaptop
* DeviceMobile
* DeviceMultiscreen
* DevicePhone
* DeviceTablet
* DirectSelect
* Discover
* DistributeBottomEdge
* DistributeHorizontalCenter
* DistributeLeftEdge
* DistributeRightEdge
* DistributeSpaceHorizontally
* DistributeSpaceVertically
* DistributeTopEdge
* DistributeVerticalCenter
* Download
* Draw
* Duplicate
* Edit
* EditNo
* Education
* EffectBorder
* Effects
* Email
* Emoji
* Enterprise
* Erase
* Export
* ExportTo
* Exposure
* Eyedropper
* Feedback
* File
* FileAdd
* FileConvert
* Files
* FileText
* FileUser
* Filmstrip
* Filter
* Filters
* FindAndReplace
* Flag
* FlipHorizontal
* FlipVertical
* Folder
* FolderAdd
* FolderBreadcrumb
* FolderClock
* FolderMoveTo
* FolderOpen
* FolderSearch
* FontPicker
* FullScreen
* FullScreenExit
* Gift
* GlobeGrid
* Gradient
* GradientHorizontal
* GradientRadial
* GridsAndRulers
* GridTypeDots
* GridTypeLines
* Group
* GroupNo
* Hand
* Heart
* HeartFilled
* HelpCircle
* History
* Home
* Image
* ImageAdd
* ImageBackgroundRemove
* Images
* Import
* InfoCircle
* Interaction
* Invert
* Invite
* Key
* Keyboard
* LassoSelect
* Layers
* Layout
* Leave
* Lightbulb
* Lighten
* Line
* LineHeight
* Link
* LinkVertical
* ListBulleted
* ListMultiSelect
* ListNumbered
* Location
* Lock
* LockOpen
* Logo
* MagicWand
* Market
* Mask
* MaskDisable
* Maximize
* MediaOffline
* Mention
* MenuHamburger
* Microphone
* MicrophoneOff
* Minimize
* More
* Move
* MovieCamera
* MusicNote
* NamingOrder
* New
* Nudge
* OpenIn
* Order
* OrderBottom
* OrderOneDown
* OrderOneUp
* OrderTop
* OrientationLandscape
* OrientationPortrait
* Paste
* Path
* Pattern
* Pause
* PauseCircle
* PenBrush
* People
* PeopleGroup
* Percentage
* PinOff
* PinOn
* Play
* Plugin
* PluginGear
* Polygon3
* Polygon4
* Polygon5
* Polygon6
* Preview
* Print
* Project
* ProjectAddInto
* ProjectCreate
* Promote
* Prompt
* Properties
* Prototyping
* Publish
* PublishNo
* RadioButton
* RectangleHoriz
* Redo
* Refresh
* RemoveCircle
* Rename
* Replace
* ReportAbuse
* Resize
* Revert
* ReviewLink
* Ribbon
* RocketQuickActions
* RotateCCW
* RotateCW
* RotateOrientation
* Ruler
* Saturation
* SaveFloppy
* Search
* Select
* SelectAllItems
* SelectAndMove
* SelectMulti
* SelectNo
* SelectNone
* SelectRectangle
* Send
* Settings
* Shapes
* Share
* ShareAndroid
* ShoppingCart
* Shuffle
* Similar
* Slideshow
* SlowConnectionCircle
* SocialNetwork
* Sort
* SortDown
* SortUp
* SpeedFast
* StampClone
* Star
* StarFilled
* StepBackward
* StepForward
* StickyNote
* StrokeDotted
* StrokeSolid
* StrokeWidth
* Switch
* SwitchVertical
* Table
* Tag
* TagBold
* TagItalic
* TagStrikeThrough
* TagUnderline
* Target
* Temperature
* Template
* Text
* TextAdd
* TextAlignCenter
* TextAlignJustify
* TextAlignJustifyLastCenter
* TextAlignJustifyLastLeft
* TextAlignJustifyLastRight
* TextAlignLeft
* TextAlignRight
* TextBold
* TextCapsAll
* TextCapsSmall
* TextHighlight
* TextIncrease
* TextItalic
* TextNumbers
* TextParagraph
* TextReplaceComment
* TextSize
* TextStrikeThrough
* TextSubscript
* TextSuperscript
* TextUnderline
* TextVariableFontSettings
* ThumbDown
* ThumbUp
* Toggle
* Tools
* TouchOneFingerSwipeLeftRight
* Transcript
* TransformDistort
* TransformGeneric
* TransformPerspective
* TransformSkew
* TransformWarp
* Translate
* Tutorials
* Undo
* UnLink
* UnlinkHoriz
* UnlinkVertical
* Upload
* UploadToCloud
* User
* UserAdd
* UserAvatar
* UserAvatarCursor
* UserEdit
* UserFollowing
* UserGroup
* UserLock
* UserSettings
* UsersLock
* VectorDraw
* Video
* ViewGrid
* ViewGridFluid
* ViewList
* ViewTransparency
* Visibility
* VisibilityOff
* VolumeOff
* VolumeOne
* VolumeTwo
* Wallet
* WebNavBar
* WebPage
* ZoomIn
* ZoomOut

## API

Icons support a more limited set of the style macro through a special macro called `iconStyle`.

### iconStyle

```tsx
import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
import Edit from '@react-spectrum/s2/icons/Edit';

<Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
```

### Icon colors

| Color |
|-------|
| white |
| black |
| accent |
| neutral |
| negative |
| informative |
| positive |
| notice |
| gray |
| red |
| orange |
| yellow |
| chartreuse |
| celery |
| seafoam |
| cyan |
| blue |
| indigo |
| purple |
| fuchsia |
| magenta |
| pink |
| turquoise |
| cinnamon |
| brown |
| silver |

### Icon sizes

| Size | Pixels |
|------|--------|
| XS | 14px |
| S | 16px |
| M | 20px |
| L | 22px |
| XL | 26px |

## Custom icons

To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.

<InlineAlert variant="notice">
  <Heading>Requirements</Heading>
  <Content>To use an SVG as an icon which sizes correctly and uses the correct colors, it must be a square (20x20), with a viewBox of `0 0 20 20`. It must also have a fill with `var(--iconPrimary, #222)`.</Content>
</InlineAlert>

### Parcel

If you are using Parcel, the `@react-spectrum/parcel-transformer-s2-icon` plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:

```bash
npm install @react-spectrum/parcel-transformer-s2-icon --dev
```

Then, add it to your `.parcelrc`:

```tsx
{
  extends: "@parcel/config-default",
  transformers: {
    "icon:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}
```

Now you can import icon SVGs using the `icon:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):

`import Icon from 'icon:./path/to/Icon.svg';`

### Other bundlers

The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a folder of SVG icons into TSX files.

```bash
npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'
```

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from './path/to/destination/Icon';`

### Building icons as a library

You can also build the icons as a separate library for distribution so that multiple projects can share the same icons. Or possibly you simply do not want to output tsx files.
To do this, use the `--isLibrary` flag.

```bash
npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination' --isLibrary
```

This outputs a folder of ES modules and commonjs modules with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from 'library-name/path/to/destination/Icon';`

---

# Source: https://react-spectrum.adobe.com/illustrations.md

# Illustrations

React Spectrum offers a collection of illustrations that can be imported from .

```tsx
import Cloud from "@react-spectrum/s2/illustrations/gradient/generic1/Cloud";

<Cloud />
```

## Available illustrations

* 3D
* 3Dasset
* Accessibility
* Addproject
* AIchat
* AIChat
* AIGenerate
* AIGenerateImage
* AlertNotice
* Animation
* Apps
* ArrowDown
* ArrowLeft
* ArrowRight
* ArrowUp
* Artboard
* Assets
* AudioWave
* BadgeVerified
* Bell
* Bolt
* Brand
* Briefcase
* BrightnessContrast
* Browser
* BrowserError
* BrowserNotCompatible
* Brush
* Bug
* Buildings
* BuildTable
* Calendar
* Camera
* CardTapPayment
* Channel
* ChartAreaStack
* Chatbubble
* Check
* Checkmark
* Clipboard
* Clock
* Close
* Cloud
* CloudStateDisconnected
* CloudStateError
* CloudUpload
* CodeBrackets
* Color
* CommentText
* Confetti
* ConfettiCelebration
* Conversationbubbles
* Crop
* Cursor
* Cut
* Data
* DataAnalytics
* Desktop
* Diamond
* Document
* Download
* DropToUpload
* Education
* Effects
* Emoji
* Emoji160
* EmptyStateExport
* Error
* Explosion
* ExportTo
* Exposure
* FileAlert
* FileImage
* FileShared
* FileText
* FileVideo
* FileZip
* Filmstrip
* Filter
* Filters
* Fireworks
* Flag
* FlagCheckmark
* FlagCross
* FolderClose
* FolderOpen
* FolderShared
* GearSetting
* Gift
* Globe
* GlobeGrid
* GraphBarChart
* Hand
* Handshake
* Heart
* HelpCircle
* Home
* Illustration
* Image
* ImageStack
* InfiniteLooping
* Information
* Interaction
* Laptop
* Layers
* Libraries
* Lightbulb
* LightbulbRays
* Lighten
* Link
* Location
* LockClose
* LockOpen
* Logo
* MagicWand
* MailClose
* MailOpen
* Market
* MegaphonePromote
* MegaphonePromote2
* MegaphonePromoteExpressive
* Mention
* Microphone
* MicrophoneOff
* Minimize
* MovieCamera
* MusicNote
* NoBrands
* NoComment
* NoComments
* NoElements
* NoFile
* NoFilter
* NoImage
* NoInternetConnection
* NoLibraries
* NoLibrariesBrands
* NoReviewLinks
* NoSearchResults
* NoSharedFile
* Paperairplane
* Paperclip
* Pause
* Pencil
* Phone
* PieChart
* PiggyBank
* Pin
* Play
* PlayTriangle
* Plugin
* Prompt
* Properties
* Redo
* Remix
* Replace
* ReportAbuse
* Revert
* Ribbon
* Rocket
* RotateCCW
* RotateCW
* Ruler
* Search
* Segmentation
* Server
* Shapes
* ShoppingBag
* ShoppingCart
* SocialPost
* Sparkles
* SpeedFast
* StampClone
* Star
* StepForward
* Stopwatch
* Switch
* Tablet
* Tag
* Targeted
* Text
* ThreeArrowsCircle
* ThumbsDown
* ThumbsUp
* Transform
* Translate
* Trash
* Trophy
* Update
* Upload
* User
* UserAvatar
* UserGroup
* VectorDraw
* Video
* Volume
* VolumeOff
* VolumeOne
* Wallet
* Warning

## Custom illustrations

To use custom illustrations, you first need to convert your SVGs into compatible illustration components. This depends on your bundler.

### Parcel

If you are using Parcel, the `@react-spectrum/parcel-transformer-s2-icon` plugin can be used to convert SVGs to illustration components. First install it into your project as a dev dependency:

```bash
npm install @react-spectrum/parcel-transformer-s2-icon --dev
```

Then, add it to your `.parcelrc`:

```tsx
{
  extends: "@parcel/config-default",
  transformers: {
    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}
```

Now you can import illustration SVGs using the `illustration:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):

```tsx
import Illustration from 'illustration:./path/to/Illustration.svg';
```

Note that you must use the name `illustration` for the pipeline.

### Other bundlers

The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a folder of SVG illustrations into TSX files.

```bash
npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration -o 'path/to/destination'
```

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.

```tsx
import Illustration from './path/to/destination/Illustration';
```

---

# Source: https://react-spectrum.adobe.com/releases/index.md

# Source: https://react-spectrum.adobe.com/index.md

<RouterWrapperServer currentPage={props.currentPage}>
  <Provider
    elementType="html"
    locale="en"
  >
    <head>
      <meta charSet="utf-8"/>

      <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
      />

      <link
        rel="icon"
        href={rspFavicon}
      />

      <title>React Spectrum</title>

      <meta
        rel="preload"
        as="font"
        href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3"
        crossOrigin=""
      />

      <meta
        name="description"
        content={description}
      />

      <meta
        name="keywords"
        content="accessibility,components,react,headless,style-free"
      />

      <meta
        name="twitter:card"
        content="summary_large_image"
      />

      <meta
        name="twitter:image"
        content={`${getBaseUrl('s2')}/og/index.png`}
      />

      <meta
        property="og:title"
        content="React Spectrum"
      />

      <meta
        property="og:type"
        content="website"
      />

      <meta
        property="og:url"
        content={props.currentPage.url}
      />

      <meta
        property="og:image"
        content={`${getBaseUrl('s2')}/og/index.png`}
      />

      <meta
        property="og:description"
        content={description}
      />

      <meta
        property="og:locale"
        content="en_US"
      />

      <link
        rel="canonical"
        href={props.currentPage.url}
      />

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{__html: JSON.stringify(
                {
                  '@context': 'http://schema.org',
                  '@type': 'Article',
                  author: 'Adobe Inc',
                  headline: 'React Spectrum',
                  description,
                  image: `${getBaseUrl('s2')}/og/index.png`,
                  publisher: {
                    '@type': 'Organization',
                    url: 'https://www.adobe.com',
                    name: 'Adobe',
                    logo: 'https://www.adobe.com/favicon.ico'
                  }
                }
              )}}
      />
    </head>

    <Home currentPage={props.currentPage}/>
  </Provider>
</RouterWrapperServer>

---

# Source: https://react-spectrum.adobe.com/mcp.md

# MCP Server

Learn how to use the React Spectrum  server to help AI agents browse the documentation.

## Using with an MCP client

Add the server to your MCP client configuration (the exact file and schema may depend on your client).

```js
{
  "mcpServers": {
    "React Spectrum (S2)": {
      "command": "npx",
      "args": ["@react-spectrum/mcp@latest"]
    }
  }
}
```

### Cursor

[Add to Cursor](cursor://anysphere.cursor-deeplink/mcp/install.md?name=React%20Spectrum%20\(S2\)\&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1zcGVjdHJ1bS9tY3BAbGF0ZXN0In0%3D)

Or follow Cursor's MCP install [guide](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) and use the standard config above.

### VS Code

[Add to Visual Studio Code](vscode:mcp/install.md?%7B%22name%22%3A%22React%20Spectrum%20\(S2\)%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40react-spectrum%2Fmcp%40latest%22%5D%7D)

Or follow VS Code's MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) and use the standard config above. You can also add the server using the VS Code CLI:

```bash
code --add-mcp '{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}'
```

### Claude Code

Use the Claude Code CLI to add the server:

```bash
claude mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest
```

For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).

### Codex

Create or edit the configuration file `~/.codex/config.toml` and add:

```
[mcp_servers.react-spectrum-s2]
command = "npx"
args = ["@react-spectrum/mcp@latest"]
```

For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).

### Gemini CLI

Use the Gemini CLI to add the server:

```bash
gemini mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest
```

For more information, see the [Gemini CLI MCP documentation](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server).

### Windsurf

Follow the Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and use the standard config above.

---

# Source: https://react-spectrum.adobe.com/migrating.md

# Migrating to Spectrum 2

Learn how to migrate from React Spectrum v3 to Spectrum 2.

An automated upgrade assistant is available by running the following command in the project you want to upgrade:

```bash
npm install @react-spectrum/codemods s1-to-s2
```

To only upgrade specific components, provide a `--components` argument with a comma-separated list of components to upgrade:

```bash
npm install @react-spectrum/codemods s1-to-s2 --components=Button,TextField
```

The following arguments are also available:

* `--path` - Path to apply the upgrade changes to. Defaults to the current directory (`.`)
* `--dry` - Runs the upgrade assistant without making changes to components
* `--ignore-pattern` - Ignore files that match the provided glob expression. Defaults to `'**/node_modules/**'`

For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.

Note that <PendingBadge/> indicates that future changes are expected, and the current solution should be considered temporary.

## Components

### All components

* Update imports to use the `@react-spectrum/s2` package instead of `@adobe/react-spectrum` or individual packages like `@react-spectrum/button`
* Update [style props](v3/styling.md#style-props) to use the style macro instead. See the 'Style props' section below

### Accordion

* Update `Item` to be `Disclosure`. `Disclosure` should now consist of two children: `DisclosureTitle` and `DisclosurePanel`. Note that you can now add interactive elements inside the header and adjacent to the title by using the `DisclosureHeader` component with the `DisclosureTitle` and interactive elements inside.
* Update `Item`'s title prop to be a child of `DisclosureTitle`
* Update children of `Item` to be children of `DisclosurePanel`
* Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
* Remove `disabledKeys` and add `isDisabled` to individual `Disclosure` components
* Add `allowsMultipleExpanded` to allow multiple `Disclosure` components to be expanded at once (previously default behavior)

### ActionBar

* Remove `ActionBarContainer` and move `ActionBar` to `renderActionBar` prop of `TableView` or `CardView`
* Update `Item` to `ActionButton`
* Update root level `onAction` to be called via `onPress` on each `ActionButton`
* Apply `isDisabled` directly on each `ActionButton` or `ToggleButton` instead of root level `disabledKeys`
* Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
* Convert dynamic collections render function to `items.map`
* <PendingBadge/> Comment out `buttonLabelBehavior` (it has not been implemented yet)

### ActionButton

No updates needed.

### ActionMenu

* <PendingBadge/> Comment out `closeOnSelect` (it has not been implemented yet)
* <PendingBadge/> Comment out `trigger` (it has not been implemented yet)
* Update `Item` to be a `MenuItem`

### ActionGroup

* Use `ActionButtonGroup` if you are migrating from an `ActionGroup` that didn't allow for selection. `ActionButtonGroup` takes `ActionButtons` as children.
* Use `ToggleButtonGroup` if you are migrating from an `ActionGroup` that used single or multiple selection. `ToggleButtonGroup` takes `ToggleButtons` as children.
* <PendingBadge/> Comment out `overflowMode` (it has not been implemented yet)
* <PendingBadge/> Comment out `buttonLabelBehavior` (it has not been implemented yet)
* <PendingBadge/> Comment out `summaryIcon` (it has not been implemented yet)
* Update root level `onAction` to called via `onPress` on each `ActionButton`
* Apply `isDisabled` directly on each `ActionButton` or `ToggleButton` instead of root level `disabledKeys`
* Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
* Convert dynamic collections render function to `items.map`

### AlertDialog

No updates needed.

### Avatar

* <PendingBadge/> Comment out `isDisabled` (it has not been implemented yet)
* Update `size` to be a pixel value if it currently matches `'avatar-size-*'`

### Badge

* Change `variant="info"` to `variant="informative"`

### Breadcrumbs

* <PendingBadge/> Comment out `showRoot` (it has not been implemented yet)
* <PendingBadge/> Comment out `isMultiline` (it has not been implemented yet)
* <PendingBadge/> Comment out `autoFocusCurrent` (it has not been implemented yet)
* Remove `size="S"` (Small is no longer a supported size in Spectrum 2)
* Update `Item` to be a `Breadcrumb`

### Button

* Change `variant="cta"` to `variant="accent"`
* Change `variant="overBackground"` to `variant="primary" staticColor="white"`
* Change `style` to `fillStyle`
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* If `href` is present, the `Button` should be converted to a `LinkButton`
* Remove `elementType` (it is no longer supported in Spectrum 2)

### ButtonGroup

No updates needed.

### Calendar

No updates needed.

### Checkbox

No updates needed.

### CheckboxGroup

* Remove `showErrorIcon` (it has been removed due to accessibility issues)

### ColorArea

* Remove `size` and instead provide a size via the style macro (i.e. `styles={style({size: 20})}`)

### ColorField

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### ColorSlider

* Remove `showValueLabel` (it has been removed due to accessibility issues)

### ColorSwatch

No updates needed.

### ColorWheel

* Remove `size` and instead provide a size via the style macro (i.e. `styles={style({size: 20})}`)

### ComboBox

* Change `menuWidth` value from a `DimensionValue` to a pixel value
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)
* Update `Item` to be a `ComboBoxItem`

### DateField

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### DatePicker

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### DateRangePicker

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### Dialog

* Update children to move render props from being the second child of `DialogTrigger` to being a child of `Dialog`
* Remove `onDismiss` and use `onOpenChange` on the `DialogTrigger`, or `onDismiss` on the `DialogContainer` instead
* `Dialog` is now meant specifically for rendering modal dialogs only and follows the same preset layout as before
* If you are trying to create a dialog with a custom layout use `CustomDialog`
* If you are trying to create a fullscreen dialog use `FullscreenDialog`
* If you are trying to create a popover dialog use `Popover`
* Supports `isKeyboardDismissDisabled` in place of `DialogTrigger`
* Supports `isDismissible` in place of `DialogTrigger`. Note the fixed spelling from previous `isDismissible` prop.
* Supports `role: "dialog" | "alertdialog"`

### DialogContainer

* Remove `type`, this is dependent on the dialog level child that you use (e.g. `Dialog`, `FullscreenDialog`, `Popover`)
* Remove `isDismissable`, prop now exists on the dialog level component as `isDismissible`
* Remove `isKeyboardDismissDisabled`, prop now exists on the dialog level component

### DialogTrigger

* <PendingBadge/> Comment out `type="tray"` (`Tray` has not been implemented yet)
* <PendingBadge/> Comment out `mobileType` (`Tray` and other types have not been implemented yet for `Popover`)
* Remove `targetRef` (it is no longer supported in Spectrum 2)
* Update `children` to remove render props usage, and note that the `close` function was moved from `DialogTrigger` to `Dialog`
* Remove `containerPadding`, prop now exists on the `Popover` component
* Remove `crossOffset`, prop now exists on the `Popover` component
* Remove `hideArrow`, prop now exists on the `Popover` component
* Remove `isDismissable`, prop now exists on the dialog level component as `isDismissible`
* Remove `isKeyboardDismissDisabled`, prop now exists on the dialog level component
* Remove `offset`, prop now exists on the `Popover` component
* Remove `placement`, prop now exists on the `Popover` component
* Remove `shouldFlip`, prop now exists on the `Popover` component
* Remove `type`, this is dependent on the dialog level child that you use (e.g. `Dialog`, `FullscreenDialog`, `Popover`)

### Divider

* Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2)

### Flex

* Update `Flex` to be a `div` and apply flex styles using the style macro (i.e. `<div className={style({display: 'flex'})} />`)

### Form

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Remove `isReadOnly` (it is no longer supported in Spectrum 2)
* Remove `validationState` (it is no longer supported in Spectrum 2)
* Remove `validationBehavior` (it is no longer supported in Spectrum 2)

### Grid

* Update `Grid` to be a `div` and apply grid styles using the style macro (i.e. `<div className={style({display: 'grid'})} />`)

### IllustratedMessage

* Update illustrations to be from `@react-spectrum/s2/illustrations`. See Illustrations

### InlineAlert

* Change `variant="info"` to `variant="informative"`

### Item

* If within `Menu`: Update `Item` to be a `MenuItem`
* If within `ActionMenu`: Update `Item` to be a `MenuItem`
* If within `TagGroup`: Update `Item` to be a `Tag`
* If within `Breadcrumbs`: Update `Item` to be a `Breadcrumb`
* If within `Picker`: Update `Item` to be a `PickerItem`
* If within `ComboBox`: Update `Item` to be a `ComboBoxItem`
* If within `ListBox`: Update `Item` to be a `ListBoxItem`
* If within `TabList`: Update `Item` to be a `Tab`
* If within `TabPanels`: Update `Item` to be a `TabPanel` and remove surrounding `TabPanels`
* Update `key` to be `id` (and keep `key` if rendered inside `array.map`)

### Link

* Change `variant="overBackground"` to `staticColor="white"`
* If `a` was used inside `Link` (legacy API), remove the `a` and apply props (i.e `href`) directly to `Link`

### ListBox

* Update `Item` to be a `ListBoxItem`

### Menu

* Update `Item` to be a `MenuItem`

### MenuTrigger

* <PendingBadge/> Comment out `closeOnSelect` (it has not been implemented yet)

### NumberField

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### Picker

* Change `menuWidth` value from a `DimensionValue` to a pixel value
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)
* Update `Item` to be a `PickerItem`
* Change `isLoading` to `loadingState` and provide the appropriate loading state.
* Update `defaultSelectedKey` and `selectedKey` to be `defaultValue` and `value` respectively. See the [Picker](Picker.md#value) documentation for more details.

### ProgressBar

* Change `variant="overBackground"` to `staticColor="white"`
* <PendingBadge/> Comment out `labelPosition` (it has not been implemented yet)
* <PendingBadge/> Comment out `showValueLabel` (it has not been implemented yet)

### ProgressCircle

* Change `variant="overBackground"` to `staticColor="white"`

### Radio

No updates needed.

### RadioGroup

* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)
* Remove `showErrorIcon` (it has been removed due to accessibility issues)

### RangeCalendar

No updates needed.

### RangeSlider

* Remove `showValueLabel` (it has been removed due to accessibility issues)
* <PendingBadge/> Comment out `getValueLabel` (it has not been implemented yet)
* <PendingBadge/> Comment out `orientation` (it has not been implemented yet)

### SearchField

* <PendingBadge/> Comment out icon (it has not been implemented yet)
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### Section

* If within `Menu`: Update `Section` to be a `MenuSection`
* If within `Picker`: Update `Section` to be a `PickerSection`

### Slider

* Remove `isFilled` (Slider is always filled in Spectrum 2)
* Remove `trackGradient` (Not supported in S2 design)
* Remove `showValueLabel` (it has been removed due to accessibility issues)
* <PendingBadge/> Comment out `getValueLabel` (it has not been implemented yet)
* <PendingBadge/> Comment out `orientation` (it has not been implemented yet)

### StatusLight

* Remove `isDisabled` (it is no longer supported in Spectrum 2)
* Change `variant="info"` to `variant="informative"`

### SubmenuTrigger

No updates needed.

### Switch

No updates needed.

### TableView

* For `Column` and `Row`: Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
* For dynamic tables, pass a `columns` prop into `Row`
* For `Row`: Update dynamic render function to pass in `column` instead of `columnKey`
* Move `loadingState` and `onLoadMore` from `TableBody` to `TableView`
* <PendingBadge/> Comment out `UNSTABLE_allowsExpandableRows` (it has not been implemented yet)
* <PendingBadge/> Comment out `UNSTABLE_onExpandedChange` (it has not been implemented yet)
* <PendingBadge/> Comment out `UNSTABLE_expandedKeys` (it has not been implemented yet)
* <PendingBadge/> Comment out `UNSTABLE_defaultExpandedKeys` (it has not been implemented yet)

### Tabs

* Inside `TabList`: Update `Item` to be `Tab`
* Update `items` on `Tabs` to be on `TabList`
* Inside `TabPanels`: Update `Item` to be a `TabPanel` and remove the surrounding `TabPanels`
* Remove `isEmphasized` (it is no longer supported in Spectrum 2)
* Remove `isQuiet` (it is no longer supported in Spectrum 2)

### TagGroup

* Rename `actionLabel` to `groupActionLabel`
* Rename `onAction` to `onGroupAction`
* Change `validationState="invalid"` to `isInvalid`
* Update `Item` to be `Tag`

### TextArea

* <PendingBadge/> Comment out `icon` (it has not been implemented yet)
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### TextField

* <PendingBadge/> Comment out `icon` (it has not been implemented yet)
* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### TimeField

* Remove `isQuiet` (it is no longer supported in Spectrum 2)
* Change `validationState="invalid"` to `isInvalid`
* Remove `validationState="valid"` (it is no longer supported in Spectrum 2)

### ToggleButton

No updates needed.

### Tooltip

* Remove `variant` (it is no longer supported in Spectrum 2)
* Remove `placement` and add to the parent `TooltipTrigger` instead
* Remove `showIcon` (it is no longer supported in Spectrum 2)
* Remove `isOpen` and add to the parent `TooltipTrigger` instead

### TooltipTrigger

* Update placement prop to have one value (i.e. Update `placement="bottom left"` to be `placement="bottom"`)

### TreeView

If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. Otherwise, no updates needed.

* Update content within `TreeViewItem` to be wrapped in `TreeViewContentItem`

### View

* Update `View` to be a `div` and apply styles using the style macro

### Well

Update `Well` to be a `div` and apply styles using the style macro:

```tsx
<div className={style({
  display: 'block',
  textAlign: 'start',
  padding: 16,
  minWidth: 160,
  marginTop: 4,
  borderWidth: 1,
  borderRadius: 'sm',
  borderStyle: 'solid',
  borderColor: 'transparent-black-75',
  font: 'body-sm'
})} />
```

## Style props

React Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the style macro.

### Border width

Affected style props: `borderWidth`, `borderStartWidth`, `borderEndWidth`, `borderTopWidth`, `borderBottomWidth`, `borderXWidth`, `borderYWidth`.

Border widths should be updated to use pixel values. Use the following mappings:

| Spectrum 1 | Spectrum 2 |
| ------ | ------ |
| `'none'` | `0` |
| `'thin'` | `1` |
| `'thick'` | `2` |
| `'thicker'` | `4` |
| `'thickest'` | `'[8px]'` |

### Border radius

Affected style props: `borderRadius`, `borderTopStartRadius`, `borderTopEndRadius`, `borderBottomStartRadius`, `borderBottomEndRadius`.

Border radius values should be updated to use pixel values. Use the following mappings:

| Spectrum 1 | Spectrum 2 |
| ------ | ------ |
| `'xsmall'` | `'[1px]'` |
| `'small'` | `'sm'` |
| `'regular'` | `'default'` |
| `'medium'` | `'lg'` |
| `'large'` | `'xl'` |

### Dimension values

Affected style props: `width`, `minWidth`, `maxWidth`, `height`, `minHeight`, `maxHeight`, `margin`, `marginStart`, `marginEnd`, `marginTop`, `marginBottom`, `marginX`, `marginY`, `top`, `bottom`, `left`, `right`, `start`, `end`, `flexBasis`, `gap`, `columnGap`, `rowGap`, `padding`, `paddingX`, `paddingY`, `paddingStart`, `paddingEnd`, `paddingTop`, `paddingBottom`.

Dimension values should be converted to pixel values. Use the following mappings:

| Spectrum 1 | Spectrum 2 |
| ------ | ------ |
| `'size-0'` | `0` |
| `'size-10'` | `1` |
| `'size-25'` | `2` |
| `'size-40'` | `3` |
| `'size-50'` | `4` |
| `'size-65'` | `5` |
| `'size-75'` | `6` |
| `'size-85'` | `7` |
| `'size-100'` | `8` |
| `'size-115'` | `9` |
| `'size-125'` | `10` |
| `'size-130'` | `11` |
| `'size-150'` | `12` |
| `'size-160'` | `13` |
| `'size-175'` | `14` |
| `'size-200'` | `16` |
| `'size-225'` | `18` |
| `'size-250'` | `20` |
| `'size-275'` | `22` |
| `'size-300'` | `24` |
| `'size-325'` | `26` |
| `'size-350'` | `28` |
| `'size-400'` | `32` |
| `'size-450'` | `36` |
| `'size-500'` | `40` |
| `'size-550'` | `44` |
| `'size-600'` | `48` |
| `'size-675'` | `54` |
| `'size-700'` | `56` |
| `'size-800'` | `64` |
| `'size-900'` | `72` |
| `'size-1000'` | `80` |
| `'size-1200'` | `96` |
| `'size-1250'` | `100` |
| `'size-1600'` | `128` |
| `'size-1700'` | `136` |
| `'size-2000'` | `160` |
| `'size-2400'` | `192` |
| `'size-3000'` | `240` |
| `'size-3400'` | `272` |
| `'size-3600'` | `288` |
| `'size-4600'` | `368` |
| `'size-5000'` | `400` |
| `'size-6000'` | `480` |
| `'static-size-0'` | `0` |
| `'static-size-10'` | `1` |
| `'static-size-25'` | `2` |
| `'static-size-40'` | `3` |
| `'static-size-50'` | `4` |
| `'static-size-65'` | `5` |
| `'static-size-100'` | `8` |
| `'static-size-115'` | `9` |
| `'static-size-125'` | `10` |
| `'static-size-130'` | `11` |
| `'static-size-150'` | `12` |
| `'static-size-160'` | `13` |
| `'static-size-175'` | `14` |
| `'static-size-200'` | `16` |
| `'static-size-225'` | `18` |
| `'static-size-250'` | `20` |
| `'static-size-300'` | `24` |
| `'static-size-400'` | `32` |
| `'static-size-450'` | `36` |
| `'static-size-500'` | `40` |
| `'static-size-550'` | `44` |
| `'static-size-600'` | `48` |
| `'static-size-700'` | `56` |
| `'static-size-800'` | `64` |
| `'static-size-900'` | `72` |
| `'static-size-1000'` | `80` |
| `'static-size-1200'` | `96` |
| `'static-size-1700'` | `136` |
| `'static-size-2400'` | `192` |
| `'static-size-2600'` | `208` |
| `'static-size-3400'` | `272` |
| `'static-size-3600'` | `288` |
| `'static-size-4600'` | `368` |
| `'static-size-5000'` | `400` |
| `'static-size-6000'` | `480` |
| `'single-line-height'` | `32` |
| `'single-line-width'` | `192` |

### Break points

Break points previously used in style props can be used in the style macro with updated keys. Use the following mappings:

| Spectrum 1 | Spectrum 2 |
| ------ | ------ |
| `base` | `default` |
| `S` | `sm` |
| `M` | `md` |
| `L` | `lg` |

---

# Source: https://react-spectrum.adobe.com/selection.md

# Selection

Many collection components support selecting items by clicking or tapping them, or by using the keyboard. Learn how to handle selection events, how to control selection programmatically, and the data structures used to represent a selection.

## Multiple selection

Most collection components support item selection, which is handled by the `onSelectionChange` event. Use the `selectedKeys` prop to control the selected items programmatically, or `defaultSelectedKeys` for uncontrolled behavior.

Selection is represented by a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) containing the `id` of each selected item. You can also pass any iterable collection (e.g. an array) to the `selectedKeys` and `defaultSelectedKeys` props, but the `onSelectionChange` event will always pass back a Set.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['lion']));

  return (
    <>
      <CardView
        aria-label="Nature photos"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 360, maxWidth: 'full', height: 520})}
      >
        <AssetCard id="desert" textValue="Desert Sunset">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
          </CardPreview>
          <Content>
            <Text slot="title">Desert Sunset</Text>
            <Text slot="description">PNG • 2/3/2024</Text>
          </Content>
        </AssetCard>
        <AssetCard id="hiking" textValue="Hiking Trail">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
          </CardPreview>
          <Content>
            <Text slot="title">Hiking Trail</Text>
            <Text slot="description">JPEG • 1/10/2022</Text>
          </Content>
        </AssetCard>
        <AssetCard id="lion" textValue="Lion">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
          </CardPreview>
          <Content>
            <Text slot="title">Lion</Text>
            <Text slot="description">JPEG • 8/28/2021</Text>
          </Content>
        </AssetCard>
        <AssetCard id="mountain" textValue="Mountain Sunrise">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
          </CardPreview>
          <Content>
            <Text slot="title">Mountain Sunrise</Text>
            <Text slot="description">PNG • 3/15/2015</Text>
          </Content>
        </AssetCard>
      </CardView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## Menu example

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['rulers']));

  return (
    <>
      <MenuTrigger>
        <ActionButton>View</ActionButton>
        <Menu
          selectionMode="multiple"
          selectedKeys={selectedKeys}
          onSelectionChange={setSelectedKeys}
        >
          <MenuItem id="grid">Pixel grid</MenuItem>
          <MenuItem id="rulers">Rulers</MenuItem>
          <MenuItem id="layout">Layout guides</MenuItem>
          <MenuItem id="toolbar">Toolbar</MenuItem>
        </Menu>
      </MenuTrigger>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## SelectBoxGroup example

```tsx
import {SelectBoxGroup, SelectBox, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['aws']));

  return (
    <>
      <SelectBoxGroup
        aria-label="Cloud providers"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <SelectBox id="aws" textValue="AWS">
          <Server />
          <Text slot="label">Amazon Web Services</Text>
        </SelectBox>
        <SelectBox id="azure" textValue="Azure">
          <AlertNotice />
          <Text slot="label">Microsoft Azure</Text>
        </SelectBox>
        <SelectBox id="gcp" textValue="GCP">
          <StarFilled />
          <Text slot="label">Google Cloud Platform</Text>
        </SelectBox>
      </SelectBoxGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## TableView example

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

const rows = [
  {id: 'lettuce', name: 'Lettuce', type: 'Vegetable', calories: 4},
  {id: 'tomato', name: 'Tomato', type: 'Vegetable', calories: 5},
  {id: 'cheese', name: 'Cheddar', type: 'Cheese', calories: 113},
  {id: 'tuna', name: 'Tuna salad', type: 'Salad', calories: 187},
  {id: 'egg', name: 'Egg salad', type: 'Salad', calories: 200},
  {id: 'ham', name: 'Ham', type: 'Meat', calories: 205}
];

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));

  return (
    <>
      <TableView
        aria-label="Sandwich contents"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
          <Column>Calories</Column>
        </TableHeader>
        <TableBody items={rows}>
          {item => (
            <Row>
              <Cell>{item.name}</Cell>
              <Cell>{item.type}</Cell>
              <Cell>{item.calories}</Cell>
            </Row>
          )}
        </TableBody>
      </TableView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## TagGroup example

```tsx
import {TagGroup, Tag, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));

  return (
    <>
      <TagGroup
        label="Sandwich contents"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Tag id="lettuce">Lettuce</Tag>
        <Tag id="tomato">Tomato</Tag>
        <Tag id="cheese">Cheese</Tag>
        <Tag id="tuna">Tuna Salad</Tag>
        <Tag id="egg">Egg Salad</Tag>
        <Tag id="ham">Ham</Tag>
      </TagGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## ToggleButtonGroup example

```tsx
import {ToggleButtonGroup, ToggleButton, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['bold']));

  return (
    <>
      <ToggleButtonGroup
        aria-label="Text style"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <ToggleButton id="bold">
          <TextBold />
          <Text>Bold</Text>
        </ToggleButton>
        <ToggleButton id="italic">
          <TextItalic />
          <Text>Italic</Text>
        </ToggleButton>
        <ToggleButton id="underline">
          <TextUnderline />
          <Text>Underline</Text>
        </ToggleButton>
      </ToggleButtonGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['project']));

  return (
    <>
      <TreeView
        aria-label="Files"
        defaultExpandedKeys={['documents', 'photos', 'project']}
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({height: 250, width: 360, maxWidth: 'full'})}
      >
        <TreeViewItem id="documents" textValue="Documents">
          <TreeViewItemContent>Documents</TreeViewItemContent>
          <TreeViewItem id="project" textValue="Project">
            <TreeViewItemContent>Project</TreeViewItemContent>
            <TreeViewItem id="weekly-report" textValue="Weekly Report">
              <TreeViewItemContent>Weekly Report</TreeViewItemContent>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem id="photos" textValue="Photos">
          <TreeViewItemContent>Photos</TreeViewItemContent>
          <TreeViewItem id="image-1" textValue="Image 1">
            <TreeViewItemContent>Image 1</TreeViewItemContent>
          </TreeViewItem>
          <TreeViewItem id="image-2" textValue="Image 2">
            <TreeViewItemContent>Image 2</TreeViewItemContent>
          </TreeViewItem>
        </TreeViewItem>
      </TreeView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

### Select all

Some components support a checkbox to select all items in the collection, or a keyboard shortcut like <Keyboard>⌘ Cmd</Keyboard> + <Keyboard>A</Keyboard>. This represents a selection of all items in the collection, regardless of whether or not all items have been loaded from the network. For example, when using a component with infinite scrolling support, the user will be unaware that all items are not yet loaded. For this reason, it makes sense for select all to represent all items, not just the loaded ones.

When a select all event occurs, `onSelectionChange` is called with the string `"all"` rather than a set of selected keys. `selectedKeys`
and `defaultSelectedKeys` can also be set to `"all"` to programmatically select all items. The application must adjust its handling of bulk actions in this case to apply to the entire collection rather than only the keys available to it locally.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, ActionBar, ActionButton, Text, type Selection, type Key} from '@react-spectrum/s2';
import Delete from '@react-spectrum/s2/icons/Delete';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

const rows = [
  {name: 'Games', date: '6/7/2020', type: 'File folder'},
  {name: 'Program Files', date: '4/7/2021', type: 'File folder'},
  {name: 'bootmgr', date: '11/20/2010', type: 'System file'},
  {name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
];

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set<Key>());

  function performBulkAction(selectedKeys: Selection) {
    if (selectedKeys === 'all') {
      alert('Performing action on all items');
    } else {
      alert(`Performing action on selected items: ${[...selectedKeys].join(', ')}`);
    }
  }

  return (
    <div>
      <TableView
        aria-label="Files"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        renderActionBar={(selectedKeys) => (
          <ActionBar>
            <ActionButton onPress={() => performBulkAction(selectedKeys)}>
              <Delete />
              <Text>Delete</Text>
            </ActionButton>
          </ActionBar>
        )}
        styles={style({width: 'full', height: 200})}>
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
          <Column>Date Modified</Column>
        </TableHeader>
        <TableBody items={rows}>
          {item => (
            <Row id={item.name}>
              <Cell>{item.name}</Cell>
              <Cell>{item.type}</Cell>
              <Cell>{item.date}</Cell>
            </Row>
          )}
        </TableBody>
      </TableView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </div>
  );
}
```

## Single selection

In components which support multiple selection, you can limit the selection to a single item using the
`selectionMode` prop. This continues to accept `selectedKeys` and `defaultSelectedKeys` as a `Set`, but it will
only contain a single id at a time.

ComboBox, SegmentedControl, and Tabs only support single selection and use the `selectedKey` prop (singular) rather than `selectedKeys`.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['lion']));

  return (
    <>
      <CardView
        aria-label="Nature photos"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 360, maxWidth: 'full', height: 320})}
      >
        <AssetCard id="desert" textValue="Desert Sunset">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
          </CardPreview>
          <Content>
            <Text slot="title">Desert Sunset</Text>
            <Text slot="description">PNG • 2/3/2024</Text>
          </Content>
        </AssetCard>
        <AssetCard id="hiking" textValue="Hiking Trail">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
          </CardPreview>
          <Content>
            <Text slot="title">Hiking Trail</Text>
            <Text slot="description">JPEG • 1/10/2022</Text>
          </Content>
        </AssetCard>
        <AssetCard id="lion" textValue="Lion">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
          </CardPreview>
          <Content>
            <Text slot="title">Lion</Text>
            <Text slot="description">JPEG • 8/28/2021</Text>
          </Content>
        </AssetCard>
        <AssetCard id="mountain" textValue="Mountain Sunrise">
          <CardPreview>
            <Image src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
          </CardPreview>
          <Content>
            <Text slot="title">Mountain Sunrise</Text>
            <Text slot="description">PNG • 3/15/2015</Text>
          </Content>
        </AssetCard>
      </CardView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## ComboBox example

```tsx
import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKey, setSelectedKey] = useState<Key | null>('kangaroo');

  return (
    <>
      <ComboBox
        label="Favorite Animal"
        placeholder="Select an animal"
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
      >
        <ComboBoxItem id="koala">Koala</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="platypus">Platypus</ComboBoxItem>
        <ComboBoxItem id="eagle">Bald Eagle</ComboBoxItem>
        <ComboBoxItem id="bison">Bison</ComboBoxItem>
        <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
      </ComboBox>
      <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
    </>
  );
}
```

## Menu example

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['grid']));

  return (
    <>
      <MenuTrigger>
        <ActionButton>View</ActionButton>
        <Menu
          selectionMode="single"
          selectedKeys={selectedKeys}
          onSelectionChange={setSelectedKeys}
        >
          <MenuItem id="grid">Pixel grid</MenuItem>
          <MenuItem id="rulers">Rulers</MenuItem>
          <MenuItem id="layout">Layout guides</MenuItem>
          <MenuItem id="toolbar">Toolbar</MenuItem>
        </Menu>
      </MenuTrigger>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## SegmentedControl example

```tsx
import {SegmentedControl, SegmentedControlItem, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKey, setSelectedKey] = useState<Key>('month');

  return (
    <>
      <SegmentedControl
        aria-label="Time granularity"
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
      >
        <SegmentedControlItem id="day">Day</SegmentedControlItem>
        <SegmentedControlItem id="week">Week</SegmentedControlItem>
        <SegmentedControlItem id="month">Month</SegmentedControlItem>
        <SegmentedControlItem id="year">Year</SegmentedControlItem>
      </SegmentedControl>
      <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
    </>
  );
}
```

## SelectBoxGroup example

```tsx
import {SelectBoxGroup, SelectBox, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['aws']));

  return (
    <>
      <SelectBoxGroup
        aria-label="Cloud provider"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <SelectBox id="aws" textValue="AWS">
          <Server />
          <Text slot="label">Amazon Web Services</Text>
        </SelectBox>
        <SelectBox id="azure" textValue="Azure">
          <AlertNotice />
          <Text slot="label">Microsoft Azure</Text>
        </SelectBox>
        <SelectBox id="gcp" textValue="GCP">
          <StarFilled />
          <Text slot="label">Google Cloud Platform</Text>
        </SelectBox>
      </SelectBoxGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## TableView example

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

const rows = [
  {id: 'lettuce', name: 'Lettuce', type: 'Vegetable'},
  {id: 'tomato', name: 'Tomato', type: 'Vegetable'},
  {id: 'cheese', name: 'Cheddar', type: 'Cheese'},
  {id: 'tuna', name: 'Tuna salad', type: 'Salad'}
];

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));

  return (
    <>
      <TableView
        aria-label="Sandwich contents"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
        </TableHeader>
        <TableBody items={rows}>
          {item => (
            <Row>
              <Cell>{item.name}</Cell>
              <Cell>{item.type}</Cell>
            </Row>
          )}
        </TableBody>
      </TableView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## Tabs example

```tsx
import {Tabs, TabList, Tab, TabPanel, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKey, setSelectedKey] = useState<Key>('files');

  return (
    <>
      <Tabs
        aria-label="Tabs"
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
      >
        <TabList>
          <Tab id="home">Home</Tab>
          <Tab id="files">Files</Tab>
          <Tab id="settings">Settings</Tab>
        </TabList>
        <TabPanel id="home">Home content</TabPanel>
        <TabPanel id="files">Files content</TabPanel>
        <TabPanel id="settings">Settings content</TabPanel>
      </Tabs>
      <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
    </>
  );
}
```

## TagGroup example

```tsx
import {TagGroup, Tag, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));

  return (
    <>
      <TagGroup
        label="Sandwich contents"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Tag id="lettuce">Lettuce</Tag>
        <Tag id="tomato">Tomato</Tag>
        <Tag id="cheese">Cheese</Tag>
        <Tag id="tuna">Tuna Salad</Tag>
      </TagGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## ToggleButtonGroup example

```tsx
import {ToggleButtonGroup, ToggleButton, Text, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import AlignLeft from '@react-spectrum/s2/icons/AlignLeft';
import AlignCenter from '@react-spectrum/s2/icons/AlignCenter';
import AlignRight from '@react-spectrum/s2/icons/AlignRight';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['left']));

  return (
    <>
      <ToggleButtonGroup
        aria-label="Text alignment"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <ToggleButton id="left">
          <AlignLeft />
          <Text>Left</Text>
        </ToggleButton>
        <ToggleButton id="center">
          <AlignCenter />
          <Text>Center</Text>
        </ToggleButton>
        <ToggleButton id="right">
          <AlignRight />
          <Text>Right</Text>
        </ToggleButton>
      </ToggleButtonGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, type Selection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['documents']));

  return (
    <>
      <TreeView
        aria-label="Files"
        defaultExpandedKeys={['documents', 'photos']}
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({height: 250, width: 360, maxWidth: 'full'})}
      >
        <TreeViewItem id="documents" textValue="Documents">
          <TreeViewItemContent>Documents</TreeViewItemContent>
          <TreeViewItem id="project" textValue="Project">
            <TreeViewItemContent>Project</TreeViewItemContent>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem id="photos" textValue="Photos">
          <TreeViewItemContent>Photos</TreeViewItemContent>
          <TreeViewItem id="image1" textValue="Image 1">
            <TreeViewItemContent>Image 1</TreeViewItemContent>
          </TreeViewItem>
        </TreeViewItem>
      </TreeView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

## Item actions

In addition to selection, some collection components support item actions via the `onAction` prop. When nothing is selected, clicking, tapping, or pressing the <Keyboard>Enter</Keyboard> key triggers the item action. Items may be selected using the checkbox, or by pressing the <Keyboard>Space</Keyboard> key. When at least one item is selected, clicking or tapping a row toggles the selection.

On touch devices, actions are the primary tap interaction. Long pressing enters selection mode, which temporarily swaps the selection behavior to where tapping toggles the selection. Deselecting all items exits selection mode and reverts the selection behavior back to where tapping triggers the action. Keyboard behaviors are unaffected.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<CardView
  aria-label="Nature photos"
  selectionMode="multiple"
  styles={style({width: 'full', height: 320})}
>
  <AssetCard
    id="desert"
    textValue="Desert Sunset"
    /*- begin highlight -*/
    onAction={() => alert('Opening Desert Sunset')}>
    {/*- end highlight -*/}
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
    </CardPreview>
    <Content>
      <Text slot="title">Desert Sunset</Text>
      <Text slot="description">PNG • 2/3/2024</Text>
    </Content>
  </AssetCard>
  <AssetCard
    id="hiking"
    textValue="Hiking Trail"
    onAction={() => alert('Opening Hiking Trail')}>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
    </CardPreview>
    <Content>
      <Text slot="title">Hiking Trail</Text>
      <Text slot="description">JPEG • 1/10/2022</Text>
    </Content>
  </AssetCard>
  <AssetCard
    id="lion"
    textValue="Lion"
    onAction={() => alert('Opening Lion')}>
    <CardPreview>
      <Image src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
    </CardPreview>
    <Content>
      <Text slot="title">Lion</Text>
      <Text slot="description">JPEG • 8/28/2021</Text>
    </Content>
  </AssetCard>
</CardView>
```

## TableView example

```tsx
import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TableView
  aria-label="Table"
  selectionMode="multiple"
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  <TableBody>
    {/*- begin highlight -*/}
    <Row onAction={() => alert('Opening Games')}>
    {/*- end highlight -*/}
      <Cell>Games</Cell>
      <Cell>File folder</Cell>
      <Cell>6/7/2020</Cell>
    </Row>
    <Row onAction={() => alert('Opening Documents')}>
      <Cell>Documents</Cell>
      <Cell>File folder</Cell>
      <Cell>4/7/2021</Cell>
    </Row>
    <Row onAction={() => alert('Opening Photos')}>
      <Cell>Photos</Cell>
      <Cell>File folder</Cell>
      <Cell>11/20/2010</Cell>
    </Row>
  </TableBody>
</TableView>
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TreeView
  aria-label="Files"
  selectionMode="multiple"
  defaultExpandedKeys={['computer']}
  styles={style({height: 250, width: 360, maxWidth: 'full'})}>
  <TreeViewItem id="computer" textValue="My Computer">
    <TreeViewItemContent>My Computer</TreeViewItemContent>
    <TreeViewItem
      textValue="Games"
      /*- begin highlight -*/
      onAction={() => alert('Opening Games')} >
      {/*- end highlight -*/}
      <TreeViewItemContent>Games</TreeViewItemContent>
    </TreeViewItem>
    <TreeViewItem
      textValue="Documents"
      onAction={() => alert('Opening Documents')} >
      <TreeViewItemContent>Documents</TreeViewItemContent>
    </TreeViewItem>
    <TreeViewItem
      textValue="Photos"
      onAction={() => alert('Opening Photos')} >
      <TreeViewItemContent>Photos</TreeViewItemContent>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>
```

In dynamic collections, it may be more convenient to use the `onAction` prop at the collection level instead of on individual items. This receives the id of the pressed item.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const photos = [
  {id: 'desert', title: 'Desert Sunset', description: 'PNG • 2/3/2024', image: 'https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', width: 600, height: 400},
  {id: 'hiking', title: 'Hiking Trail', description: 'JPEG • 1/10/2022', image: 'https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', width: 600, height: 900},
  {id: 'lion', title: 'Lion', description: 'JPEG • 8/28/2021', image: 'https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', width: 600, height: 899}
];

<CardView
  aria-label="Nature photos"
  selectionMode="multiple"
  /*- begin highlight -*/
  onAction={id => alert(`Opening ${id}`)}
  /*- end highlight -*/
  styles={style({width: 'full', height: 320})}
  items={photos}>
  {photo => (
    <AssetCard id={photo.id} textValue={photo.title}>
      <CardPreview>
        <Image src={photo.image} width={photo.width} height={photo.height} />
      </CardPreview>
      <Content>
        <Text slot="title">{photo.title}</Text>
        <Text slot="description">{photo.description}</Text>
      </Content>
    </AssetCard>
  )}
</CardView>
```

## TableView example

```tsx
import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const files = [
  {id: 'games', name: 'Games', type: 'Folder', date: '6/7/2020'},
  {id: 'documents', name: 'Documents', type: 'Folder', date: '4/7/2021'},
  {id: 'photos', name: 'Photos', type: 'Folder', date: '11/20/2010'}
];

<TableView
  aria-label="Table"
  selectionMode="multiple"
  /*- begin highlight -*/
  onAction={id => alert(`Opening ${id}`)}
  /*- end highlight -*/
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  <TableBody items={files}>
    {item => (
      <Row>
        <Cell>{item.name}</Cell>
        <Cell>{item.type}</Cell>
        <Cell>{item.date}</Cell>
      </Row>
    )}
  </TableBody>
</TableView>
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const files = [
  {id: 'games', name: 'Games'},
  {id: 'documents', name: 'Documents'},
  {id: 'photos', name: 'Photos'}
];

<TreeView
  aria-label="Files"
  selectionMode="multiple"
  defaultExpandedKeys={['computer']}
  /*- begin highlight -*/
  onAction={id => alert(`Opening ${id}`)}
  /*- end highlight -*/
  styles={style({height: 250, width: 360, maxWidth: 'full'})}>
  <TreeViewItem id="computer" textValue="My Computer">
    <TreeViewItemContent>My Computer</TreeViewItemContent>
    <Collection items={files}>
      {item => (
        <TreeViewItem textValue={item.name}>
          <TreeViewItemContent>{item.name}</TreeViewItemContent>
        </TreeViewItem>
      )}
    </Collection>
  </TreeViewItem>
</TreeView>
```

## Disabled items

An item can be disabled with the `isDisabled` prop. By default, disabled items are not focusable, selectable, or actionable. When `disabledBehavior="selection"`, only selection is disabled.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<CardView
  aria-label="Pokemon"
  selectionMode="multiple"
  styles={style({width: 'full', height: 320})}
>
  <AssetCard id="charizard" textValue="Charizard">
    <CardPreview>
      <Image src="https://img.pokemondb.net/sprites/home/normal/2x/avif/charizard.avif" />
    </CardPreview>
    <Content>
      <Text slot="title">Charizard</Text>
      <Text slot="description">Fire, Flying • Level 67</Text>
    </Content>
  </AssetCard>
  <AssetCard id="blastoise" textValue="Blastoise">
    <CardPreview>
      <Image src="https://img.pokemondb.net/sprites/home/normal/2x/avif/blastoise.avif" />
    </CardPreview>
    <Content>
      <Text slot="title">Blastoise</Text>
      <Text slot="description">Water • Level 56</Text>
    </Content>
  </AssetCard>
  {/*- begin highlight -*/}
  <AssetCard id="venusaur" textValue="Venusaur" isDisabled>
  {/*- end highlight -*/}
    <CardPreview>
      <Image src="https://img.pokemondb.net/sprites/home/normal/2x/avif/venusaur.avif" />
    </CardPreview>
    <Content>
      <Text slot="title">Venusaur</Text>
      <Text slot="description">Grass, Poison • Level 83</Text>
    </Content>
  </AssetCard>
  <AssetCard id="pikachu" textValue="Pikachu">
    <CardPreview>
      <Image src="https://img.pokemondb.net/sprites/home/normal/2x/avif/pikachu.avif" />
    </CardPreview>
    <Content>
      <Text slot="title">Pikachu</Text>
      <Text slot="description">Electric • Level 100</Text>
    </Content>
  </AssetCard>
</CardView>
```

## ComboBox example

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox
  label="Pokemon"
  placeholder="Select a Pokemon"
  defaultSelectedKey="pikachu"
>
  <ComboBoxItem id="charizard">Charizard</ComboBoxItem>
  <ComboBoxItem id="blastoise">Blastoise</ComboBoxItem>
  {/*- begin highlight -*/}
  <ComboBoxItem id="venusaur" isDisabled>Venusaur</ComboBoxItem>
  {/*- end highlight -*/}
  <ComboBoxItem id="pikachu">Pikachu</ComboBoxItem>
</ComboBox>
```

## Menu example

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton} from '@react-spectrum/s2';

<MenuTrigger>
  <ActionButton>Pokemon</ActionButton>
  <Menu selectionMode="multiple" defaultSelectedKeys={['pikachu']}>
    <MenuItem id="charizard">Charizard</MenuItem>
    <MenuItem id="blastoise">Blastoise</MenuItem>
    {/*- begin highlight -*/}
    <MenuItem id="venusaur" isDisabled>Venusaur</MenuItem>
    {/*- end highlight -*/}
    <MenuItem id="pikachu">Pikachu</MenuItem>
  </Menu>
</MenuTrigger>
```

## SegmentedControl example

```tsx
import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';

<SegmentedControl aria-label="Time granularity" defaultSelectedKey="month">
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  {/*- begin highlight -*/}
  <SegmentedControlItem id="week" isDisabled>Week</SegmentedControlItem>
  {/*- end highlight -*/}
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
  <SegmentedControlItem id="year">Year</SegmentedControlItem>
</SegmentedControl>
```

## SelectBoxGroup example

```tsx
import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

<SelectBoxGroup
  aria-label="Cloud providers"
  selectionMode="multiple"
  defaultSelectedKeys={['aws']}
  styles={style({width: 'full'})}
>
  <SelectBox id="aws" textValue="AWS">
    <Server />
    <Text slot="label">Amazon Web Services</Text>
  </SelectBox>
  <SelectBox id="azure" textValue="Azure">
    <AlertNotice />
    <Text slot="label">Microsoft Azure</Text>
  </SelectBox>
  {/*- begin highlight -*/}
  <SelectBox id="gcp" textValue="GCP" isDisabled>
  {/*- end highlight -*/}
    <StarFilled />
    <Text slot="label">Google Cloud Platform</Text>
  </SelectBox>
</SelectBoxGroup>
```

## TableView example

```tsx
import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TableView
  aria-label="Pokemon"
  selectionMode="multiple"
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Level</Column>
  </TableHeader>
  <TableBody>
    <Row id="charizard">
      <Cell>Charizard</Cell>
      <Cell>Fire, Flying</Cell>
      <Cell>67</Cell>
    </Row>
    <Row id="blastoise">
      <Cell>Blastoise</Cell>
      <Cell>Water</Cell>
      <Cell>56</Cell>
    </Row>
    {/*- begin highlight -*/}
    <Row id="venusaur" isDisabled>
    {/*- end highlight -*/}
      <Cell>Venusaur</Cell>
      <Cell>Grass, Poison</Cell>
      <Cell>83</Cell>
    </Row>
    <Row id="pikachu">
      <Cell>Pikachu</Cell>
      <Cell>Electric</Cell>
      <Cell>100</Cell>
    </Row>
  </TableBody>
</TableView>
```

## Tabs example

```tsx
import {Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2';

<Tabs aria-label="Tabs" defaultSelectedKey="files">
  <TabList>
    <Tab id="home">Home</Tab>
    <Tab id="files">Files</Tab>
    {/*- begin highlight -*/}
    <Tab id="search" isDisabled>Search</Tab>
    {/*- end highlight -*/}
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="home">Home content</TabPanel>
  <TabPanel id="files">Files content</TabPanel>
  <TabPanel id="search">Search content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>
```

## TagGroup example

```tsx
import {TagGroup, Tag} from '@react-spectrum/s2';

<TagGroup
  label="Pokemon"
  selectionMode="multiple">
  <Tag>Charizard</Tag>
  <Tag>Blastoise</Tag>
  {/*- begin highlight -*/}
  <Tag isDisabled>Venusaur</Tag>
  {/*- end highlight -*/}
  <Tag>Pikachu</Tag>
</TagGroup>
```

## ToggleButtonGroup example

```tsx
import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2';
import TextBold from '@react-spectrum/s2/icons/TextBold';
import TextItalic from '@react-spectrum/s2/icons/TextItalic';
import TextUnderline from '@react-spectrum/s2/icons/TextUnderline';

<ToggleButtonGroup
  aria-label="Text style"
  selectionMode="multiple"
  defaultSelectedKeys={['bold']}
>
  <ToggleButton id="bold">
    <TextBold />
    <Text>Bold</Text>
  </ToggleButton>
  {/*- begin highlight -*/}
  <ToggleButton id="italic" isDisabled>
  {/*- end highlight -*/}
    <TextItalic />
    <Text>Italic</Text>
  </ToggleButton>
  <ToggleButton id="underline">
    <TextUnderline />
    <Text>Underline</Text>
  </ToggleButton>
</ToggleButtonGroup>
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<TreeView
  aria-label="Pokemon evolution"
  styles={style({height: 250, width: 360, maxWidth: 'full'})}
  defaultExpandedKeys={['bulbasaur', 'ivysaur']}
  selectionMode="multiple">
  <TreeViewItem id="bulbasaur" textValue="Bulbasaur">
    <TreeViewItemContent>Bulbasaur</TreeViewItemContent>
    <TreeViewItem id="ivysaur" textValue="Ivysaur">
      <TreeViewItemContent>Ivysaur</TreeViewItemContent>
      {/*- begin highlight -*/}
      <TreeViewItem id="venusaur" textValue="Venusaur" isDisabled>
        <TreeViewItemContent>Venusaur</TreeViewItemContent>
      </TreeViewItem>
      {/*- end highlight -*/}
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem id="charmander" textValue="Charmander">
    <TreeViewItemContent>Charmander</TreeViewItemContent>
    <TreeViewItem id="charmeleon" textValue="Charmeleon">
      <TreeViewItemContent>Charmeleon</TreeViewItemContent>
      <TreeViewItem id="charizard" textValue="Charizard">
        <TreeViewItemContent>Charizard</TreeViewItemContent>
      </TreeViewItem>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem id="squirtle" textValue="Squirtle">
    <TreeViewItemContent>Squirtle</TreeViewItemContent>
    <TreeViewItem id="wartortle" textValue="Wartortle">
      <TreeViewItemContent>Wartortle</TreeViewItemContent>
      <TreeViewItem id="blastoise" textValue="Blastoise">
        <TreeViewItemContent>Blastoise</TreeViewItemContent>
      </TreeViewItem>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>
```

In dynamic collections, it may be more convenient to use the `disabledKeys` prop at the collection level instead of `isDisabled` on individual items. This accepts a list of item ids that are disabled.

## CardView example

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const items = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

<CardView
  aria-label="Pokemon"
  selectionMode="multiple"
  disabledKeys={[3]}
  styles={style({width: 'full', height: 320})}
  items={items}>
  {item => (
    <AssetCard id={item.id} textValue={item.name}>
      <CardPreview>
        <Image src={`https://img.pokemondb.net/sprites/home/normal/2x/avif/${item.name.toLowerCase()}.avif`} />
      </CardPreview>
      <Content>
        <Text slot="title">{item.name}</Text>
        <Text slot="description">{item.type} • Level {item.level}</Text>
      </Content>
    </AssetCard>
  )}
</CardView>
```

## ComboBox example

```tsx
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

const items = [
  {id: 1, name: 'Charizard'},
  {id: 2, name: 'Blastoise'},
  {id: 3, name: 'Venusaur'},
  {id: 4, name: 'Pikachu'}
];

<ComboBox
  label="Pokemon"
  placeholder="Select a Pokemon"
  defaultSelectedKey={4}
  disabledKeys={[3]}
  items={items}>
  {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
</ComboBox>
```

## Menu example

```tsx
import {Menu, MenuTrigger, MenuItem, ActionButton} from '@react-spectrum/s2';

const items = [
  {id: 1, name: 'Charizard'},
  {id: 2, name: 'Blastoise'},
  {id: 3, name: 'Venusaur'},
  {id: 4, name: 'Pikachu'}
];

<MenuTrigger>
  <ActionButton>Pokemon</ActionButton>
  <Menu
    selectionMode="multiple"
    defaultSelectedKeys={[4]}
    disabledKeys={[3]}
    items={items}>
    {item => <MenuItem>{item.name}</MenuItem>}
  </Menu>
</MenuTrigger>
```

## SelectBoxGroup example

```tsx
import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

const items = [
  {id: 1, name: 'AWS', illustration: <Server />},
  {id: 2, name: 'Azure', illustration: <AlertNotice />},
  {id: 3, name: 'GCP', illustration: <StarFilled />}
];

<SelectBoxGroup
  aria-label="Cloud providers"
  selectionMode="multiple"
  defaultSelectedKeys={[1]}
  disabledKeys={[3]}
  styles={style({width: 'full'})}
  items={items}>
  {((item) => (
    <SelectBox textValue={item.name}>
      {item.illustration}
      <Text slot="label">{item.name}</Text>
    </SelectBox>
  ))}
</SelectBoxGroup>
```

## TableView example

```tsx
import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

let items = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

<TableView
  aria-label="Pokemon"
  disabledKeys={[3]}
  selectionMode="multiple"
  styles={style({width: 'full'})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Level</Column>
  </TableHeader>
  <TableBody items={items}>
    {item => (
      <Row>
        <Cell>{item.name}</Cell>
        <Cell>{item.type}</Cell>
        <Cell>{item.level}</Cell>
      </Row>
    )}
  </TableBody>
</TableView>
```

## TagGroup example

```tsx
import {TagGroup, Tag} from '@react-spectrum/s2';

const items = [
  {id: 1, name: 'Charizard'},
  {id: 2, name: 'Blastoise'},
  {id: 3, name: 'Venusaur'},
  {id: 4, name: 'Pikachu'}
];

<TagGroup
  label="Pokemon"
  selectionMode="multiple"
  disabledKeys={[3]}
  items={items}>
  {item => <Tag>{item.name}</Tag>}
</TagGroup>
```

## TreeView example

```tsx
import {TreeView, TreeViewItem, TreeViewItemContent, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

type PokemonItem = {
  id: number;
  name: string;
  type: string;
  level: number;
  children?: PokemonItem[];
};

let items: PokemonItem[] = [
  {id: 1, name: 'Bulbasaur', type: 'Grass', level: 14, children: [
    {id: 2, name: 'Ivysaur', type: 'Grass', level: 30, children: [
      {id: 3, name: 'Venusaur', type: 'Grass', level: 83}
    ]}
  ]},
  {id: 4, name: 'Charmander', type: 'Fire', level: 16, children: [
    {id: 5, name: 'Charmeleon', type: 'Fire', level: 32, children: [
      {id: 6, name: 'Charizard', type: 'Fire, Flying', level: 67}
    ]}
  ]},
  {id: 7, name: 'Squirtle', type: 'Water', level: 8, children: [
    {id: 8, name: 'Wartortle', type: 'Water', level: 34, children: [
      {id: 9, name: 'Blastoise', type: 'Water', level: 56}
    ]}
  ]}
];

<TreeView
  aria-label="Pokemon evolution"
  styles={style({height: 250, width: 360, maxWidth: 'full'})}
  defaultExpandedKeys={[1, 2]}
  selectionMode="multiple"
  disabledKeys={[3]}
  items={items}>
  {function renderItem(item) {
    return (
      <TreeViewItem textValue={item.name}>
        <TreeViewItemContent>{item.name}</TreeViewItemContent>
        <Collection items={item.children}>
          {renderItem}
        </Collection>
      </TreeViewItem>
    )
  }}
</TreeView>
```

---

# Source: https://react-spectrum.adobe.com/style-macro.md

# Style Macro

The `style` macro supports a constrained set of values per property that conform to Spectrum 2.

## Colors

All Spectrum 2 color tokens are available across color properties (e.g., `backgroundColor`, `color`, `borderColor`).

<StyleMacroProperties properties={getPropertyDefinitions('color')}/>

## Dimensions

<StyleMacroProperties properties={getPropertyDefinitions('dimensions')}/>

## Text

Spectrum 2 typography can be applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.

```tsx
<main>
  <h1 className={style({font: 'heading-xl'})}>Heading</h1>
  <p className={style({font: 'body'})}>Body</p>
  <ul className={style({font: 'body-sm', fontWeight: 'bold'})}>
    <li>List item</li>
  </ul>
</main>
```

<StyleMacroProperties properties={getPropertyDefinitions('text')}/>

## Effects

<StyleMacroProperties properties={getPropertyDefinitions('effects')}/>

## Layout

<StyleMacroProperties properties={getPropertyDefinitions('layout')}/>

## Misc

<StyleMacroProperties properties={getPropertyDefinitions('misc')}/>

## Conditions

<StyleMacroProperties
  properties={getPropertyDefinitions('conditions')}
  sort={false}
/>

---

# Source: https://react-spectrum.adobe.com/styling.md

# Styling

Learn how to use the  macro to apply Spectrum tokens directly in your components with type-safe autocompletion.

## Style macro

The `style` macro runs at build time and returns a class name that applies Spectrum 2 design tokens (colors, spacing, sizing, typography, etc.). See the [reference](style-macro.md) for a full list of supported values.

```tsx
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({backgroundColor: 'red-400', color: 'white'})}>
  {/* ... */}
</div>
```

Atomic output keeps your bundle small and scales well as your app grows. Each property/value pair is emitted once and reused everywhere.

```css
.bJ { background-color: #ffbcb4 }
.ac { color: #fff }
```

Colocating styles with your component code means:

* Develop more efficiently – no switching files or writing selectors.
* Refactor with confidence – changes are isolated; deleting a component removes its styles.

<InlineAlert variant="informative">
  <Heading>Important Note</Heading>

  <Content>
    Due to the atomic nature of the generated CSS rules, it is strongly recommended that you follow the CSS optimization guide listed [below](#css-optimization).
    Without these optimizations, the generated CSS may contain duplicate rules that affect bundle size and debugging.
  </Content>
</InlineAlert>

## Spectrum components

The `styles` prop accepts a limited set of CSS properties, including layout, spacing, sizing, and positioning. Other styles such as colors and internal padding cannot be customized within Spectrum components.

```tsx
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Button} from '@react-spectrum/s2';

<Button styles={style({marginStart: 8})}>Edit</Button>
```

### Supported CSS properties

* `margin`
* `marginStart`
* `marginEnd`
* `marginTop`
* `marginBottom`
* `marginX`
* `marginY`
* `width`
* `minWidth`
* `maxWidth`
* `flexGrow`
* `flexShrink`
* `flexBasis`
* `justifySelf`
* `alignSelf`
* `order`
* `gridArea`
* `gridRow`
* `gridRowStart`
* `gridRowEnd`
* `gridColumn`
* `gridColumnStart`
* `gridColumnEnd`
* `position`
* `zIndex`
* `top`
* `bottom`
* `inset`
* `insetX`
* `insetY`
* `insetStart`
* `insetEnd`
* `visibility`

## Conditional styles

Define conditional values such as media queries, UI states (e.g. hover, press), and style variants as objects. Conditional values are mutually exclusive: the last matching condition always wins.

```tsx
<div
  className={style({
    padding: {
      default: 8,
      lg: 32,
      '@media (min-width: 2560px)': 64
    }
  })}
/>
```

In the example above, the keys of the nested object now map out the "conditions" that govern the padding of the `div`. This translates to the following:

* If the viewport is larger than `2560px`, the padding is `64px`.
* Else if the viewport matches the `lg` [breakpoint](style-macro.md#conditions) (`1024px`), the padding is `32px`.
* Otherwise, the padding is `8px`.

Conditions are mutually exclusive and ordered. The macro uses CSS cascade layers so the last matching condition wins without specificity issues.

### Runtime conditions

When runtime conditions are detected (e.g., variants, UI states), the macro returns a function to resolve styles at runtime.

```tsx
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const styles = style({
  backgroundColor: {
    variant: {
      primary: 'accent',
      secondary: 'neutral'
    }
  }
});

function MyComponent({variant}: {variant: 'primary' | 'secondary'}) {
  return <div className={styles({variant})} />
}
```

Boolean conditions starting with `is` or `allows` can be used directly without nesting:

```tsx
const styles = style({
  backgroundColor: {
    default: 'gray-100',
    isSelected: 'gray-900',
    allowsRemoving: 'gray-400'
  }
});

<div className={styles({isSelected: true})} />
```

Runtime conditions work well with render props in React Aria Components. If you inline styles, you’ll get autocomplete for available conditions.

```tsx
import {Checkbox} from 'react-aria-components';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Checkbox
  className={style({
    backgroundColor: {
      default: 'gray-100',
      isHovered: 'gray-200',
      isSelected: 'gray-900'
    }
  })}
/>
```

### Nesting conditions

Nest conditions to apply styles when multiple conditions are true. Conditions at the same level are mutually exclusive; order determines precedence.

```tsx
const styles = style({
  backgroundColor: {
    default: 'gray-25',
    isSelected: {
      default: 'neutral',
      isEmphasized: 'accent',
      forcedColors: 'Highlight',
      isDisabled: {
        default: 'gray-400',
        forcedColors: 'GrayText'
      }
    }
  }
});

<div className={styles({isSelected, isEmphasized, isDisabled})} />
```

## Reusing styles

Extract common styles into constants and spread them into `style` calls within the same file.

```tsx
// component.tsx
const horizontalStack = {
  display: 'flex',
  alignItems: 'center',
  columnGap: 8
} as const;

const styles = style({
  ...horizontalStack,
  columnGap: 4
});
```

Create custom utilities by defining your own macros as functions in a separate file.

```ts
// style-utils.ts
export function horizontalStack(gap: number) {
  return {
    display: 'flex',
    alignItems: 'center',
    columnGap: gap
  } as const;
}
```

Usage:

```tsx
// component.tsx
import {horizontalStack} from './style-utils' with {type: 'macro'};
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const styles = style({
  ...horizontalStack(4),
  backgroundColor: 'base'
});
```

### Built-in utilities

Use `focusRing()` to add the standard Spectrum focus ring.

```tsx
import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Button} from '@react-spectrum/s2';

const buttonStyle = style({
  ...focusRing(),
  // ...other styles
});

<Button styles={buttonStyle}>Press me</Button>
```

## Setting CSS variables

CSS variables can be directly defined in a `style` macro, allowing child elements to then access them in their own styles.
A `type` should be provided to specify the CSS property type the `value` represents.

```tsx
const parentStyle = style({
  '--rowBackgroundColor': {
    type: 'backgroundColor',
    value: 'gray-400'
  }
});

const childStyle = style({
  backgroundColor: '--rowBackgroundColor'
});
```

## CSS optimization

The `style` macro relies on CSS bundling and minification for optimal output. Without these optimizations, the generated CSS may contain duplicate rules that affect bundle size and debugging.
Follow these best practices:

* Ensure styles are extracted into a CSS bundle; do not inject at runtime with `<style>` tags.
* Use a CSS minifier like `lightningcss` to deduplicate common rules (consider in dev for easier debugging).
* Bundle all CSS for S2 components and style macros into a single CSS bundle rather than code splitting to avoid duplicate rules across chunks.

See the [getting started guide](getting-started.md) to learn how to setup your framework or bundler.

## CSS Resets

CSS resets are strongly discouraged. Global CSS selectors can unintentionally affect elements that were not intended to have their styles be modified, leading to style clashes. Since Spectrum 2 uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers), global CSS outside a `@layer` will override S2's CSS. Therefore, if you cannot remove your CSS reset, it must be placed in a lower layer. This can be done by declaring your reset layer before the `_` layer used by S2.

```css
/* App.css */
@layer reset, _;
@import "reset.css" layer(reset);
```

## Custom components

If you want to build custom components that follow Spectrum styling, you can use the `style` macro with [React Aria Components](react-aria:.md).

```tsx
import {Checkbox} from 'react-aria-components';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<Checkbox
  className={style({
    backgroundColor: {
      default: 'gray-100',
      isHovered: 'gray-200',
      isSelected: 'gray-900'
    }
  })}
/>
```

## Developer tools

These tools improve the developer experience when using style macros:

* The [atomic-css-devtools](https://github.com/astahmer/atomic-css-devtools) extension presents an inspected element's atomic CSS rules
  in a non-atomic format, making it easier to scan.

* This [sandbox](https://codesandbox.io/p/devbox/react-spectrum-s2-style-macro-template-h6fpsq) is preconfigured to support React Spectrum S2, React Aria Components, and
  the `style` macros for quick prototyping.

* If you are using Cursor, we offer a set of [Cursor rules](https://github.com/adobe/react-spectrum/blob/main/rules/style-macro.mdc) to use when developing with style macros. Additionally,
  we have MCP servers for [React Aria](react-aria:mcp.md) and [React Spectrum](mcp.md) respectively that interface with the docs.

## FAQ

<S2FAQ/>

---

# Source: https://react-spectrum.adobe.com/testing.md

# Source: https://react-spectrum.adobe.com/TreeView/testing.md

# Source: https://react-spectrum.adobe.com/Tabs/testing.md

# Source: https://react-spectrum.adobe.com/TableView/testing.md

# Source: https://react-spectrum.adobe.com/RadioGroup/testing.md

# Source: https://react-spectrum.adobe.com/Picker/testing.md

# Source: https://react-spectrum.adobe.com/Menu/testing.md

# Source: https://react-spectrum.adobe.com/Dialog/testing.md

# Source: https://react-spectrum.adobe.com/ComboBox/testing.md

# Source: https://react-spectrum.adobe.com/CheckboxGroup/testing.md

# Testing CheckboxGroup

## Test utils

`@react-spectrum/test-utils` offers common checkbox group interaction testing utilities. Install it with your preferred package manager.

```bash
npm install @react-spectrum/test-utils --dev
```

<InlineAlert variant="notice">
  <Heading>Requirements</Heading>
  <Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
</InlineAlert>

Initialize a `User` object at the top of your test file, and use it to create a `CheckboxGroup` pattern tester in your test cases. The tester has methods that you can call within your test to query for specific subcomponents or simulate common interactions.

```ts
// CheckboxGroup.test.ts
import {render} from '@testing-library/react';
import {User} from '@react-spectrum/test-utils';

let testUtilUser = new User({
  interactionType: 'mouse',
  advanceTimer: jest.advanceTimersByTime
});
// ...

it('CheckboxGroup can select multiple checkboxes', async function () {
  // Render your test component/app and initialize the checkbox group tester
  let {getByTestId} = render(
    <CheckboxGroup data-testid="test-checkboxgroup">
    ...
    </CheckboxGroup>
  );
  let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0);

  await checkboxGroupTester.toggleCheckbox({checkbox: 0});
  expect(checkboxGroupTester.checkboxes[0]).toBeChecked();
  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);

  await checkboxGroupTester.toggleCheckbox({checkbox: 4});
  expect(checkboxGroupTester.checkboxes[4]).toBeChecked();
  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
});
```

## API

### User

### CheckboxGroupTester

## Testing FAQ

<PatternTestingFAQ patternName="checkbox group"/>

---

# Source: https://react-spectrum.adobe.com/releases/v0-1-0.md

# v0.1.0

Version 0.1.0 introduces the first version of Spectrum 2, including new Badge, ComboBox, Meter, and Picker components.

## New components

* [Badge](../Badge.md)
* [ComboBox](../ComboBox.md)
* [Meter](../Meter.md)
* [Picker](../Picker.md)

## Updates

* [TagGroup](../TagGroup.md) now supports avatars, images, error message and description help text, and improved hover/focus styling
* Updated React Aria Components to v1.2.0
* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`.
* The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.

See the updated [API changelog](../migrating.md) for a full list of changes since RSP v3.

---

# Source: https://react-spectrum.adobe.com/releases/v0-10-0.md

# v0.10.0

Version 0.10.0 introduces a new font for Spectrum 2: Adobe Clean Spectrum VF, along with new date and time components including Calendar, DatePicker, DateRangePicker, and TimeField. This release also includes various component improvements and bug fixes.

## Font update

This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.

If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [Getting Started](../getting-started.md#optimizing-full-page-apps) guide for details.

## New Components

* [Calendar](../Calendar.md)
* [RangeCalendar](../RangeCalendar.md)
* [DateField](../DateField.md)
* [DatePicker](../DatePicker.md)
* [DateRangePicker](../DateRangePicker.md)
* [TimeField](../TimeField.md)

## Updates

* [CardView](../CardView.md): Fix ActionBar from not scrolling
* [ActionButton](../ActionButton.md): Fix avatar-only ActionButtons to have square dimensions
* [Tabs](../Tabs.md): Improve selection indicator animation, fix collapsed tabs
* [ProgressCircle](../ProgressCircle.md): Add track outline in High Contrast Mode
* [Switch](../Switch.md): Fix the toggle in RTL locales
* [TreeView](../TreeView.md): Support async loading

---

# Source: https://react-spectrum.adobe.com/releases/v0-11-0.md

# v0.11.0

Version 0.11.0 introduces the new SelectBoxGroup component (alpha), fixes ComboBox empty state rendering, improves Picker dropdown styling, and adds support for custom tab layouts with collapse behavior.

## New Components

* [SelectBoxGroup](../SelectBoxGroup.md)

## Updates

* [ComboBox](../ComboBox.md): Fix empty state rendering when no items match the current query
* [Picker](../Picker.md): Fix erroneous dropdown outline when opening the Picker via click
* [Tabs](../Tabs.md): Support collapse behavior on Tabs when customizing the layout

---

# Source: https://react-spectrum.adobe.com/releases/v0-12-0.md

# v0.12.0

Version 0.12.0 adds pending states to ActionButton, avatar support in ComboBox and Picker, Dialog XL size, and Popover styling improvements. This release also includes RTL fixes, placeholder support across components, and various component enhancements.

## Updates

* [ActionButton](../ActionButton.md): Add pending state
* [ColorSlider](../ColorSlider.md): Fix `ColorLoupe` position in RTL locales
* [ComboBox](../ComboBox.md): Support avatars and onAction
* [CustomDialog](../Dialog.md#custom-dialog): Support custom widths
* [Dialog](../Dialog.md): Add XL size
* [Disclosure](../Disclosure.md): Add animation to disclosure
* [InlineAlert](../InlineAlert.md): Support heading-less Inline Alerts
* [Picker](../Picker.md): Support multiple selection and avatars
* [Tags](../TagGroup.md): Fix Tag collapse calculation for removable tags
* [Tooltip](../Tooltip.md): Prevent text overflow by default
* Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
* Apply `page.css` styles to the Shadow DOM

## Popover Styling Updates

The Popover component has been updated to better support custom styling. To
remove the preset padding, use the new `padding` prop and wrap your Popover content
in a custom div with your desired styling.

---

# Source: https://react-spectrum.adobe.com/releases/v0-2-0.md

# v0.2.0

Version 0.2.0 introduces new color and range components, adds ESBuild starter, updates InlineAlert iconography, and includes CSS processing updates.

## New components

* [Breadcrumbs](?path=/docs/breadcrumbs--docs)
* [Contextual Help](?path=/docs/contextualhelp--docs)
* [ColorArea](?path=/docs/colorarea--docs)
* [ColorField](?path=/docs/colorfield--docs)
* [ColorSlider](?path=/docs/colorslider--docs)
* [ColorSwatch](?path=/docs/colorswatch--docs)
* [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
* [ColorWheel](?path=/docs/colorwheel--docs)
* [RangeSlider](?path=/docs/rangeslider--docs)
* [Slider](?path=/docs/slider--docs)

## Updates

* [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) added
* InlineAlert iconography updated
* ContextualHelp added to all form field components
* Fixed custom widths for field components
* Spectrum tokens updated
* CSS processing updated so output size is smaller

See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.

---

# Source: https://react-spectrum.adobe.com/releases/v0-3-0.md

# v0.3.0

Version 0.3.0 introduces NumberField, AlertDialog, and Tabs components, along with new linear and gradient illustrations. This release includes TagGroup enhancements, updated workflow icons with name changes, and comprehensive translations for all components.

## New components

* [NumberField](../NumberField.md)
* [AlertDialog](../Dialog.md#alertdialog)
* [Linear and gradient illustrations](../illustrations.md)
* [AvatarGroup](../AvatarGroup.md)
* [Tabs](../Tabs.md)

## Updates

* Add collapse and action support to TagGroup
* Add support for new Adobe Clean variable font
* Updated [workflow icons](../icons.md) – **PLEASE NOTE**: some icons changed names in this release.
* Add CLI and Parcel plugins to build custom icons and illustrations
* Add translations for all components
* Add slot contexts to all S2 components
* Fix menu z-index
* Fix overlay trigger press scaling and menu description color
* Fix ComboBox and NumberField custom width
* Fix padding on fields with no visible label
* Add ContextualHelp Storybook stories to components missing them

---

# Source: https://react-spectrum.adobe.com/releases/v0-4-0.md

# v0.4.0

Version 0.4.0 introduces six new components including Accordion, Card, CardView, and TableView. This release includes ProgressBar and Badge enhancements, Button pending state support, and various component improvements.

## New components

* [Accordion](../Accordion.md)
* [Disclosure](../Disclosure.md)
* [Card](../Card.md)
* [CardView](../CardView.md)
* [SegmentedControl](../SegmentedControl.md)
* [TableView](../TableView.md)

## Updates

* [ProgressBar](../ProgressBar.md): Support side label, update edges to be rounded, and support custom widths
* [ProgressCircle](../ProgressCircle.md): Update edges to be rounded
* [Badge](../Badge.md): Add subtle and outline fill variants
* [Breadcrumbs](../Breadcrumbs.md): Add collapse behavior
* [Button](../Button.md): Add support for pending state
* Update Spectrum Tokens to v46

## Codemods

* Handle legacy Link API
* Remove Section and Items imports if not used elsewhere in file
* Support Badge
* Support Well
* Support icons
* Fix links and install step

---

# Source: https://react-spectrum.adobe.com/releases/v0-5-0.md

# v0.5.0

Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four new dialog components: Dialog, FullscreenDialog, CustomDialog, and Popover. This release also improves style macro documentation and adds support for arbitrary pixel sizing.

In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:

* [Dialog](../Dialog.md) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
* [FullscreenDialog](../Dialog.md#fullscreendialog) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
* [CustomDialog](../Dialog.md#customdialog) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
* [Popover](../Popover.md) – Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.

In addition, several DialogTrigger props have moved to the above children:

* `type` is removed. Use one of the above components instead.
* `isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
* `isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
* `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover

We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
[colors](../style-macro.md#colors) and [typography](../style-macro.md#text) have been added to help clarify
these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](../style-macro.md#dimensions)
for more information. Finally, documentation on [optimizing CSS bundling](../styling.md#css-optimization) have also been
added to help you generate a properly optimized output when using the bundler of your choice.

## New components

* [ActionButtonGroup](../ActionButtonGroup.md)
* [CloseButton](../Dialog.md#customdialog)
* [CustomDialog](../Dialog.md#customdialog)
* [FullscreenDialog](../Dialog.md#fullscreendialog)
* [Popover](../Popover.md)
* [ToggleButtonGroup](../ToggleButtonGroup.md)

## Updates

* [Accordion](../Accordion.md): Add support for adjacent sibling elements in header
* [ActionButton](../ActionButton.md): Add support for Avatars in ActionButtons
* [Dialog](../Dialog.md): See above for a summary of the changes to Dialog and Dialog adjacent components.
* [Disclosure](../Disclosure.md): Add support for adjacent sibling elements in header
* [DropZone](../DropZone.md): Add t-shirt sizing
* [Menu](../Menu.md): Add support for separate user defined selection modes per MenuSection
* [Meter](../Meter.md): Add label positioning support
* Update Spectrum Tokens to v53
* Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)

## Codemods

* Support Dialog updates
* Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
* Support arbitrary pixel sizing for style macro sizing properties
* Update S1 to S2 icon mapping

---

# Source: https://react-spectrum.adobe.com/releases/v0-6-0.md

# v0.6.0

Version 0.6.0 introduces the ActionBar component and adds staticColor="auto" support to multiple components. This release includes Button gradient variants, Menu improvements, and various component fixes.

## New Components

* [ActionBar](../ActionBar.md)

## Updates

* [Button](../Button.md): Add `genai` and `premium` gradient variants
* [Menu](../Menu.md): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
* Added `staticColor="auto"` option to [ActionButton](../ActionButton.md), [ToggleButton](../ToggleButton.md), [Divider](../Divider.md), [Meter](../Meter.md), [ProgressBar](../ProgressBar.md), and [Link](../Link.md)
* [ContextualHelp](../ContextualHelp.md): Fix alignment with field labels
* [InlineAlert](../InlineAlert.md): Remove maximum width
* [CheckboxGroup](../CheckboxGroup.md): Fix `isRequired` within a Form

## Codemods

* Added TableView codemods

---

# Source: https://react-spectrum.adobe.com/releases/v0-7-0.md

# v0.7.0

Version 0.7.0 introduces the TreeView component and includes important CSS updates to fix Safari issues. This release removes all: revert-layer from the style macro and includes Badge improvements, Tabs collapse behavior, and updated codemods.

## New Components

* [TreeView](../TreeView.md)

## Updates

* [Badge](../Badge.md): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
* [CardView](../CardView.md): Fix styling when using `renderActionBar`
* Image: Add `fetchPriority` prop
* [Menu](../Menu.md): Fix menu item's focus rings from exceeding popover boundaries
* [Tabs](../Tabs.md): Add collapse behavior
* Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
* Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.

## Codemods

* Update S2 icon migration map
* Handle margin/padding shorthands in style props codemod

## Important CSS update

In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.

To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See the [Getting Started](../styling.md#css-resets) guide for more information.

**If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.

---

# Source: https://react-spectrum.adobe.com/releases/v0-8-0.md

# v0.8.0

Version 0.8.0 introduces NotificationBadge and Toast (alpha) components, along with updates to Disclosure design sizing. This release also includes various component improvements and new exports.

## New Components

* [NotificationBadge](../ActionButton.md)
* [Toast](../Toast.md) (alpha)

## Updates

* Pass DOM Props to ButtonGroup
* Prevent Dividers from growing or shrinking in a flex container by default
* Export Autocomplete
* Export SortDescriptor type

## Disclosure Design updates

Spectrum has updated the S disclosure design. As a result, all other sizes (M, L, XL) now map to one size smaller than before. See [PR](https://github.com/adobe/react-spectrum/pull/8006) for details.

---

# Source: https://react-spectrum.adobe.com/releases/v0-9-0.md

# v0.9.0

Version 0.9.0 adds virtualization and async loading support to ComboBox and Picker, updates Dialog sizes, and introduces important TypeScript changes for UNSAFE\_className. This release also includes significant style macro updates.

## Updates

* [Combobox](../ComboBox.md): Support for virtualization and async loading
* [Dialog](../Dialog.md): Update sizes
* [Picker](../Picker.md): Support for virtualization and async loading
* [Popover](../Popover.md): Add `triggerRef` prop
* [TableView](../TableView.md): Support custom menus in columns
* Apply `position: relative` to Radio and Checkbox to prevent layout jumps

## UNSAFE\_className Typescript Error

Style macros passed to `UNSAFE_className` will now result in a TypeScript error. This is not allowed because `UNSAFE_className` is appended to the component's own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.

We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](react-aria:.md) with the [S2 style macro](../styling.md#supported-css-properties) to create custom components. [Safe style properties](../styling.md#supported-css-properties) can be passed to the `styles` prop of an S2 component.

## Style macro updates

We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.

We also made some changes to the available style macro values.

* Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the `space()` macro
* Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
* Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
* Used rems and touch scaling for icon sizes, and added t-shirt size prop
* Added support for percentages and [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
* Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
* Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
* Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-keywords) like `inherit`
* Colors no longer include default hover/press/focus states (e.g. `backgroundColor: 'accent'`). Use the `baseColor` macro instead.
* The `control` value has been removed from `fontSize`, `borderRadius`, `width`, `height`, and other sizing properties. Use explicit values for each t-shirt size instead.
* Fixed spelling of `disc` in `listStyleType` (was `dist`)

---

# Source: https://react-spectrum.adobe.com/releases/v0-9-1.md

# v0.9.1

Version 0.9.1 is a patch release that fixes focus visible styles in Button and TagGroup, updates ContextualHelp width, and improves Tabs selection indicator behavior.

## Updates

* [Button](../Button.md): Fix focus visible styles from being applied on standard focus
* [ContextualHelp](../ContextualHelp.md): Update width to match Spectrum designs
* [Tabs](../Tabs.md): Update selection indicator when tab text changes
* [TagGroup](../TagGroup.md): Fix focus visible styles from being applied on standard focus

---

# Source: https://react-spectrum.adobe.com/releases/v1-0-0.md

# v1.0.0

Welcome to Spectrum 2 v1.0! This milestone marks the first stable version of our implementation of the updated [Adobe design system](https://s2.spectrum.adobe.com/). Spectrum 2 delivers modern, refined components with better accessibility, performance, and styling flexibility using [style macros](../styling.md). Use our updated search to browse the new components, or visit our [migration guide](../migrating.md) to learn how to upgrade.

Along with this stable version, we have overhauled our documentation website for both React Spectrum and React Aria. The rewritten content is more concise and makes greater use of interactive examples using prop controls. Code examples have been refined to highlight what matters most, and real-world app examples show how all these pieces come together. The new search experience includes image previews and category and library filtering, helping you find what you need faster. There are more component examples, new guides, migration tools, AI-friendly page markdown, and MCP servers, all wrapped in a fresh new look!

As always, this release includes new features and bug fixes, including support for inline editing for TableView. Thank you to all our contributors in this release and from this past year. We hope you enjoy the updates, see you in 2026!

## Enhancements

* Accordion
  * Update Accordion to use AccordionItem - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9212)
* Image
  * Support conditional images - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9335)
* TableView
  * Support TableView inline editing - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/8754), [PR](https://github.com/adobe/react-spectrum/pull/9002), [PR](https://github.com/adobe/react-spectrum/pull/8983), [PR](https://github.com/adobe/react-spectrum/pull/9108)
  * Update TableView and TreeView to match updated Spectrum designs  - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9249)
* Miscellaneous
  * Add style macro properties to Spectrum 2 MCP server - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9336)

## Fixes

* ActionButton
  * Fix XL Avatar size in ActionButton - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9149)
  * Update ActionButton to use grid area to position NotificationBadge - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/9303)
  * Disable all ActionButtons when `isDisabled` is applied to ActionButtonGroup - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/9307)
* DateField
  * DateField should horizontally scroll when there is not enough room to render - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/9302)
* Dialog
  * Update header and heading font in Dialog - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/9277)
* FieldGroup
  * Forward focus to TextArea in FieldGroup - [@tmvnkr](https://github.com/tmvnkr) - [PR](https://github.com/adobe/react-spectrum/pull/9037)
* Form
  * Fix passing `UNSAFE_className` and `UNSAFE_style` - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)
* LinkButton
  * Support GenAI and Premium variants - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9272)
* Modal
  * Fix Modal position - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9007)
* NumberField
  * Prevent screen from shifting when pressing spin buttons on mobile - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/9281), [PR](https://github.com/adobe/react-spectrum/pull/9342)
  * Inherit Form props - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)
* Picker
  * Make `isQuiet` prop public - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/9320)
  * Remove `allowEmptyCollection` prop - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9272)
* RangeCalendar
  * Update `isInvalid` styling - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9313)
  * Fix style of date range when setting `firstDayOfWeek` prop - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/9340)
* SelectBoxGroup
  * Prevent SelectBox from overflowing container on mobile - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9272)
  * Remove checkboxes from single select SelectBoxGroup- [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9272)
* TableView
  * Fix positioning of sort icon in `end` aligned TableView columns - [@chirokas](https://github.com/chirokas) - [PR](https://github.com/adobe/react-spectrum/pull/9246)
  * Update text colors to match new Spectrum design - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9280)
* TagGroup
  * Clear Button context provider on TagGroup items so they don't throw when in a CustomDialog - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9051)
* TextArea
  * Properly focus text area when tapping on invalid icon on mobile - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9073)
* Toast
  * Fix long words from overflowing Toast container - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/8962)
  * Remove type from view transitions - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9088)
  * Remove `UNSTABLE` from Toast - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/9311)
  * Improve animation issues in Safari  - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)
* TreeView
  * Update text colors to match new Spectrum design-  [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9280)
* Miscellaneous
  * Ensure required icon has label when field is required - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9177)
  * Support `fontSize` overrides via style macros - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9248)
  * Override default React Aria class names for all Spectrum 2 components - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/9245)
  * Update comment for `staticColor` prop - [@devonlacross](https://github.com/devonlacross) - [PR](https://github.com/adobe/react-spectrum/pull/9052)
  * Update fonts for Arabic and Hebrew - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9187)
  * Add `containerType` and `containerName` to style macro - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)
  * Fix icons not setting default fill color - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)
  * Add `use client` to Illustrations - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9271)