Size Picker

Size selection: tiles or a scrolling row, out-of-stock states. Pro · Forms and input › Color, size and emoji

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add size-picker

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { SizePicker } from 'valyro-ui-pro';

Prop	Type	Default
`options` *	`SizeOption[]`		Sizes in order: "36", "M", "US 8.5".
`value`	`string`		Selected size (controlled); an empty string means none.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`name`	`string`		Name of the native radios, so the size submits with a form.
`layout`	`'scroll' \| 'wrap'`	`'wrap'`	`scroll`: one row that scrolls sideways with faded edges; `wrap`: rows of tiles. Default `wrap`.
`variant`	`'box' \| 'plain'`	`'box'`	`box`: tiles; `plain`: large bare numbers, the selected one bold (a product page). Default `box`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tile size. Default `md`.