# ChipGroup

```tsx
import { ChipGroup } from '@tangible/ui';
```

Interactive docs and examples: [ChipGroup in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chipgroup--docs).

## ChipGroup props

| Prop | Type | Default | Description |
| - | - | - | - |
| `children` | `ReactNode` | | |
| `alignment?` | `"center" \| "end" \| "start"` | | Inline: distribution along the row (justify-content). Stack: cross-axis alignment (align-items). Published as `data-align`. |
| `aria-label?` | `string` | | |
| `aria-labelledby?` | `string` | | |
| `className?` | `string` | | |
| `defaultValue?` | `OptionValue \| OptionValue[]` | | |
| `density?` | `"md" \| "sm" \| "xs"` | `'sm'` | Gap between chips. Default 'sm'. |
| `direction?` | `"inline" \| "stack"` | `'inline'` | Layout direction. Default 'inline' (row wrap). |
| `disabled?` | `boolean` | `false` | |
| `multiple?` | `boolean` | `false` | |
| `multipleLabel?` | `string` | `'Multiple selections allowed'` | Visually hidden label describing multi-select behaviour. For i18n support. |
| `onValueChange?` | `((value: OptionValue \| undefined) => void) \| ((value: OptionValue[]) => void)` | | |
| `value?` | `OptionValue \| OptionValue[]` | | |

## Examples

Stories: Single Select, Multi Select, Controlled Single, Controlled Multiple, Disabled Group, Solid Variant, Density Variants, Stack Direction ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chipgroup--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-chip-group-gap`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chipgroup--docs