Inputs

Vertical choice dial

A tall column of labels that spins under drag with momentum and snaps the option nearest the center into place as the active choice.

Checkout

Delivery speed

Drag the list or use the arrow keys. Current pick: Standard

Using Vertical choice dial

A tall column of labels that spins under drag with momentum and snaps the option nearest the center into place as the active choice.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: activeColor, textColor, spacing, loop

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2766Exposure dial sliderInputsA photo preview with a circular exposure readout in its corner above a draggable ruler of ticks that sets the exposure value in EV.

2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

2108Appointment Range CardInputsA card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block.

2109Appointment Scheduler CardInputsA single date picker framed inside a titled card with a jump to today button in the corner, styled for booking one appointment.

2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.

2805Autosize text fieldInputsA multi-line text input that grows taller as the person types, up to a generous limit, with an accent focus ring and a disabled state.