# Toggle group: Spacing

> `spacing` puts a gap between items on the spacing scale. Outline items with a gap keep their own borders and fills.

Example: https://hextaui.com/docs/toggle-group/examples/spacing
Component docs: https://hextaui.com/docs/toggle-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/toggle-group-spacing.json
```

This adds `components/examples/toggle-group/spacing.tsx` with the Toggle group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/toggle-group/spacing.tsx"
import { IconStar } from "@tabler/icons-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ToggleGroupSpacing() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ToggleGroup spacing={1} aria-label="Rating filter" defaultValue={["4"]}>
        {["1", "2", "3", "4", "5"].map((stars) => (
          <ToggleGroupItem key={stars} value={stars}>
            {stars}
            <IconStar />
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <ToggleGroup
        multiple
        spacing={2}
        variant="outline"
        size="sm"
        aria-label="Topics"
        defaultValue={["design"]}
      >
        <ToggleGroupItem value="design">Design</ToggleGroupItem>
        <ToggleGroupItem value="engineering">Engineering</ToggleGroupItem>
        <ToggleGroupItem value="research">Research</ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}
```

## Props in this example

### ToggleGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `string[]` | – |  |
| `multiple` | `boolean` | `false` |  |
| `variant` | `"default" \| "outline"` | `"default"` | Sets every item's variant. |
| `size` | `"default" \| "sm" \| "lg"` | `"default"` | Sets every item's size. |
| `spacing` | `0 \| 0.5 \| 1 \| 1.5 \| 2 \| 2.5 \| 3 \| 4 \| 5 \| 6 \| 8` | `0` | Gap between items on the spacing scale. 0 joins outline items. |

### ToggleGroupItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Identifies the item in the group's value. |

## More Toggle group examples

- [Outline](https://hextaui.com/docs/toggle-group/examples/outline.md)
- [Multiple](https://hextaui.com/docs/toggle-group/examples/multiple.md)
- [Sizes](https://hextaui.com/docs/toggle-group/examples/sizes.md)
- [Icons and labels](https://hextaui.com/docs/toggle-group/examples/icons.md)
- [Vertical](https://hextaui.com/docs/toggle-group/examples/vertical.md)
- [Disabled](https://hextaui.com/docs/toggle-group/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/toggle-group/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/toggle-group/examples/rtl.md)