Toggle Group | Ark UI

Anatomy

To set up the toggle group correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the ToggleGroup component in your project. Let’s take a look at the most basic example:

import { ToggleGroup } from '@ark-ui/react'

const Basic = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const Basic = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

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

<template>
  <ToggleGroup.Root>
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

Multiple Selection

Demonstrates how to enable multiple selection within the group.

import { ToggleGroup } from '@ark-ui/react'

const Multiple = () => {
  return (
    <ToggleGroup.Root multiple>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const Multiple = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

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

<template>
  <ToggleGroup.Root multiple>
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

Initial Value

Shows how to set an initial value in the toggle group.

import { ToggleGroup } from '@ark-ui/react'

const InitialValue = () => {
  return (
    <ToggleGroup.Root defaultValue={['b']}>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const InitialValue = () => {
  return (
    <ToggleGroup.Root value={['b']}>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

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

<template>
  <ToggleGroup.Root v-model="value">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

API Reference

Item

Prop	Type	Default
`value`	`string`
`asChild`	`boolean`
`disabled`	`boolean`

Root

Prop	Type	Default
`asChild`	`boolean`
`defaultValue`	`string[]`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`disabled`	`boolean`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`ids`	`Partial<{ root: string; toggle(value: string): string }>`
`loop`	`boolean`
`multiple`	`boolean`
`onValueChange`	`(details: ValueChangeDetails) => void`
`orientation`	`Orientation`
`rovingFocus`	`boolean`
`value`	`string[]`