KQ-502 · SIZE/TILES
Size Tiles
A size chooser that answers with weight instead of layout. The chosen tile inflates to 1.06 on snap and its border thickens, both transform and colour, so nothing beside it shifts; unavailable tiles draw a diagonal strike through themselves on flick when hovered or focused and carry 'out of stock' for a screen reader. Arrow keys move and wrap, Home and End jump, Space selects, and the fit note beneath cross-fades over a measured height.
KQ-502 · SIZE/TILES
Fernworks field jacketM
Out of stockTrue to size, hits at the hip.
Size M · 2 of 6 out of stock
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/size-tiles
Props
- sizes
- SizeTile[]
- default —
- The sizes: value, label, availability, and an optional fit note.
- value / defaultValue
- string
- default —
- Controlled or initial chosen size.
- onValueChange
- (value: string) => void
- default —
- Fires on choice; an unavailable size never fires it.
- label
- string
- default "Size"
- Visible group label; the chosen size reads out beside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| sizes | SizeTile[] | — | The sizes: value, label, availability, and an optional fit note. |
| value / defaultValue | string | — | Controlled or initial chosen size. |
| onValueChange | (value: string) => void | — | Fires on choice; an unavailable size never fires it. |
| label | string | "Size" | Visible group label; the chosen size reads out beside it. |