# Toggle Group

URL: https://ark-ui.com/docs/components/toggle-group
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/toggle-group.mdx

A set of two-state buttons that can be toggled on or off.

---

<ComponentPreview id="ToggleGroup" />

## Anatomy

<Anatomy id="toggle-group" />

```tsx
<ToggleGroup.Root>
  <ToggleGroup.Item />
</ToggleGroup.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { ToggleGroup } from '@ark-ui/react/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
import styles from 'styles/toggle-group.module.css'

export const Basic = () => {
  return (
    <ToggleGroup.Root defaultValue={['left']} className={styles.Root}>
      <ToggleGroup.Item value="left" className={styles.Item}>
        <AlignLeftIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" className={styles.Item}>
        <AlignCenterIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" className={styles.Item}>
        <AlignRightIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="justify" className={styles.Item}>
        <AlignJustifyIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Solid

```tsx
import { ToggleGroup } from '@ark-ui/solid/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-solid'
import styles from 'styles/toggle-group.module.css'

export const Basic = () => {
  return (
    <ToggleGroup.Root defaultValue={['left']} class={styles.Root}>
      <ToggleGroup.Item value="left" class={styles.Item}>
        <AlignLeftIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" class={styles.Item}>
        <AlignCenterIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" class={styles.Item}>
        <AlignRightIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="justify" class={styles.Item}>
        <AlignJustifyIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ToggleGroup } from '@ark-ui/vue/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-vue-next'
import styles from 'styles/toggle-group.module.css'
</script>

<template>
  <ToggleGroup.Root :defaultValue="['left']" :class="styles.Root">
    <ToggleGroup.Item value="left" :class="styles.Item">
      <AlignLeftIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="center" :class="styles.Item">
      <AlignCenterIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="right" :class="styles.Item">
      <AlignRightIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="justify" :class="styles.Item">
      <AlignJustifyIcon />
    </ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ToggleGroup } from '@ark-ui/svelte/toggle-group'
  import AlignCenterIcon from 'lucide-svelte/icons/align-center'
  import AlignJustifyIcon from 'lucide-svelte/icons/align-justify'
  import AlignLeftIcon from 'lucide-svelte/icons/align-left'
  import AlignRightIcon from 'lucide-svelte/icons/align-right'
  import styles from 'styles/toggle-group.module.css'
</script>

<ToggleGroup.Root defaultValue={['left']} class={styles.Root}>
  <ToggleGroup.Item value="left" class={styles.Item}>
    <AlignLeftIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" class={styles.Item}>
    <AlignCenterIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" class={styles.Item}>
    <AlignRightIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="justify" class={styles.Item}>
    <AlignJustifyIcon />
  </ToggleGroup.Item>
</ToggleGroup.Root>

```

### Controlled

Use the `value` and `onValueChange` props to control the toggle group state.

**Example: controlled**

#### React

```tsx
import { ToggleGroup } from '@ark-ui/react/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/toggle-group.module.css'

export const Controlled = () => {
  const [value, setValue] = useState(['left'])
  return (
    <ToggleGroup.Root value={value} onValueChange={(e) => setValue(e.value)} className={styles.Root}>
      <ToggleGroup.Item value="left" className={styles.Item}>
        <AlignLeftIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" className={styles.Item}>
        <AlignCenterIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" className={styles.Item}>
        <AlignRightIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="justify" className={styles.Item}>
        <AlignJustifyIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Solid

```tsx
import { ToggleGroup } from '@ark-ui/solid/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/toggle-group.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal(['left'])
  return (
    <ToggleGroup.Root value={value()} onValueChange={(e) => setValue(e.value)} class={styles.Root}>
      <ToggleGroup.Item value="left" class={styles.Item}>
        <AlignLeftIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" class={styles.Item}>
        <AlignCenterIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" class={styles.Item}>
        <AlignRightIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="justify" class={styles.Item}>
        <AlignJustifyIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ToggleGroup } from '@ark-ui/vue/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/toggle-group.module.css'

const value = ref(['left'])
</script>

<template>
  <ToggleGroup.Root v-model:value="value" :class="styles.Root">
    <ToggleGroup.Item value="left" :class="styles.Item">
      <AlignLeftIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="center" :class="styles.Item">
      <AlignCenterIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="right" :class="styles.Item">
      <AlignRightIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="justify" :class="styles.Item">
      <AlignJustifyIcon />
    </ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ToggleGroup } from '@ark-ui/svelte/toggle-group'
  import AlignCenterIcon from 'lucide-svelte/icons/align-center'
  import AlignJustifyIcon from 'lucide-svelte/icons/align-justify'
  import AlignLeftIcon from 'lucide-svelte/icons/align-left'
  import AlignRightIcon from 'lucide-svelte/icons/align-right'
  import styles from 'styles/toggle-group.module.css'

  let value = $state(['left'])
</script>

<ToggleGroup.Root bind:value class={styles.Root}>
  <ToggleGroup.Item value="left" class={styles.Item}>
    <AlignLeftIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" class={styles.Item}>
    <AlignCenterIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" class={styles.Item}>
    <AlignRightIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="justify" class={styles.Item}>
    <AlignJustifyIcon />
  </ToggleGroup.Item>
</ToggleGroup.Root>

```

### Root Provider

An alternative way to control the toggle group is to use the `RootProvider` component and the `useToggleGroup` hook.
This way you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { ToggleGroup, useToggleGroup } from '@ark-ui/react/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
import styles from 'styles/toggle-group.module.css'

export const RootProvider = () => {
  const toggleGroup = useToggleGroup({ defaultValue: ['left'] })

  return (
    <>
      <output>Set to Center: {String(toggleGroup.value)}</output>
      <ToggleGroup.RootProvider value={toggleGroup} className={styles.Root}>
        <ToggleGroup.Item value="left" className={styles.Item}>
          <AlignLeftIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="center" className={styles.Item}>
          <AlignCenterIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="right" className={styles.Item}>
          <AlignRightIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="justify" className={styles.Item}>
          <AlignJustifyIcon />
        </ToggleGroup.Item>
      </ToggleGroup.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { ToggleGroup, useToggleGroup } from '@ark-ui/solid/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-solid'
import styles from 'styles/toggle-group.module.css'

export const RootProvider = () => {
  const toggleGroup = useToggleGroup({ defaultValue: ['left'] })

  return (
    <>
      <output>Selected: {String(toggleGroup().value)}</output>
      <ToggleGroup.RootProvider value={toggleGroup} class={styles.Root}>
        <ToggleGroup.Item value="left" class={styles.Item}>
          <AlignLeftIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="center" class={styles.Item}>
          <AlignCenterIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="right" class={styles.Item}>
          <AlignRightIcon />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="justify" class={styles.Item}>
          <AlignJustifyIcon />
        </ToggleGroup.Item>
      </ToggleGroup.RootProvider>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ToggleGroup, useToggleGroup } from '@ark-ui/vue/toggle-group'
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-vue-next'
import styles from 'styles/toggle-group.module.css'

const toggleGroup = useToggleGroup({ defaultValue: ['left'] })
</script>

<template>
  <output>Selected: {{ String(toggleGroup.value) }}</output>
  <ToggleGroup.RootProvider :value="toggleGroup" :class="styles.Root">
    <ToggleGroup.Item value="left" :class="styles.Item">
      <AlignLeftIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="center" :class="styles.Item">
      <AlignCenterIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="right" :class="styles.Item">
      <AlignRightIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="justify" :class="styles.Item">
      <AlignJustifyIcon />
    </ToggleGroup.Item>
  </ToggleGroup.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ToggleGroup, useToggleGroup } from '@ark-ui/svelte/toggle-group'
  import AlignCenterIcon from 'lucide-svelte/icons/align-center'
  import AlignJustifyIcon from 'lucide-svelte/icons/align-justify'
  import AlignLeftIcon from 'lucide-svelte/icons/align-left'
  import AlignRightIcon from 'lucide-svelte/icons/align-right'
  import styles from 'styles/toggle-group.module.css'

  const id = $props.id()
  const toggleGroup = useToggleGroup({ id, defaultValue: ['left'] })
</script>

<output>Selected: {String(toggleGroup().value)}</output>
<ToggleGroup.RootProvider value={toggleGroup} class={styles.Root}>
  <ToggleGroup.Item value="left" class={styles.Item}>
    <AlignLeftIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" class={styles.Item}>
    <AlignCenterIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" class={styles.Item}>
    <AlignRightIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="justify" class={styles.Item}>
    <AlignJustifyIcon />
  </ToggleGroup.Item>
</ToggleGroup.RootProvider>

```

### Multiple

Demonstrates how to enable `multiple` selection within the group.

**Example: multiple**

#### React

```tsx
import { ToggleGroup } from '@ark-ui/react/toggle-group'
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react'
import styles from 'styles/toggle-group.module.css'

export const Multiple = () => {
  return (
    <ToggleGroup.Root defaultValue={['bold']} multiple className={styles.Root}>
      <ToggleGroup.Item value="bold" className={styles.Item}>
        <BoldIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" className={styles.Item}>
        <ItalicIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline" className={styles.Item}>
        <UnderlineIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Solid

```tsx
import { ToggleGroup } from '@ark-ui/solid/toggle-group'
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-solid'
import styles from 'styles/toggle-group.module.css'

export const Multiple = () => {
  return (
    <ToggleGroup.Root defaultValue={['bold']} multiple class={styles.Root}>
      <ToggleGroup.Item value="bold" class={styles.Item}>
        <BoldIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" class={styles.Item}>
        <ItalicIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline" class={styles.Item}>
        <UnderlineIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ToggleGroup } from '@ark-ui/vue/toggle-group'
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-vue-next'
import styles from 'styles/toggle-group.module.css'
</script>

<template>
  <ToggleGroup.Root :defaultValue="['bold']" multiple :class="styles.Root">
    <ToggleGroup.Item value="bold" :class="styles.Item">
      <BoldIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="italic" :class="styles.Item">
      <ItalicIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="underline" :class="styles.Item">
      <UnderlineIcon />
    </ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ToggleGroup } from '@ark-ui/svelte/toggle-group'
  import BoldIcon from 'lucide-svelte/icons/bold'
  import ItalicIcon from 'lucide-svelte/icons/italic'
  import UnderlineIcon from 'lucide-svelte/icons/underline'
  import styles from 'styles/toggle-group.module.css'
</script>

<ToggleGroup.Root defaultValue={['bold']} multiple class={styles.Root}>
  <ToggleGroup.Item value="bold" class={styles.Item}>
    <BoldIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" class={styles.Item}>
    <ItalicIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="underline" class={styles.Item}>
    <UnderlineIcon />
  </ToggleGroup.Item>
</ToggleGroup.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string[]` | No | The initial selected value of the toggle group when rendered.
Use when you don't need to control the selected value of the toggle group. |
| `deselectable` | `boolean` | No | Whether the toggle group allows empty selection.
**Note:** This is ignored if `multiple` is `true`. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; item: (value: string) => string }>` | No | The ids of the elements in the toggle. Useful for composition. |
| `loopFocus` | `boolean` | No | Whether to loop focus inside the toggle group. |
| `multiple` | `boolean` | No | Whether to allow multiple toggles to be selected. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the toggle is clicked. |
| `orientation` | `Orientation` | No | The orientation of the toggle group. |
| `rovingFocus` | `boolean` | No | Whether to use roving tab index to manage focus. |
| `value` | `string[]` | No | The controlled selected value of the toggle group. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the toggle-group |
| `[data-focus]` | Present when focused |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | item |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "on" | "off" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseToggleGroupReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string[]` | No | The initial selected value of the toggle group when rendered.
Use when you don't need to control the selected value of the toggle group. |
| `deselectable` | `boolean` | No | Whether the toggle group allows empty selection.
**Note:** This is ignored if `multiple` is `true`. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `ids` | `Partial<{ root: string; item: (value: string) => string }>` | No | The ids of the elements in the toggle. Useful for composition. |
| `loopFocus` | `boolean` | No | Whether to loop focus inside the toggle group. |
| `multiple` | `boolean` | No | Whether to allow multiple toggles to be selected. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the toggle is clicked. |
| `orientation` | `Orientation` | No | The orientation of the toggle group. |
| `rovingFocus` | `boolean` | No | Whether to use roving tab index to manage focus. |
| `value` | `string[]` | No | The controlled selected value of the toggle group. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the toggle-group |
| `[data-focus]` | Present when focused |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | item |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "on" | "off" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseToggleGroupReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string[]` | No | The initial selected value of the toggle group when rendered.
Use when you don't need to control the selected value of the toggle group. |
| `deselectable` | `boolean` | No | Whether the toggle group allows empty selection.
**Note:** This is ignored if `multiple` is `true`. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; item(value: string): string }>` | No | The ids of the elements in the toggle. Useful for composition. |
| `loopFocus` | `boolean` | No | Whether to loop focus inside the toggle group. |
| `modelValue` | `string[]` | No | The v-model value of the toggle group |
| `multiple` | `boolean` | No | Whether to allow multiple toggles to be selected. |
| `orientation` | `Orientation` | No | The orientation of the toggle group. |
| `rovingFocus` | `boolean` | No | Whether to use roving tab index to manage focus. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the toggle-group |
| `[data-focus]` | Present when focused |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | item |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "on" | "off" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ToggleGroupApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string[]` | No | The initial selected value of the toggle group when rendered.
Use when you don't need to control the selected value of the toggle group. |
| `deselectable` | `boolean` | No | Whether the toggle group allows empty selection.
**Note:** This is ignored if `multiple` is `true`. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; item: (value: string) => string }>` | No | The ids of the elements in the toggle. Useful for composition. |
| `loopFocus` | `boolean` | No | Whether to loop focus inside the toggle group. |
| `multiple` | `boolean` | No | Whether to allow multiple toggles to be selected. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function to call when the toggle is clicked. |
| `orientation` | `Orientation` | No | The orientation of the toggle group. |
| `ref` | `Element` | No |  |
| `rovingFocus` | `boolean` | No | Whether to use roving tab index to manage focus. |
| `value` | `string[]` | No | The controlled selected value of the toggle group. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the toggle-group |
| `[data-focus]` | Present when focused |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseToggleGroupContext]>` | Yes |  |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `ref` | `Element` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle-group |
| `[data-part]` | item |
| `[data-focus]` | Present when focused |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the item |
| `[data-state]` | "on" | "off" |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseToggleGroupReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string[]` | The value of the toggle group. |
| `setValue` | `(value: string[]) => void` | Sets the value of the toggle group. |
| `getItemState` | `(props: ItemProps) => ItemState` | Returns the state of the toggle item. |


## Accessibility

### Keyboard Support

<KeyBindingsTable id="toggle-group" />