Radio

A radio input component for selecting a single option from a set, with support for both standalone and group usage.

Import#

import { Radio, RadioGroup } from "asheeui";

Usage#

"use client";

import { useState } from "react";
import { Radio, RadioGroup } from "asheeui";

export default function Basic() {
	const [value, setValue] = useState<string>("");

	return (
		<RadioGroup
			value={value}
			onChange={setValue}
			label="Select your preference"
		>
			<Radio value="option1" label="Option 1" />
			<Radio value="option2" label="Option 2" />
			<Radio value="option3" label="Option 3" />
		</RadioGroup>
	);
}

Examples#

Variant#

Orientation#

Controlled#

Default value#

Standalone radio (without group)#

With description on individual radios#

Inheritance#

Radio and RadioGroup share common foundational props with <Input />, including:

• size, radius, variant, color
• label, labelAlign, description, message
• status, required, disabled
• className

What Radio adds#

Radio extends Input with the following additional features:

What Radio modifies#

What Radio does not inherit#

The following Input props are not available on Radio/RadioGroup:

RadioGroup Props#

Radio Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Radio and RadioGroup read defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Radio /> or <RadioGroup />
2. Component config: components.radio in your ashee.config
3. Theme default: defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    radio: {
      size: "md",
      color: "primary",
      radius: "full",
      variant: "default",
      labelAlign: "left",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  radius: "full",
  variant: "default",
  color: "primary",
  status: "default",
  labelAlign: "left",
}

Accessibility#

• Renders native <input type="radio"> elements with proper semantics
• Group uses role="radiogroup"
• Labels are associated with inputs via htmlFor/id
• Supports keyboard navigation with arrow keys
• Implements focus-visible rings for keyboard navigation
• Uses aria-invalid for error states
• Uses aria-disabled for disabled states
• Card variant maintains proper focus indicators

Notes#

• Group Context: Radio components inherit properties (size, color, variant, disabled, status) from their parent RadioGroup.
• Card Variant: The card variant wraps each radio option in a bordered container that highlights when selected.
• Controlled vs Uncontrolled: Use value/onChange on RadioGroup for controlled usage, or defaultValue for uncontrolled.
• Standalone Usage: Radio can be used without a RadioGroup by providing name and handling state manually.
• Radius: When using variant="card", the full radius is automatically mapped to xl for proper visual appearance.
• Individual Descriptions: Each radio can have its own description text, useful for explaining different options.
• Orientation: RadioGroup supports horizontal and vertical layouts for flexible design.
• Inheritance: Radio and RadioGroup share common props with Input but omit input-specific adornments.