# Toggle group: Sizes

> `size` on the group sets every item: `sm`, `default` or `lg`.

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

## Add this example

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

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

## Source

```tsx title="components/examples/toggle-group/sizes.tsx"
import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react"

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

export function ToggleGroupSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      {(["sm", "default", "lg"] as const).map((size) => (
        <ToggleGroup
          key={size}
          multiple
          size={size}
          variant="outline"
          aria-label={`Formatting, ${size}`}
          defaultValue={["bold"]}
        >
          <ToggleGroupItem value="bold" aria-label="Bold">
            <IconBold />
          </ToggleGroupItem>
          <ToggleGroupItem value="italic" aria-label="Italic">
            <IconItalic />
          </ToggleGroupItem>
          <ToggleGroupItem value="underline" aria-label="Underline">
            <IconUnderline />
          </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. |

### 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)
- [Spacing](https://hextaui.com/docs/toggle-group/examples/spacing.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)