Skip to content

Feature Request: Inline Wheel Picker Component #4998

@one-kash

Description

@one-kash

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

  1. No official inline solution - TimePicker requires a dialog; TimeInput is text-only
  2. Common need - Developers resort to deprecated NumberPicker or third-party libraries
  3. Compose gap - Material3 Compose lacks an inline picker for embedded use cases
  4. 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 WheelTimePicker with 12/24h support
  • Locale-aware AM/PM
  • Configurable minute intervals

Happy to contribute code toward an official component.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions