mxkaske
Home·Craft·Brew

Wheel Picker

June 2025·1 min read·

Super simple CSS and HTML only wheel picker that supports keyboard navigation.

import {
  WheelPicker,
  WheelPickerSelect,
  WheelPickerOption,
} from "@/components/craft/wheel-picker/wheel-picker";
import { useState } from "react";
 
const ITEMS = ["Item 1", "Item 2", "Item 3"];
 
export function WheelPickerDemo() {
  const [currentIndex, setCurrentIndex] = useState(0);
  return (
    <WheelPicker
      items={ITEMS}
      currentIndex={currentIndex}
      onIndexChange={setCurrentIndex}
      // radius in px
      radius={28}
    >
      <WheelPickerSelect>
        <WheelPickerOption />
      </WheelPickerSelect>
    </WheelPicker>
  );
}

Inspired by 3dtransforms.desandro.com/carousel.