# Toggle Group

## Example

```svelte
<script>
	import { ToggleGroup, ToggleGroupItem } from '@foxui/all';
</script>

<div class="flex items-center gap-2">
	<ToggleGroup type="single" value="1">
		<ToggleGroupItem value="1">1</ToggleGroupItem>
		<ToggleGroupItem value="2">2</ToggleGroupItem>
		<ToggleGroupItem value="3">3</ToggleGroupItem>
	</ToggleGroup>

	<ToggleGroup type="single">
		<ToggleGroupItem value="1"
			><svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="currentColor"
				class="size-6"
			>
				<path
					d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
				/>
			</svg>
		</ToggleGroupItem>
		<ToggleGroupItem value="2"
			><svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="currentColor"
				class="size-6"
			>
				<path
					d="M12 1.5a.75.75 0 0 1 .75.75V7.5h-1.5V2.25A.75.75 0 0 1 12 1.5ZM11.25 7.5v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.75Z"
				/>
			</svg>
		</ToggleGroupItem>
		<ToggleGroupItem value="3"
			><svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="currentColor"
				class="size-6"
			>
				<path
					fill-rule="evenodd"
					d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
					clip-rule="evenodd"
				/>
			</svg>
		</ToggleGroupItem>
	</ToggleGroup>
</div>
```

## Documentation

## Usage

```svelte
<ToggleGroup type="single" bind:value>
	<ToggleGroupItem value="1">1</ToggleGroupItem>
	<ToggleGroupItem value="2">2</ToggleGroupItem>
	<ToggleGroupItem value="3">3</ToggleGroupItem>
</ToggleGroup>
```

## Sources

This component uses the bits-ui component: ToggleGroup, see here for the documentation for that: https://bits-ui.com/docs/components/toggle-group/llms.txt

## API Reference

### ToggleGroup
A group of toggle buttons where one or multiple can be pressed. Built on top of the bits-ui ToggleGroup primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | `'single' | 'multiple'` | `-` | Whether a single or multiple items can be pressed at a time. (required) |
| value | `string | string[]` | `-` | The currently pressed value(s). A string when type is "single", an array when "multiple". (bindable) |
| onValueChange | `(value: string | string[]) => void` | `-` | A callback invoked when the pressed value changes. |
| variant | `'default'` | `'default'` | The visual variant of the toggle group items. |
| size | `'default' | 'sm' | 'lg'` | `'default'` | The size of the toggle group items. |
| disabled | `boolean` | `false` | Whether the entire toggle group is disabled. |
| loop | `boolean` | `true` | Whether keyboard navigation loops from last item to first and vice versa. |
| orientation | `'horizontal' | 'vertical'` | `'horizontal'` | The orientation of the toggle group for keyboard navigation. |
| rovingFocus | `boolean` | `true` | Whether the toggle group uses roving focus management. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |

### ToggleGroupItem
A single item within a toggle group.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `-` | The value of this toggle item. (required, bindable) |
| variant | `'default'` | `-` | Override the visual variant for this specific item. Falls back to the parent ToggleGroup variant. |
| size | `'default' | 'sm' | 'lg'` | `-` | Override the size for this specific item. Falls back to the parent ToggleGroup size. |
| disabled | `boolean` | `false` | Whether this item is disabled. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |