Toggle Group

Installation

npx @park-ui/cli@next add toggle-group

Add Component

Copy the code snippet below into you components folder.

'use client'
import { ToggleGroup } from '@ark-ui/react/toggle-group'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { toggleGroup } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(toggleGroup)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(ToggleGroup.Root, 'root')
export const RootProvider = withProvider(ToggleGroup.RootProvider, 'root')
export const Item = withContext(ToggleGroup.Item, 'item')

export { ToggleGroupContext as Context } from '@ark-ui/react/toggle-group'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { toggleGroupAnatomy } from '@ark-ui/react/toggle-group'
import { defineSlotRecipe } from '@pandacss/dev'

export const toggleGroup = defineSlotRecipe({
  className: 'toggle-group',
  slots: toggleGroupAnatomy.keys(),
  base: {
    root: {},
  },
  variants: {
    variant: {
      outline: {
        root: {
          borderRadius: 'l3',
          borderWidth: '1px',
          gap: '1',
          p: '1',
        },
      },
    },
  },
})

Usage

import { ToggleGroup } from '@/components/ui'

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

Examples

Multiple

Use the multiple prop to allow multiple items to be selected at once.

Here is an a toggle group used as a toolbar with icon buttons.

Props

Root

Prop	Default	Type
`deselectable`	`true`	`boolean` Whether the toggle group allows empty selection. Note: This is ignored if `multiple` is `true`.
`loopFocus`	`true`	`boolean` Whether to loop focus inside the toggle group.
`orientation`	`\horizontal\`	`Orientation` The orientation of the toggle group.
`rovingFocus`	`true`	`boolean` Whether to use roving tab index to manage focus.
`variant`		`'outline'`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`string[]` 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.
`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.
`multiple`		`boolean` Whether to allow multiple toggles to be selected.
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the toggle is clicked.
`value`		`string[]` The controlled selected value of the toggle group.

Item

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