ToggleGroup

A group of toggle buttons for selecting one or multiple options. Built on Ark UI .

Import


import { ToggleGroup } from '@grannyshot/ui'

Usage


<ToggleGroup.Root defaultValue={['grid']}>
  <ToggleGroup.Item value="list">List</ToggleGroup.Item>
  <ToggleGroup.Item value="grid">Grid</ToggleGroup.Item>
</ToggleGroup.Root>

Multiple Selection


<ToggleGroup.Root multiple defaultValue={['bold', 'italic']}>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

Sizes


<ToggleGroup.Root size="sm" defaultValue={['a']}>...</ToggleGroup.Root>
<ToggleGroup.Root size="md" defaultValue={['a']}>...</ToggleGroup.Root>
<ToggleGroup.Root size="lg" defaultValue={['a']}>...</ToggleGroup.Root>

API Reference

ToggleGroup.Root

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`multiple`	`boolean`	`false`	Allow multiple selection
`defaultValue`	`string[]`	—	Default selected values
`value`	`string[]`	—	Controlled selected values
`disabled`	`boolean`	`false`	Disabled state

ToggleGroup.Item

Prop	Type	Default	Description
`value`	`string`	—	Item value (required)
`disabled`	`boolean`	`false`	Disable this item