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.