A scrolling wheel for picking a value, like the iOS picker.
bun add xiod-ui1import { WheelPickerGroup, WheelPicker } from "xiod-ui/wheel-picker";1<WheelPickerGroup>2 <WheelPicker />3</WheelPickerGroup>Detailed documentation of properties and options.
Accepts render, plus every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | The content of the component. |
Accepts render, plus every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
optionsReq | WheelPickerOption<T>[] | – | The options on the wheel. |
classNames | WheelPickerClassNames | – | Classes for the parts of the wheel. |
defaultValue | T | – | The value selected at first, when it isn't controlled. |
disabled | boolean | false | Whether the wheel ignores input and leaves the tab order. |
dragSensitivity | number | 3 | How quickly the wheel slows after a flick. Higher values stop it sooner. |
infinite | boolean | false | Whether the options repeat, so the wheel turns endlessly in either direction. |
labels | Partial<WheelPickerLabels> | – | Replaces the built-in text for this instance. See |
name | string | – | Submits the selected value with a form under this name. |
onValueChange | ((value: T) => void) | – | Called with the new value when the wheel settles on an option. |
optionItemHeight | number | – | The height of each option, in pixels. Defaults to 28, 36 or 44 depending on |
readOnly | boolean | false | Whether the wheel can be focused and read but not turned. |
scrollSensitivity | number | 5 | How far and fast the wheel turns for mouse-wheel and keyboard scrolling. Higher values turn it further and faster. |
size | "lg"|"md"|"sm" | md | The size of the component. |
value | T | – | The selected value. Use with |
visibleCount | number | 20 | The number of options around the whole wheel, which sets how sharply it curves. A quarter of them show on each side of the selected option. Use a multiple of 4. |