ChipGroup
import { ChipGroup } from '@tangible/ui';
Interactive docs and examples: ChipGroup in Storybook.
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).
Component API tokens
Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.
--tui-chip-group-gap