Inputs

Dot radio list

A vertical list of radio options with circular indicators, where selecting one fills it with a dot and clears the rest.

Using Dot radio list

A vertical list of radio options with circular indicators, where selecting one fills it with a dot and clears the rest.

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: optionCount, initialSelected, accentColor

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2023Radio dot selectInputsA vertical radio group where picking an option pops a dot into its circle while the previous dot shrinks and fades away.

2050Spring dot radio groupInputsA radio group whose selected dot springs in with a small overshoot while the previous dot shrinks away, crossing over instead of snapping.

1932Check draw toggleInputsA square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale.

1934Checkmark draw checkboxInputsA square checkbox that answers a check by drawing a checkmark one stroke at a time, and shows a short dash instead when its state is only partly set.

2375Labeled checkboxInputsA small square checkbox paired with a text label, shown plain, with helper text, disabled, and as a card that highlights its border when checked.

2797Labeled radio groupInputsA compact vertical group of radio options, each with an inline text label, for a single settings choice.