-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Open
Labels
Description
Description
Request for a Material Design inline wheel picker component - a vertically scrolling list with snap-to-center behavior for time, date, and option selection.
Problem with Current TimePicker
The radial clock dial (TimePicker) has UX issues:
| Clock Dial | Wheel Picker |
|---|---|
| Requires dialog/popup | Embeds inline in any layout |
| Two-step selection (hour → minute) | Single view, parallel selection |
| Imprecise touch targets on small screens | Large, linear touch targets |
| Unfamiliar to many users | Intuitive scroll-and-snap |
| Awkward in bottom sheets | Native fit for bottom sheets |
| Fixed size | Adapts to container |
Accessibility Benefits
The wheel picker improves accessibility over the radial TimePicker:
- Motor: Vertical swipe gestures are easier than precise circular targeting
- Cognitive: Linear selection requires no analog clock literacy
- Vision: Larger, linearly-arranged items with clear selection highlight
- TalkBack: Standard list semantics vs. problematic radial navigation
- Switch access: Natural mapping to vertical navigation controls
Use Cases
- Inline time selection - Embedded in forms or bottom sheets without spawning dialogs
- Date selection - Day/month/year wheels side by side
- General option selection - Any finite list (durations, quantities, etc.)
Why This Should Be a Standard Component
- No official inline solution -
TimePickerrequires a dialog;TimeInputis text-only - Common need - Developers resort to deprecated
NumberPickeror third-party libraries - Compose gap - Material3 Compose lacks an inline picker for embedded use cases
- Better ergonomics - Linear scrolling is more accessible than radial selection
Proposed API
@Composable
fun <T> WheelPicker(
items: List<T>,
selectedItem: T,
onItemSelected: (T) -> Unit,
modifier: Modifier = Modifier,
visibleItems: Int = 5,
itemContent: @Composable (item: T, isSelected: Boolean) -> Unit
)Key Features
- Snap-to-center fling behavior
- Center selection highlight
- Opacity gradient for context
- Edge fade gradients
- Generic type support
- State hoisting
Reference Implementation
I've built a production implementation in KashCal featuring:
- Generic
VerticalWheelPicker<T> - Specialized
WheelTimePickerwith 12/24h support - Locale-aware AM/PM
- Configurable minute intervals
Happy to contribute code toward an official component.