Wheel
Use one Wheel for a single choice or place columns together for related values.
Source
LLM docs
Package
Examples
3
Properties
37
Basics
Spin or tap the wheel to choose a season. The selected value updates as the wheel moves.
Loading demo…
import { useState } from 'react';
import { Block, Text, Wheel } from '@plocks/ui';
const seasons = [
{ value: 'Spring', label: 'Spring' },
{ value: 'Summer', label: 'Summer' },
{ value: 'Autumn', label: 'Autumn' },
{ value: 'Winter', label: 'Winter' },
];
export function Demo() {
const [season, setSeason] = useState('Summer');
return (
<Block align="center" gap="sm">
<Wheel items={seasons} value={season} onChange={setSeason} label="Season" h={180} />
<Text>Selected: {season}</Text>
</Block>
);
}Time columns
Pair two independently controlled wheels to select an hour and minute.
Loading demo…
import { useState } from 'react';
import { Block, Row, Text, Wheel } from '@plocks/ui';
const hours = Array.from({ length: 12 }, (_, index) => ({
value: index + 1,
label: String(index + 1).padStart(2, '0'),
}));
const minutes = [0, 15, 30, 45].map((value) => ({
value,
label: String(value).padStart(2, '0'),
}));
export function Demo() {
const [hour, setHour] = useState(9);
const [minute, setMinute] = useState(30);
return (
<Block align="center" gap="sm">
<Row gap="sm">
<Wheel items={hours} value={hour} onChange={setHour} label="Hour" h={180} itemHeight={36} />
<Wheel
items={minutes}
value={minute}
onChange={setMinute}
label="Minute"
h={180}
itemHeight={36}
/>
</Row>
<Text>
Time: {hour}:{String(minute).padStart(2, '0')}
</Text>
</Block>
);
}Disabled wheel
Disable a wheel when its value should remain visible but cannot be changed.
Loading demo…
import { Wheel } from '@plocks/ui';
const options = [
{ value: 'Small', label: 'Small' },
{ value: 'Medium', label: 'Medium' },
{ value: 'Large', label: 'Large' },
];
export function Demo() {
return <Wheel items={options} value="Medium" label="Size" disabled />;
}React Native design for iOS, Android, and Web.
Quick Links
Resources