Wheel Picker React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import WheelPicker from "./WheelPicker";

export default function Example() {
  return (
    <WheelPicker
      items={[
        {
          "value": "paper",
          "label": "Paper"
        },
        {
          "value": "linen",
          "label": "Linen"
        },
        {
          "value": "clay",
          "label": "Clay"
        },
        {
          "value": "stone",
          "label": "Stone"
        },
        {
          "value": "glass",
          "label": "Glass"
        },
        {
          "value": "metal",
          "label": "Metal"
        },
        {
          "value": "ink",
          "label": "Ink"
        }
      ]}
      defaultValue={"stone"}
      label={"Select a material"}
      itemHeight={48}
      accentColor={"#e1cee9"}
      background={"#1c1821"}
    />
  );
}

Using Wheel Picker

Supply labelled options through items and name the picker through label. itemHeight controls the spacing of the cylindrical list.

Use value with onValueChange for external selection, or defaultValue for local state. Keep labels concise enough to fit the selected row.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { value, label, disabled? }. Use unique string values.
value	string	No	undefined	Optional controlled selected value.
defaultValue	string	No	undefined	Initial uncontrolled value; otherwise select the first enabled item.
onValueChange	function	No	undefined	Called with the requested selected value.
label	string	No	"Choose an option"	Accessible group label and prefix for previous/next control labels.
itemHeight	number	No	48	Row height in pixels, clamped to at least 30.
accentColor	string	No	"#dec8eb"	Text, selection band, and focus colour.
background	string	No	"#1c1821"	Wheel surface colour.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.