RadioGroup

The controls exposed on the instance panel.

Prop	Type	Behaviour
options	array	The choices; each is a label and the value it submits.
default	string	Value selected on first render.
lockedValue	string	Pins the selection to one value.
disabled	boolean	Blocks interaction across the whole group.
direction	enum	vertical stacks the options; horizontal runs them across.
orientation	enum	Reading order used for keyboard navigation.
gap	number	Space between options.
itemGap	number	Space between a dot and its own label.
size	number	Diameter of each dot.
border	boolean	Draws an outline around each dot.
width	number	Outline width when border is on.
active	color	Outline colour of the selected dot.
inactive	color	Outline colour of unselected dots.
activeBG	color	Fill of the selected dot.
inactiveBG	color	Fill of unselected dots.
dot	color	Colour of the inner mark.
hoverBG	color	Dot fill while hovered.
focusRing	color	Focus ring for keyboard users.
radius	number	Corner radius of each dot.
label	boolean	Whether option labels are shown.
side	enum	left or right — which side of the dot its label sits on.
fontSize	enum	Theme type step for the labels.
weight	enum	light · regular · medium · semibold · bold.
color	color	Label colour.
sizing	enum	fill stretches the group to its container; fit hugs the content.
truncate	number	Line count before a label is clipped; 0 never clips.
name	string	Field name used on form submission.
required	boolean	Marks the field as required in a form.
transition	transition	Animation used between states.
onValueChange	event	Fires whenever the selection changes.

Prop	Type	Behaviour
options	array	The choices; each is a label and the value it submits.
default	string	Value selected on first render.
lockedValue	string	Pins the selection to one value.
disabled	boolean	Blocks interaction across the whole group.
direction	enum	vertical stacks the options; horizontal runs them across.
orientation	enum	Reading order used for keyboard navigation.
gap	number	Space between options.
itemGap	number	Space between a dot and its own label.
size	number	Diameter of each dot.
border	boolean	Draws an outline around each dot.
width	number	Outline width when border is on.
active	color	Outline colour of the selected dot.
inactive	color	Outline colour of unselected dots.
activeBG	color	Fill of the selected dot.
inactiveBG	color	Fill of unselected dots.
dot	color	Colour of the inner mark.
hoverBG	color	Dot fill while hovered.
focusRing	color	Focus ring for keyboard users.
radius	number	Corner radius of each dot.
label	boolean	Whether option labels are shown.
side	enum	left or right — which side of the dot its label sits on.
fontSize	enum	Theme type step for the labels.
weight	enum	light · regular · medium · semibold · bold.
color	color	Label colour.
sizing	enum	fill stretches the group to its container; fit hugs the content.
truncate	number	Line count before a label is clipped; 0 never clips.
name	string	Field name used on form submission.
required	boolean	Marks the field as required in a form.
transition	transition	Animation used between states.
onValueChange	event	Fires whenever the selection changes.

Guidance carried over from the component definition.

One choice from a short list that should all be visible at once.

The options are stable data — a label and a value each.

Keyboard navigation and focus rings should come for free.

The field posts a single name and value with a form.

More than one option can be picked — use Checkbox or TagPicker.

The list is long enough that it belongs in a dropdown — use SelectX.

The options need cards with their own layout — use RadioCards.