ChipGroup
Wrapping cluster for Badge, Chip, and tag children with gap and justify controls; carved out of dryui/no-flex
Accessibility
- This component does not add meaning by itself; ensure child content supplies the required headings, labels, and landmarks.
- Only add landmark or region semantics when the section has a unique, meaningful label.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { ChipGroup, Badge } from '@dryui/ui';
</script>
<ChipGroup.Root gap="md">
<ChipGroup.Label>WORKS WITH</ChipGroup.Label>
<Badge variant="soft">Local/MLX</Badge>
<Badge variant="soft">OpenAI</Badge>
<Badge variant="soft">Anthropic</Badge>
<Badge variant="soft">Mistral</Badge>
</ChipGroup.Root>Import options
Root package
ts
import { ChipGroup } from '@dryui/ui'Per-component subpath
ts
import { ChipGroup } from '@dryui/ui/chip-group'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
ChipGroup.Root | |||||
| size | smmd | Size preset affecting density, spacing, or typography. | 'sm' | — | — |
| type | singlemultiple | HTML type attribute or component-specific type selector. | 'single' | — | — |
| value | string[] | Current controlled or bindable value. | [] | — | ✓ |
| disabled | boolean | Prevents interaction and applies disabled styling. | false | — | — |
| orientation | horizontalvertical | Horizontal or vertical layout direction. | 'horizontal' | — | — |
| gap | smmdlg | — | 'md' | — | — |
| justify | startcenterendbetween | — | 'start' | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
ChipGroup.Item | |||||
| value | string | Current controlled or bindable value. | — | ✓ | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
ChipGroup.Label | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |