Props

Property	Type	Default	Description
state	'unchecked' | 'checked'	—	Required. Single selection has no mixed state. Unchecked draws an empty circle.
size	'sm' | 'md'	'md'	20px or 24px. The inner dot is 8px or 10px. Omit it inside a radio that has no size, and the circle stays 18px.
isDisabled	boolean	false	Visual only. The circle fades and an empty one uses the muted background. The owning control keeps the disabled semantics.

Slots

• The default slot replaces the inner dot and is drawn inside the circle.
• An empty slot, including a condition that is false, keeps the circle and the dot.
• Slot content is decorative. Do not put a focusable control in it.

Accessibility

• The root always has aria-hidden="true".
• The component sets no interactive role and provides no click or keyboard behavior.
• A passed role, tab order, content editable flag, or attribute whose name starts with aria is dropped.
• The exposed element is the circle.

Theme

• .astryx-radio-indicator: the circle.
• .astryx-radio-indicator-dot: the inner dot when chosen.
• data-state: unchecked or checked.
• data-size: sm or md. Omitted when no size is passed.
• data-disabled: disabled styling.

A chosen circle uses the input status color first, so a field error or warning still tints it, then the accent color. Hover comes from an ancestor .astryx-indicator-scope, and only for a pointer that can hover. Reduced motion turns the transition off. In forced colors, an empty circle uses the canvas color and a chosen circle uses the highlight.

The focus ring is painted by the radio on .astryx-radio-native:focus-visible + .astryx-radio-indicator. The circle's radius is what that outline follows.