Toggle Group

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

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'

export 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'

export 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 { ToggleGroup } from '@ark-ui/vue'
</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'

export 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'

export 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 { ToggleGroup } from '@ark-ui/vue'
</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.

Example not found

Example not found

Example not found

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.
`defaultValue`		`string[]` The initial value of the toggle group when it is first rendered. Use when you do not need to control the state of the toggle group.
`disabled`		`boolean` Whether the toggle is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; item(value: string): string }>` The ids of the elements in the toggle. Useful for composition.
`loopFocus`		`boolean` Whether to loop focus inside the toggle group.
`multiple`		`boolean` Whether to allow multiple toggles to be selected.
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the toggle is clicked.
`orientation`		`Orientation` The orientation of the toggle group.
`rovingFocus`		`boolean` Whether to use roving tab index to manage focus.
`value`		`string[]` The values of the toggles in the group.

Item

Prop	Default	Type
`value`		`string`
`asChild`		`boolean` Render as a different element type.
`disabled`		`boolean`