RadioButton – Once UI

The RadioButton component provides a selectable control for mutually exclusive options in a group. It's built on top of the InteractiveDetails component for consistent styling and behavior.

RadioButton

Monthly subscription

Billed monthly at $9.99

<RadioButton
  name="subscription"
  value="monthly"
  label="Monthly subscription"
  description="Billed monthly at $9.99"
  onToggle={() => console.log('Selected monthly')}
/>

State

Use the checked prop to control the radio button state externally.

State

Monthly subscription

Billed monthly at $9.99

Annual subscription

Billed annually at $99.99

Lifetime access

One-time payment of $299.99

Selected plan: monthly

const [selectedPlan, setSelectedPlan] = useState<string>("monthly");

const handleToggle = (value: string) => {
  setSelectedPlan(value);
};

<Column gap="16">
  <RadioButton
    name="subscription"
    value="monthly"
    label="Monthly subscription"
    description="Billed monthly at $9.99"
    checked={selectedPlan === "monthly"}
    onToggle={() => handleToggle("monthly")}
  />
  <RadioButton
    name="subscription"
    value="annual"
    label="Annual subscription"
    description="Billed annually at $99.99"
    checked={selectedPlan === "annual"}
    onToggle={() => handleToggle("annual")}
  />
  <RadioButton
    name="subscription"
    value="lifetime"
    label="Lifetime access"
    description="One-time payment of $299.99"
    checked={selectedPlan === "lifetime"}
    onToggle={() => handleToggle("lifetime")}
  />
</Column>

Disabled

Disable the radio button to prevent user interaction.

Disabled

Disabled radio button

<RadioButton
  label="Disabled radio button"
  disabled
/>

Hover

Disable the hover pulse animation by setting hoverable to false.

Hover

No hover effect

<RadioButton
  label="No hover effect"
  hoverable={false}
/>

API reference

	Type	Default
style	React.CSSProperties	—
className	string	—
checked Whether this one is chosen, controlled. Leave it out and the radio keeps its own state.	boolean	—
defaultChecked The starting state when `checked` is left out.	boolean	false
name Group name. Radios sharing one are mutually exclusive.	string	—
value Form field value.	string	—
disabled Block interaction.	boolean	—
onToggle Called with the new state when it is picked: true when it becomes the chosen one.	(checked: boolean) => void	—
hoverable Highlight the row on hover.	boolean	true
label	ReactNode	—
description	ReactNode	—
iconButtonProps Props forwarded to the icon button beside the label.	IconButtonProps	—
…and every React.InputHTMLAttributes prop	inherited	—