Components
Inputs
Inputs cover text entry plus shopping-specific controls like plan context and number-of-lines selection. The line counter now mirrors the compact pill stepper treatment from the plans experience.
Text inputs
Shopping controls
Plan context
Number of lines
1
Observed input rules
Text input
48px height, 10px radius, 2px #DADADA border
Line counter
44px pill container, 32px minus/plus icon buttons
Icon hover
rgba(170, 168, 163, 0.12) muted hover fill
Disabled step
Keeps shape, removes fill, softens icon to neutral gray
Code
<Input placeholder="ZIP code" />
<LineCounter value={lines} onChange={setLines} />
<SegmentedControl value={segment} onChange={setSegment} options={options} />