Fieldbook
Sign in

Inputs

Plan radio list

A vertical list of radio choices styled for picking a pricing plan, one filled dot marking the current selection.

Using Plan radio list

A vertical list of radio choices styled for picking a pricing plan, one filled dot marking the current selection.

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: accent, defaultPlan

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

Dot radio list
1951Dot radio listInputsA vertical list of radio options with circular indicators, where selecting one fills it with a dot and clears the rest.
Labeled radio group
2797Labeled radio groupInputsA compact vertical group of radio options, each with an inline text label, for a single settings choice.
Preference checklist
2033Preference checklistInputsA stack of labeled preference rows, each with its own accent-colored checkbox that fills and draws a checkmark independently.
Radio dot select
2023Radio dot selectInputsA vertical radio group where picking an option pops a dot into its circle while the previous dot shrinks and fades away.
Spring dot radio group
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.
Addon Input Group
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.