Mockup · Labor Forecast Editor v2 · % picker comparison

How should the cell let a PM lock a percentage?

Five UI patterns for setting the hard-locked percentage on a forecast cell. Each card is fully interactive. Pick the one that feels best — that's what we ship.

Scenario

You're locking the % for Plumbing — Labor & Materials in June 2026 on Tulsa Community College SE Campus Restrooms. Bucket remaining: $85,000. Auto-suggested: 22% = $18,700.

Current

Number input + Set button

What's deployed today. Type, hit Set.

Plumbing — Labor & Materials

Remaining: $85K

% $18,700

Pro: Familiar. Fast for power users who know exactly what they want.
Con: Not "slick." Boring. Requires typing.

Recommended

Slider + number input

Drag for feel, type for precision. Both bind live.

Plumbing — Labor & Materials

Remaining: $85K · live preview below

22 %

$18,700

% ↔ $

Pro: Fast feel + exact entry. shadcn Slider already in the design system. No new deps.
Con: Three inputs in the popover; slightly busier than a single control. Covers every entry style: drag, %, or $.

Adds dependency

iOS-style scroll wheel

"Rolling dial" — flick or scroll a vertical wheel.

Plumbing — Labor & Materials

Remaining: $85K

$18,700

Pro: Most "slick." Great on touch (future field app).
Con: Awkward with mouse — fights with page scroll. Needs a 3rd-party lib (~5KB). Less common in business apps.

Custom

Drag-on-cell scrubbing

No popover. Click + drag the cell up/down. Photoshop-style.

Plumbing — Labor & Materials

Drag the cell vertically — up=more, down=less

22%

$18,700

Click and drag the cell to scrub the percentage.

Pro: Most "in-grid" feel. No popover means no context loss. Tactile.
Con: PMs have to learn the gesture. Easy to under/overshoot. No exact-typing path.

Simplest

Big stepper (− / +)

Big number, − and + buttons either side. Hold to repeat.

Plumbing — Labor & Materials

Remaining: $85K

percent

= $18,700

Pro: Clear, big tap target. Touch-friendly. No learning curve.
Con: Slow for big jumps (22% → 75% = 53 clicks). Boring.

Quick comparison

Pattern	Speed for big jumps	Speed for exact %	Mouse feel	Touch / future field app	Cost
Current (input only)	★★★ type 75	★★★ type exact	OK	Awkward (keyboard)	$0
Slider + input ★	★★★ drag	★★★ type	Great	Great	$0 (shadcn)
iOS wheel	★★ flick	★ no exact entry	Awkward	★★★ great	+ ~5KB lib
Drag-on-cell	★★ depends on sensitivity	★ no exact entry	Tactile but learn-curve	Bad on touch (gesture conflict)	Custom code
Stepper (− / +)	★ many clicks	★★ click count	OK	Great (big tap targets)	$0

Cell states & re-open behavior

Click ✕ to clear the locked %. The cell drops back to auto. Click the cell again to re-open the picker. Interactive.

22%

$18,700

Click ✕ to clear the locked %.

The ✕ sits top-right of the cell. Clearing doesn't delete history — it just unlocks back to auto-distribution.

Generated 2026-04-25 · docs/mocks/labor_forecast_pct_picker_mock.html