Skip to content

Toggle Group

A group of toggle buttons where multiple or single selections can be made.

<script setup lang="ts">
import { ToggleGroup } from '@destyler-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>

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

export function 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 '@destyler-ui/solid/toggle-group'

export function 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 lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
</script>

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

Anatomy

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

<template>
  <ToggleGroup.Root>
    <ToggleGroup.Item />
  </ToggleGroup.Root>
</template>

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

export default function Basic() {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item />
    </ToggleGroup.Root>
  )
}

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

export default function Basic() {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

<script lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
</script>

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

Examples

Basic

<script setup lang="ts">
import { ToggleGroup } from '@destyler-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>

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

export function 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 '@destyler-ui/solid/toggle-group'

export function 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 lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
</script>

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

Controlled

Control the selected value programmatically.

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

const value = ref(['a'])
</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>

import { useState } from 'react'
import { ToggleGroup } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState('a')

  return (
    <ToggleGroup.Root value={value} onValueChange={({ value }) => setValue(value)}>
      <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 '@destyler-ui/solid/toggle-group'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal(['a'])

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

<script lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
  let value = $state(['a'])
</script>

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

Multiple

Allow multiple items to be selected.

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

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

<template>
  <ToggleGroup.Root v-model="value" 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>

import { useState } from 'react'
import { ToggleGroup } from '@destyler-ui/react'

export function Multiple() {
  const [value, setValue] = useState<string[]>(['a', 'b'])

  return (
    <ToggleGroup.Root value={value} onValueChange={({ value }) => setValue(value)} 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 '@destyler-ui/solid/toggle-group'

export function 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>
  )
}

<script lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
  let value = $state(['a', 'b'])
</script>

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

Render Prop

Use render prop to access the toggle group state.

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

<template>
  <ToggleGroup.Root>
    <ToggleGroup.Context v-slot="{ value }">
      <span>Selected: {{ value.join(', ') || 'None' }}</span>
    </ToggleGroup.Context>
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

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

export function RenderProp() {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Context>
        {toggleGroup => (
          <span>
            Selected:
            {toggleGroup.value.join(', ') || 'None'}
          </span>
        )}
      </ToggleGroup.Context>
      <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 '@destyler-ui/solid/toggle-group'

export function RenderProp() {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Context>
        {toggleGroup => (
          <span>Selected: {toggleGroup().value.join(', ') || 'None'}</span>
        )}
      </ToggleGroup.Context>
      <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      <ToggleGroup.Item value="c">C</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

<script lang="ts">
  import { ToggleGroup } from '@destyler-ui/svelte'
</script>

<ToggleGroup.Root>
  <ToggleGroup.Context>{#snippet render(api)}<span>Selected: {api().value.join(', ') || 'None'}</span>{/snippet}</ToggleGroup.Context>
  <ToggleGroup.Item value="a">A</ToggleGroup.Item><ToggleGroup.Item value="b">B</ToggleGroup.Item><ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>

Root Provider

<script setup lang="ts">
import { ToggleGroup, useToggleGroup } from '@destyler-ui/vue'

const toggleGroup = useToggleGroup()
</script>

<template>
  <span>{{ toggleGroup.value.join(', ') }}</span>
  <ToggleGroup.RootProvider :value="toggleGroup">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup.RootProvider>
</template>

import { ToggleGroup, useToggleGroup } from '@destyler-ui/react'

export function RootProvider() {
  const toggleGroup = useToggleGroup()

  return (
    <>
      <span>{toggleGroup.value.join(', ')}</span>
      <ToggleGroup.RootProvider value={toggleGroup}>
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
        <ToggleGroup.Item value="c">C</ToggleGroup.Item>
      </ToggleGroup.RootProvider>
    </>
  )
}

import { ToggleGroup, useToggleGroup } from '@destyler-ui/solid/toggle-group'

export function RootProvider() {
  const toggleGroup = useToggleGroup()

  return (
    <>
      <button onClick={() => toggleGroup().setValue(['b'])}>Set to B</button>

      <ToggleGroup.RootProvider value={toggleGroup}>
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
        <ToggleGroup.Item value="c">C</ToggleGroup.Item>
      </ToggleGroup.RootProvider>
    </>
  )
}

<script lang="ts">
  import { ToggleGroup, useToggleGroup } from '@destyler-ui/svelte'
  const id = $props.id()
  const toggleGroup = useToggleGroup({ id })
</script>

<span>{toggleGroup().value.join(', ')}</span>
<ToggleGroup.RootProvider value={toggleGroup}>
  <ToggleGroup.Item value="a">A</ToggleGroup.Item><ToggleGroup.Item value="b">B</ToggleGroup.Item><ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`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`	—	`false \| true` 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`	`true`	`false \| true` Whether to loop focus inside the toggle group.
`modelValue`	—	`string[]`
`multiple`	—	`false \| true` Whether to allow multiple toggles to be selected.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the toggle group.
`rovingFocus`	`true`	`false \| true` Whether to use roving tab index to manage focus.

Emit	Event
`update:modelValue`	`[value: string[]]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Function to call when the toggle is clicked.

Context

No serializable props or emits are declared for this part.

Item

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`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`	—	`false \| true` 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`	`true`	`false \| true` Whether to loop focus inside the toggle group.
`multiple`	—	`false \| true` Whether to allow multiple toggles to be selected.
`onValueChange`	—	`(details: ValueChangeDetails) => void` Function to call when the toggle is clicked.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the toggle group.
`rovingFocus`	`true`	`false \| true` Whether to use roving tab index to manage focus.
`value`	—	`string[]` The values of the toggles in the group.

Context

Prop	Default	Type
`children*`	—	`(context: UseToggleGroupContext) => ReactNode`

Item

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

RootProvider

Prop	Default	Type
`value*`	—	`UseToggleGroupReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js21.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`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`	—	`false \| true` Whether the toggle is disabled.
`ids`	—	`Partial<{ root: string; item: (value: string) => string; }>` The ids of the elements in the toggle. Useful for composition.
`loopFocus`	`true`	`false \| true` Whether to loop focus inside the toggle group.
`multiple`	—	`false \| true` Whether to allow multiple toggles to be selected.
`onValueChange`	—	`(details: ValueChangeDetails) => void` Function to call when the toggle is clicked.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the toggle group.
`rovingFocus`	`true`	`false \| true` Whether to use roving tab index to manage focus.
`value`	—	`string[]` The values of the toggles in the group.

Context

Prop	Default	Type
`children*`	—	`(context: UseToggleGroupContext) => Element`

Item

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`(props: (userProps?: solid_js21.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true`

RootProvider

Prop	Default	Type
`value*`	—	`UseToggleGroupReturn`
`asChild`	—	`(props: (userProps?: solid_js21.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`string[]`
`disabled`	—	`false \| true` Whether the toggle is disabled.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; item: (value: string) => string; }>` The ids of the elements in the toggle. Useful for composition.
`loopFocus`	`true`	`false \| true` Whether to loop focus inside the toggle group.
`multiple`	—	`false \| true` Whether to allow multiple toggles to be selected.
`onValueChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ToggleGroupValueChangeDetails) => void` Function to call when the toggle is clicked.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the toggle group.
`rovingFocus`	`true`	`false \| true` Whether to use roving tab index to manage focus.
`value`	—	`string[]` The values of the toggles in the group.

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseToggleGroupContext]>`

Item

Prop	Default	Type
`value*`	—	`string`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`
`disabled`	—	`false \| true`

RootProvider

Prop	Default	Type
`value*`	—	`UseToggleGroupReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`