## Import

```jsx
import { ToggleButton, ToggleButtonGroup } from "@cfa/react-core";
```

## Live Editor

```jsx
<ToggleButton>
  <CalendarIcon />
</ToggleButton>
```

## Guidelines

### When to use

- ToggleButton is for a binary on/off action whose selected state persists, such as filters, view modes, and text formatting.

### Do

- Use clear, simple iconography or short text labels. Keep the option count low so the set does not read like navigation.
- For a filter set, multiple ToggleButtons may stay selected at once when multi-select filters are needed.
- For a view mode switcher, treat it as a single-select group with exactly one selected option, such as list versus grid.
- Persist filter or view-mode selected state in the URL or app state when the choice should survive reload or sharing.
- Provide an `aria-label` on an icon-only view-mode group so the control has a name without visible text.

### Avoid

- Using ToggleButton for a one-shot action. Use Button.
- Using ToggleButton for mutually exclusive named options that are not on or off. Use RadioGroup.

## Examples: Single

### Events

ToggleButton supports all user interactions via mouse, keyboard, and touch events with the `onPress` prop. This is similar to the `onClick` event, but not limited to mouse events. In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are also supported. These events are triggered when the user presses, releases, or changes the state of the button.

```jsx
function OnPressExample() {
  let [pointerType, setPointerType] = React.useState("");

  return (
    <>
      <ToggleButton
        onPressStart={(e) => setPointerType(e.pointerType)}
        onPressEnd={() => setPointerType("")}
      >
        <CalendarIcon />
      </ToggleButton>
      <p style={{ marginTop: "1rem" }}>
        {pointerType
          ? `You are pressing the IconButton with a ${pointerType}!`
          : "Clicked, press, or keyboard interact with IconButton."}
      </p>
    </>
  );
}
```

### Autofocus

The `autoFocus` prop allows the ToggleButton to receive focus when the page loads.

```jsx
<ToggleButton autoFocus>
  <CalendarIcon />
</ToggleButton>
```

### Default Selected

The `defaultSelected` prop sets the initial selected state of the ToggleButton.

```jsx
<ToggleButton defaultSelected>
  <CalendarIcon />
</ToggleButton>
```

### Disabled

The `isDisabled` prop disables the ToggleButton, preventing user interaction.

```jsx
<ToggleButton isDisabled>
  <CalendarIcon />
</ToggleButton>
```

### Controlled

The `isSelected` prop sets the selected state of the ToggleButton, helpful when controlled by state.

```jsx
function ControlledToggleButton() {
  const [selected, setSelected] = React.useState(false);

  return (
    <ToggleButton isSelected={selected} onClick={() => setSelected(!selected)}>
      <CalendarIcon />
    </ToggleButton>
  );
}
```

### Size

The `size` prop sets the size of the ToggleButton. Available sizes are `sm`, `md`, and `lg`.

When a `ToggleButton` is rendered inside a `ToggleButtonGroup`, its `size` prop is ignored. Set `size` on the group instead so every button in the group uses the same dimensions.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
  <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
    <ToggleButton size="sm" variant="icon">
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton size="sm" variant="text">
      Small
    </ToggleButton>
    <ToggleButton size="sm" variant="text">
      <CalendarIcon />
      Small
    </ToggleButton>
    <ToggleButton size="sm" variant="text">
      Small
      <CalendarIcon />
    </ToggleButton>
  </div>
  <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
    <ToggleButton size="md" variant="icon">
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton size="md" variant="text">
      Medium
    </ToggleButton>
    <ToggleButton size="md" variant="text">
      <CalendarIcon />
      Medium
    </ToggleButton>
    <ToggleButton size="md" variant="text">
      Medium
      <CalendarIcon />
    </ToggleButton>
  </div>
  <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
    <ToggleButton size="lg" variant="icon">
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton size="lg" variant="text">
      Large
    </ToggleButton>
    <ToggleButton size="lg" variant="text">
      <CalendarIcon />
      Large
    </ToggleButton>
    <ToggleButton size="lg" variant="text">
      Large
      <CalendarIcon />
    </ToggleButton>
  </div>
</div>
```

## Examples: Group

Set `size` on `ToggleButtonGroup` to control sizing for every button in the group. Child `ToggleButton` `size` props are not used inside a group.

### Default

```jsx
<ToggleButtonGroup>
  <ToggleButton>
    <CalendarIcon />
  </ToggleButton>
  <ToggleButton>
    <Briefcase />
  </ToggleButton>
  <ToggleButton>
    <Clock />
  </ToggleButton>
</ToggleButtonGroup>
```

### Controlled

```jsx
function Render() {
  const [singleSelected, setSingleSelected] = React.useState(new Set() < React.Key > ["2"]);
  const [multipleSelected, setMultipleSelected] = React.useState(
    new Set() < React.Key > ["1", "3"]
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <ToggleButtonGroup
        selectionMode="single"
        selectedKeys={singleSelected}
        onSelectionChange={setSingleSelected}
      >
        <ToggleButton id="Calendar">
          <CalendarIcon />
        </ToggleButton>
        <ToggleButton id="Briefcase">
          <Briefcase />
        </ToggleButton>
        <ToggleButton id="Clock">
          <Clock />
        </ToggleButton>
      </ToggleButtonGroup>
      <p style={{ marginBottom: 16 }}>
        Single Selected:&nbsp;
        {singleSelected.size > 0 ? [...singleSelected].join(", ") : "None"}
      </p>
      <ToggleButtonGroup
        selectionMode="multiple"
        selectedKeys={multipleSelected}
        onSelectionChange={setMultipleSelected}
      >
        <ToggleButton id="1" variant="text">
          One
        </ToggleButton>
        <ToggleButton id="2" variant="text">
          Two
        </ToggleButton>
        <ToggleButton id="3" variant="text">
          Three
        </ToggleButton>
      </ToggleButtonGroup>
      <p>
        Multiple Selected:&nbsp;
        {multipleSelected.size > 0 ? [...multipleSelected].join(", ") : "None"}
      </p>
    </div>
  );
}
```

### Disabled

You can set a single `ToggleButton` or the entire `ToggleButtonGroup` to disabled via the `isDisabled` prop.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
  <ToggleButtonGroup>
    <ToggleButton>
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton isDisabled>
      <Briefcase />
    </ToggleButton>
    <ToggleButton>
      <Clock />
    </ToggleButton>
  </ToggleButtonGroup>
  <ToggleButtonGroup isDisabled>
    <ToggleButton id="disabled-1">
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton id="disabled-2">
      <Briefcase />
    </ToggleButton>
    <ToggleButton id="disabled-3">
      <Clock />
    </ToggleButton>
  </ToggleButtonGroup>
</div>
```

### Full Width

Use the `fullWidth` prop to have the `ToggleButtonGroup` span the entire width available.

```jsx
<ToggleButtonGroup fullWidth>
  <ToggleButton>
    <CalendarIcon />
  </ToggleButton>
  <ToggleButton>
    <Briefcase />
  </ToggleButton>
  <ToggleButton>
    <Clock />
  </ToggleButton>
</ToggleButtonGroup>
```

### Orientation

Set the `orientation` prop to one of the following options: `"horizontal"` by default, or `"vertical"`.

```jsx
<ToggleButtonGroup orientation="vertical">
  <ToggleButton>
    <CalendarIcon />
  </ToggleButton>
  <ToggleButton>
    <Briefcase />
  </ToggleButton>
  <ToggleButton>
    <Clock />
  </ToggleButton>
</ToggleButtonGroup>
```

### Selection Mode

The `selectionMode` prop allows for `"single" | "multiple"`. A `"single"` selection within a `ToggleButtonGroup` requires the Group's children to have unique `id`'s.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
  <ToggleButtonGroup selectionMode="single">
    <ToggleButton id="1">
      Single
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton id="2">
      Single
      <Briefcase />
    </ToggleButton>
    <ToggleButton id="3">
      Single
      <Clock />
    </ToggleButton>
  </ToggleButtonGroup>

  <ToggleButtonGroup selectionMode="multiple">
    <ToggleButton id="a">
      Multiple
      <CalendarIcon />
    </ToggleButton>
    <ToggleButton id="b">
      Multiple
      <Briefcase />
    </ToggleButton>
    <ToggleButton id="c">
      Multiple
      <Clock />
    </ToggleButton>
  </ToggleButtonGroup>
</div>
```

### Separators

ToggleButtonGroup are separated by dividers by default. To hide the dividers set the `noSeparators` prop.

```jsx
<ToggleButtonGroup noSeparators>
  <ToggleButton>
    <CalendarIcon />
  </ToggleButton>
  <ToggleButton>
    <Briefcase />
  </ToggleButton>
  <ToggleButton>
    <Clock />
  </ToggleButton>
</ToggleButtonGroup>
```

## Props

### ToggleButton

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| size | `"lg" \ | "md" \ | "sm"` | `md` | Size of the ToggleButton. Ignored when rendered inside a \`ToggleButtonGroup\`; use the group's \`size\` prop to control sizing for all buttons in the group. |
| variant | `"icon" \ | "text"` | `icon` | Icon variant is icon only where text accepts a string and icon. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-disabled | `"false" \ | "true" \ | boolean` | - | Indicates whether the element is disabled to users of assistive technology. |
| aria-expanded | `"false" \ | "true" \ | boolean` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-haspopup | `"dialog" \ | "false" \ | "grid" \ | "listbox" \ | "menu" \ | "tree" \ | "true" \ | boolean` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| aria-pressed | `"false" \ | "mixed" \ | "true" \ | boolean` | - | Indicates the current "pressed" state of toggle buttons. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| children | `ChildrenOrFunction<ToggleButtonRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<ToggleButtonRenderProps>` | `'react-aria-ToggleButton'` | 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. |
| defaultSelected | `boolean` | - | Whether the element should be selected (uncontrolled). |
| dir | `string` | - | - |
| excludeFromTabOrder | `boolean` | - | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| hidden | `boolean` | - | - |
| id | `Key` | - | When used in a ToggleButtonGroup, an identifier for the item in \`selectedKeys\`. When used standalone, a DOM id. |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the button is disabled. |
| isSelected | `boolean` | - | Whether the element should be selected (controlled). |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBlur | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element loses focus. |
| onChange | `((isSelected: boolean) => void)` | - | Handler that is called when the element's selection state changes. |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element receives focus. |
| onFocusChange | `((isFocused: boolean) => void)` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onHoverChange | `((isHovering: boolean) => void)` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction starts. |
| onKeyDown | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is pressed. |
| onKeyUp | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPress | `((e: PressEvent) => void)` | - | Handler that is called when the press is released over the target. |
| onPressChange | `((isPressed: boolean) => void)` | - | Handler that is called when the press state changes. |
| onPressEnd | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressStart | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction starts. |
| onPressUp | `((e: PressEvent) => void)` | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| preventFocusOnPress | `boolean` | - | Whether to prevent focus from moving to the button when pressing it.&#xA;&#xA;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. |
| render | `DOMRenderFunction<"button", ToggleButtonRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string \ | null` | - | 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. |
| style | `StyleOrFunction<ToggleButtonRenderProps>` | - | 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. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |

### ToggleButtonGroup

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| fullWidth | `boolean` | - | Set to true to span all available space of parent. |
| noSeparators | `boolean` | `false` | Sets dividers between the ToggleButtons. |
| size | `"lg" \ | "md" \ | "sm"` | `md` | Size applied to all \`ToggleButton\` children in the group. Individual button \`size\` props are ignored while inside a \`ToggleButtonGroup\`. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ChildrenOrFunction<ToggleButtonGroupRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<ToggleButtonGroupRenderProps>` | `'react-aria-ToggleButtonGroup'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultSelectedKeys | `Iterable<Key>` | - | The initial selected keys in the collection (uncontrolled). |
| dir | `string` | - | - |
| disallowEmptySelection | `boolean` | - | Whether the collection allows empty selection. |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether all items are disabled. |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onSelectionChange | `((keys: Set<Key>) => void)` | - | Handler that is called when the selection changes. |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| orientation | `Orientation` | `horizontal` | The orientation of the the toggle button group. |
| render | `DOMRenderFunction<"div", ToggleButtonGroupRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| selectedKeys | `Iterable<Key>` | - | The currently selected keys in the collection (controlled). |
| selectionMode | `"multiple" \ | "single"` | `single` | Whether single or multiple selection is enabled. |
| slot | `string \ | null` | - | 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. |
| style | `StyleOrFunction<ToggleButtonGroupRenderProps>` | - | 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. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |