Radio

Option AOption B

Contract

Overview

Machine-readable contract from Component Spec.

component: radioexport: Radioversion: 1attributes: data-refineui=radio

Anatomy

Part	data-refineui
root	radio

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Native
radio	input	true

Keyboard

Key	Action	Native
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Option AOption B

Recipe → Tokens

Slot bindings for variant="default" — declared in Radio/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
label	—	default	radio.label.default	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
label	—	description	radio.label.description	foregroundSecondary	neutral600	neutral350	text-refineui-alias-foreground-secondary
label	—	disabled	radio.label.disabled	foregroundDisabled	neutral400	neutral600	text-refineui-alias-foreground-disabled
control	—	dot	radio.control.dot	backgroundBrand	primaryBlack	primaryGray	bg-refineui-alias-background-brand
control	—	dotHover	radio.control.dotHover	backgroundBrandActive	neutralBlack	primaryLightGray	bg-refineui-alias-background-brand-active
control	—	background	radio.control.background	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary
control	—	disabledDot	radio.control.disabledDot	foregroundDisabled	neutral400	neutral600	bg-refineui-alias-foreground-disabled
control	—	border.default	radio.control.borderDefault	borderDefault	neutral300	neutral650	border-refineui-thin border-refineui-alias-border-default
control	—	border.focus	radio.control.borderFocus	borderStrong	neutral450	neutral550	border-refineui-thin border-refineui-alias-border-strong
control	—	border.disabled	radio.control.borderDisabled	borderDisabled	neutral250	neutral700	border-refineui-thin border-refineui-alias-border-disabled

Component token trace

All paths in token-trace-v2.json prefixed with radio.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
radio.control.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
radio.control.borderDefault	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
radio.control.borderDisabled	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
radio.control.borderFocus	borderStrong	neutral450	neutral550	#BBBBBB	#8D8D8D
radio.control.disabledDot	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
radio.control.dot	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
radio.control.dotHover	backgroundBrandActive	neutralBlack	primaryLightGray	#000000	#E6E6E6
radio.label.default	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
radio.label.description	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
radio.label.disabled	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Radio } from "@refineui/react";

<Radio name="plan" value="basic" label="Basic Plan" />

<Radio
  name="plan"
  value="pro"
  label="Pro Plan"
  description="Includes advanced features"
  checked={selectedPlan === "pro"}
  onChange={(e) => setSelectedPlan(e.target.value)}
/>

<Radio
  name="plan"
  value="enterprise"
  label="Enterprise"
  allowUncheck
/>

API Reference

Prop	Default	Type	Description
label	—	string	Radio button label text.
description	—	string	Optional description below the label.
allowUncheck	false	boolean	Allows unchecking a selected radio.
checked	—	boolean	Controlled checked state.
value	—	string	Value for form submission.
name	—	string	Name for grouping radio buttons.
disabled	false	boolean	Disables interaction.