Radio

const Radio: NamedExoticComponent<{ about?: string; accessKey?: string; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "inline" | "both" | "list"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "mixed" | "false" | "true"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "location" | "page" | "false" | "true" | "step" | "date" | "time"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "none" | "link" | "copy" | "move" | "execute" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label?: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "assertive" | "polite"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "mixed" | "false" | "true"; aria-readonly?: Booleanish; aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; autoCapitalize?: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; checked?: boolean; children?: ReactNode; className?: string; color?: string; content?: string; contentEditable?: "inherit" | Booleanish | "plaintext-only"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: Booleanish; enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send"; error?: boolean; errorMessage?: string; exportparts?: string; helperText?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label?: string; labelPosition?: RadioLabelPosition; lang?: string; name?: string; nonce?: string; onAbort?: ReactEventHandler<HTMLInputElement>; onAbortCapture?: ReactEventHandler<HTMLInputElement>; onAnimationEnd?: AnimationEventHandler<HTMLInputElement>; onAnimationEndCapture?: AnimationEventHandler<HTMLInputElement>; onAnimationIteration?: AnimationEventHandler<HTMLInputElement>; onAnimationIterationCapture?: AnimationEventHandler<HTMLInputElement>; onAnimationStart?: AnimationEventHandler<HTMLInputElement>; onAnimationStartCapture?: AnimationEventHandler<HTMLInputElement>; onAuxClick?: MouseEventHandler<HTMLInputElement>; onAuxClickCapture?: MouseEventHandler<HTMLInputElement>; onBeforeInput?: InputEventHandler<HTMLInputElement>; onBeforeInputCapture?: InputEventHandler<HTMLInputElement>; onBeforeToggle?: ToggleEventHandler<HTMLInputElement>; onBlur?: FocusEventHandler<HTMLInputElement>; onBlurCapture?: FocusEventHandler<HTMLInputElement>; onCanPlay?: ReactEventHandler<HTMLInputElement>; onCanPlayCapture?: ReactEventHandler<HTMLInputElement>; onCanPlayThrough?: ReactEventHandler<HTMLInputElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLInputElement>; onChange?: (value, event) => void; onChangeCapture?: ChangeEventHandler<HTMLInputElement, Element>; onClick?: MouseEventHandler<HTMLInputElement>; onClickCapture?: MouseEventHandler<HTMLInputElement>; onCompositionEnd?: CompositionEventHandler<HTMLInputElement>; onCompositionEndCapture?: CompositionEventHandler<HTMLInputElement>; onCompositionStart?: CompositionEventHandler<HTMLInputElement>; onCompositionStartCapture?: CompositionEventHandler<HTMLInputElement>; onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>; onCompositionUpdateCapture?: CompositionEventHandler<HTMLInputElement>; onContextMenu?: MouseEventHandler<HTMLInputElement>; onContextMenuCapture?: MouseEventHandler<HTMLInputElement>; onCopy?: ClipboardEventHandler<HTMLInputElement>; onCopyCapture?: ClipboardEventHandler<HTMLInputElement>; onCut?: ClipboardEventHandler<HTMLInputElement>; onCutCapture?: ClipboardEventHandler<HTMLInputElement>; onDoubleClick?: MouseEventHandler<HTMLInputElement>; onDoubleClickCapture?: MouseEventHandler<HTMLInputElement>; onDrag?: DragEventHandler<HTMLInputElement>; onDragCapture?: DragEventHandler<HTMLInputElement>; onDragEnd?: DragEventHandler<HTMLInputElement>; onDragEndCapture?: DragEventHandler<HTMLInputElement>; onDragEnter?: DragEventHandler<HTMLInputElement>; onDragEnterCapture?: DragEventHandler<HTMLInputElement>; onDragExit?: DragEventHandler<HTMLInputElement>; onDragExitCapture?: DragEventHandler<HTMLInputElement>; onDragLeave?: DragEventHandler<HTMLInputElement>; onDragLeaveCapture?: DragEventHandler<HTMLInputElement>; onDragOver?: DragEventHandler<HTMLInputElement>; onDragOverCapture?: DragEventHandler<HTMLInputElement>; onDragStart?: DragEventHandler<HTMLInputElement>; onDragStartCapture?: DragEventHandler<HTMLInputElement>; onDrop?: DragEventHandler<HTMLInputElement>; onDropCapture?: DragEventHandler<HTMLInputElement>; onDurationChange?: ReactEventHandler<HTMLInputElement>; onDurationChangeCapture?: ReactEventHandler<HTMLInputElement>; onEmptied?: ReactEventHandler<HTMLInputElement>; onEmptiedCapture?: ReactEventHandler<HTMLInputElement>; onEncrypted?: ReactEventHandler<HTMLInputElement>; onEncryptedCapture?: ReactEventHandler<HTMLInputElement>; onEnded?: ReactEventHandler<HTMLInputElement>; onEndedCapture?: ReactEventHandler<HTMLInputElement>; onError?: ReactEventHandler<HTMLInputElement>; onErrorCapture?: ReactEventHandler<HTMLInputElement>; onFocus?: FocusEventHandler<HTMLInputElement>; onFocusCapture?: FocusEventHandler<HTMLInputElement>; onGotPointerCapture?: PointerEventHandler<HTMLInputElement>; onGotPointerCaptureCapture?: PointerEventHandler<HTMLInputElement>; onInput?: InputEventHandler<HTMLInputElement>; onInputCapture?: InputEventHandler<HTMLInputElement>; onInvalid?: ReactEventHandler<HTMLInputElement>; onInvalidCapture?: ReactEventHandler<HTMLInputElement>; onKeyDown?: KeyboardEventHandler<HTMLInputElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLInputElement>; onKeyPress?: KeyboardEventHandler<HTMLInputElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLInputElement>; onKeyUp?: KeyboardEventHandler<HTMLInputElement>; onKeyUpCapture?: KeyboardEventHandler<HTMLInputElement>; onLoad?: ReactEventHandler<HTMLInputElement>; onLoadCapture?: ReactEventHandler<HTMLInputElement>; onLoadedData?: ReactEventHandler<HTMLInputElement>; onLoadedDataCapture?: ReactEventHandler<HTMLInputElement>; onLoadedMetadata?: ReactEventHandler<HTMLInputElement>; onLoadedMetadataCapture?: ReactEventHandler<HTMLInputElement>; onLoadStart?: ReactEventHandler<HTMLInputElement>; onLoadStartCapture?: ReactEventHandler<HTMLInputElement>; onLostPointerCapture?: PointerEventHandler<HTMLInputElement>; onLostPointerCaptureCapture?: PointerEventHandler<HTMLInputElement>; onMouseDown?: MouseEventHandler<HTMLInputElement>; onMouseDownCapture?: MouseEventHandler<HTMLInputElement>; onMouseEnter?: MouseEventHandler<HTMLInputElement>; onMouseLeave?: MouseEventHandler<HTMLInputElement>; onMouseMove?: MouseEventHandler<HTMLInputElement>; onMouseMoveCapture?: MouseEventHandler<HTMLInputElement>; onMouseOut?: MouseEventHandler<HTMLInputElement>; onMouseOutCapture?: MouseEventHandler<HTMLInputElement>; onMouseOver?: MouseEventHandler<HTMLInputElement>; onMouseOverCapture?: MouseEventHandler<HTMLInputElement>; onMouseUp?: MouseEventHandler<HTMLInputElement>; onMouseUpCapture?: MouseEventHandler<HTMLInputElement>; onPaste?: ClipboardEventHandler<HTMLInputElement>; onPasteCapture?: ClipboardEventHandler<HTMLInputElement>; onPause?: ReactEventHandler<HTMLInputElement>; onPauseCapture?: ReactEventHandler<HTMLInputElement>; onPlay?: ReactEventHandler<HTMLInputElement>; onPlayCapture?: ReactEventHandler<HTMLInputElement>; onPlaying?: ReactEventHandler<HTMLInputElement>; onPlayingCapture?: ReactEventHandler<HTMLInputElement>; onPointerCancel?: PointerEventHandler<HTMLInputElement>; onPointerCancelCapture?: PointerEventHandler<HTMLInputElement>; onPointerDown?: PointerEventHandler<HTMLInputElement>; onPointerDownCapture?: PointerEventHandler<HTMLInputElement>; onPointerEnter?: PointerEventHandler<HTMLInputElement>; onPointerLeave?: PointerEventHandler<HTMLInputElement>; onPointerMove?: PointerEventHandler<HTMLInputElement>; onPointerMoveCapture?: PointerEventHandler<HTMLInputElement>; onPointerOut?: PointerEventHandler<HTMLInputElement>; onPointerOutCapture?: PointerEventHandler<HTMLInputElement>; onPointerOver?: PointerEventHandler<HTMLInputElement>; onPointerOverCapture?: PointerEventHandler<HTMLInputElement>; onPointerUp?: PointerEventHandler<HTMLInputElement>; onPointerUpCapture?: PointerEventHandler<HTMLInputElement>; onProgress?: ReactEventHandler<HTMLInputElement>; onProgressCapture?: ReactEventHandler<HTMLInputElement>; onRateChange?: ReactEventHandler<HTMLInputElement>; onRateChangeCapture?: ReactEventHandler<HTMLInputElement>; onReset?: ReactEventHandler<HTMLInputElement>; onResetCapture?: ReactEventHandler<HTMLInputElement>; onScroll?: UIEventHandler<HTMLInputElement>; onScrollCapture?: UIEventHandler<HTMLInputElement>; onScrollEnd?: UIEventHandler<HTMLInputElement>; onScrollEndCapture?: UIEventHandler<HTMLInputElement>; onSeeked?: ReactEventHandler<HTMLInputElement>; onSeekedCapture?: ReactEventHandler<HTMLInputElement>; onSeeking?: ReactEventHandler<HTMLInputElement>; onSeekingCapture?: ReactEventHandler<HTMLInputElement>; onSelect?: ReactEventHandler<HTMLInputElement>; onSelectCapture?: ReactEventHandler<HTMLInputElement>; onStalled?: ReactEventHandler<HTMLInputElement>; onStalledCapture?: ReactEventHandler<HTMLInputElement>; onSubmit?: SubmitEventHandler<HTMLInputElement>; onSubmitCapture?: SubmitEventHandler<HTMLInputElement>; onSuspend?: ReactEventHandler<HTMLInputElement>; onSuspendCapture?: ReactEventHandler<HTMLInputElement>; onTimeUpdate?: ReactEventHandler<HTMLInputElement>; onTimeUpdateCapture?: ReactEventHandler<HTMLInputElement>; onToggle?: ToggleEventHandler<HTMLInputElement>; onTouchCancel?: TouchEventHandler<HTMLInputElement>; onTouchCancelCapture?: TouchEventHandler<HTMLInputElement>; onTouchEnd?: TouchEventHandler<HTMLInputElement>; onTouchEndCapture?: TouchEventHandler<HTMLInputElement>; onTouchMove?: TouchEventHandler<HTMLInputElement>; onTouchMoveCapture?: TouchEventHandler<HTMLInputElement>; onTouchStart?: TouchEventHandler<HTMLInputElement>; onTouchStartCapture?: TouchEventHandler<HTMLInputElement>; onTransitionCancel?: TransitionEventHandler<HTMLInputElement>; onTransitionCancelCapture?: TransitionEventHandler<HTMLInputElement>; onTransitionEnd?: TransitionEventHandler<HTMLInputElement>; onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement>; onTransitionRun?: TransitionEventHandler<HTMLInputElement>; onTransitionRunCapture?: TransitionEventHandler<HTMLInputElement>; onTransitionStart?: TransitionEventHandler<HTMLInputElement>; onTransitionStartCapture?: TransitionEventHandler<HTMLInputElement>; onVolumeChange?: ReactEventHandler<HTMLInputElement>; onVolumeChangeCapture?: ReactEventHandler<HTMLInputElement>; onWaiting?: ReactEventHandler<HTMLInputElement>; onWaitingCapture?: ReactEventHandler<HTMLInputElement>; onWheel?: WheelEventHandler<HTMLInputElement>; onWheelCapture?: WheelEventHandler<HTMLInputElement>; part?: string; popover?: "" | "auto" | "manual" | "hint"; popoverTarget?: string; popoverTargetAction?: "toggle" | "hide" | "show"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLInputElement>; rel?: string; resource?: string; results?: number; rev?: string; role?: AriaRole; security?: string; size?: Size; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; testId?: string; title?: string; translate?: "yes" | "no"; typeof?: string; unselectable?: "off" | "on"; value: string; vocab?: string; }>

Defined in: src/components/primitives/Radio/Radio.tsx:55

Radio component for mutually exclusive selection in property panels, settings, and form interfaces.

Works standalone (controlled or uncontrolled) or as a child of RadioGroup, which manages exclusive selection across siblings via context. When inside a RadioGroup, the group’s value, name, size, disabled, and error override the corresponding props on individual radios.

Example

<Radio value="local" label="Local" />

<RadioGroup value={space} onChange={setSpace} label="Coordinate space">
  <Radio value="local" label="Local" />
  <Radio value="world" label="World" />
  <Radio value="parent" label="Parent" />
</RadioGroup>