Split strategies Gagan

Interactive prototype of the "split how?" screen. A single live form with four modes — Equal, Manual, %, Shares — all preserving their state independently. The split bar morphs in real time as you adjust values, and drag handles let you reshape splits directly on the bar in Manual and Percent modes.

What to test

  • Switch between Equal / Manual / % / Shares via the segmented control and watch the bar morph
  • In Equal mode, tap the × button next to a person to exclude them and see shares redistribute
  • In Manual mode, edit any amount field — the "auto" pill moves to the last-edited person and the elastic slot absorbs the remainder; watch the delta chip go green when balanced
  • In % mode, drag the handles on the split bar to adjust percentages; observe the over/under delta chip and its flash-to-green when you hit 100%
  • In Shares mode, use the stepper +/− buttons to assign half-share increments and watch the bar reflow
  • Tap "add expense ✓" when the split is unbalanced — a toast explains what's still wrong

Components used

  • Segmented — 4-option animated thumb control (Equal / Manual / % / Shares)
  • SplitBar — draggable colour-coded bar with per-boundary drag handles
  • EqualPane — per-person exclude toggle with × button
  • ManualPane — direct rupee input with auto/elastic badge
  • PercentPane — percent input with lock toggle and mini fill bar
  • SharesPane — half-increment stepper (+/− 0.5)
  • Tick — CSS re-mount animation on value change

Viewport

390 x 844 — iPhone 15 standard. iOS 26 liquid glass design language. No tweaks panel.