# Toggle Group
```astro
---
---
```
## Installation
```bash
bunx bejamas add toggle-group
```
```bash
npx bejamas add toggle-group
```
```bash
pnpm dlx bejamas add toggle-group
```
```bash
yarn dlx bejamas add toggle-group
```
## Usage
```astro nocollapse
---
---
```
## Props
| Prop | Type | Default |
|---|---|---|
| variant | `"default" \| "outline"` | `"default"` |
| size | `"default" \| "sm" \| "lg"` | `"default"` |
| spacing | `number` | `0` |
| defaultValue | `string \| string[]` | |
| multiple | `boolean` | `false` |
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` |
| disabled | `boolean` | `false` |
| class | `string` | `""` |
| style | `string` | `""` |
## Examples
### Multiple Selection
```astro
---
---
```
### Outline Variant
```astro
---
---
```
### Sizes
```astro
---
---
```
### Vertical Orientation
```astro
---
---
```
### Disabled
```astro
---
---
```
## API Reference
### Events
| Event | Detail | Description |
|-------|--------|-------------|
| `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |
### Programmatic Control
```js nocollapse
// Set selected values programmatically
element.dispatchEvent(new CustomEvent('toggle-group:set', {
detail: { value: ['bold', 'italic'] }
}));
```
### Data Attributes
| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-state` | toggle-group-item | Current state: `on` or `off` |
| `data-disabled` | toggle-group | Present when group is disabled |
| `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |
| `data-spacing` | toggle-group | Gap value used by style packs |
| `data-variant` | toggle-group | Visual variant: `default` or `outline` |
| `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |