Radio chips where the chosen chip swells like jelly, shoves its neighbours aside on a spring and the row ripples out from it.
Click a chip and watch it swell while the row makes room. With the arrow keys the change is instant.
| Prop | Type | Default | Description |
|---|---|---|---|
items | (string | { value: string; label: string; icon?: string; disabled?: boolean })[] | ['Off', 'Low', 'Medium', 'High', 'Max'] | The chips. A string is both value and label. An icon is an Iconify name. |
value | string | undefined | Controlled value, bound with v-model:value. Outside changes jump. |
defaultValue | string | undefined | Initial value when uncontrolled. Falls back to the first item. |
chipColor | string | '#27272a' | Surface of an unchosen chip. |
activeColor | string | '#f5f5f5' | Surface of the chosen chip. |
textColor | string | '#f5f5f5' | Label of an unchosen chip, and the hover tone. |
activeTextColor | string | '#18181b' | Label of the chosen chip. |
size | 'sm' | 'md' | 'lg' | 'md' | Chip height 28, 36 or 44 pixels. Large is the touch-first size. |
gap | number | 8 | Rest spacing between chips in pixels. |
radius | number | 18 | Corner radius in pixels. 18 is a pill at medium. |
swell | number | 0.2 | How much the chosen chip grows. It also sets the room the neighbours make. |
barge | number | 6 | Extra pixels every neighbour is shoved beyond that room. 0 only makes room. |
shrink | number | 0.05 | How much every unchosen chip gives up. |
jelly | number | 1 | The wide-before-tall split. 0 swells uniformly, 1.5 exaggerates it. |
bounce | number | 0.25 | One minus the damping ratio. 0 arrives and stops, 0.4 rings. |
stagger | number | 22 | Milliseconds per row step before a neighbour moves. 0 moves the row as a slab. |
stiffness | number | 580 | Spring stiffness of the chosen chip. Neighbours soften from it with distance. |
disabled | boolean | false | Fades the group and ignores input. |
ariaLabel | string | 'Options' | Accessible name of the group. |
| Event | Description |
|---|---|
change | Emitted on the commit with the value and the index, before the motion ends. |
update:value | Emitted alongside change, for v-model:value. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Arrow Right + Arrow Down | Selects the next enabled chip, wrapping around. |
| Arrow Left + Arrow Up | Selects the previous enabled chip, wrapping around. |
| Home + End | Selects the first or the last enabled chip. |
| Space + Enter | Selects the focused chip. |