ns-ui
Vertical radio group whose single choice is embodied by exactly one indicator: a dot resting on the checked option's notch that, on re-selection, elongates into a thin traveling line along a hairline rail (ticking each notch it passes) and contracts back down into a dot once it arrives — no spring, no overshoot, and never a line at rest.
Use when an exclusive choice among ordered options where the distance between them is part of the information (plan tiers, shipping speeds, environments), so exactly one indicator travels the rail and ticks each notch it passes rather than one dot blinking out and another blinking on; pick segmented-control-fling instead when the options are few, horizontal and the control should be draggable, or rating-stamp when the choice is a level on a scale rather than a labelled alternative.
Install
npx shadcn add https://design.helpmarq.comns-ui / radio-group-pin — one pin, exactly one choice
Farther choices, longer trip along the rail.
Three environments, one armed at a time.
shipping / standard · env / staging
Click a row, or focus the group and use arrow keys. The dot elongates into a line while it travels to whatever row you pick, then contracts back into a dot — no bounce. Reduced motion teleports it.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name for the radiogroup, e.g. "Shipping speed". |
| options | PinTumblerOption[] | — | — |
| value? | string | — | Controlled selected value. |
| defaultValue? | string | — | Initial value when uncontrolled. @default options[0]?.value |
| onValueChange? | (value: string) => void | — | — |
| name? | string | — | Shared `name` for the native radios. @default a generated id |
| className? | string | — | — |