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-partattribute 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.
Story not foundStory not foundStory not foundAPI Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
defaultValueThe 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. | string[] | |
disabledWhether the toggle is disabled. | boolean | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the toggle. Useful for composition. | Partial<{ root: string; toggle(value: string): string }> | |
loopFocusWhether to loop focus inside the toggle group. | boolean | |
multipleWhether to allow multiple toggles to be selected. | boolean | |
onValueChangeFunction to call when the toggle is clicked. | (details: ValueChangeDetails) => void | |
orientationThe orientation of the toggle group. | Orientation | |
rovingFocusWhether to use roving tab index to manage focus. | boolean | |
valueThe values of the toggles in the group. | string[] |
Item
| Prop | Type | Default |
|---|---|---|
value | string | |
asChildRender as a different element type. | boolean | |
disabled | boolean |