Radio

Radio

The Radio component provides a set of mutually exclusive options for selection.

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

yarn

yarn add @aetherui-kit/core

Basic Usage

Option 1 Option 2 Option 3

<ae-radio-group name='options'>
<ae-radio value='option1'>Option 1</ae-radio>
<ae-radio value='option2'>Option 2</ae-radio>
<ae-radio value='option3'>Option 3</ae-radio>
</ae-radio-group>

Horizontal Orientation

Option 1 Option 2 Option 3

<ae-radio-group name='horizontal-options' style='--ae-radio-group-direction: row'>
<ae-radio value='option1'>Option 1</ae-radio>
<ae-radio value='option2'>Option 2</ae-radio>
<ae-radio value='option3'>Option 3</ae-radio>
</ae-radio-group>

Disabled State

Option 1 Option 2 (Disabled) Option 3

<ae-radio-group name='disabled-example'>
<ae-radio value='option1'>Option 1</ae-radio>
<ae-radio value='option2' disabled>Option 2 (Disabled)</ae-radio>
<ae-radio value='option3'>Option 3</ae-radio>
</ae-radio-group>

Props

RadioGroup Props

Name	Type	Default	Description
name	string	''	Name attribute for all radio buttons in the group
value	string	''	Selected value
disabled	boolean	false	Whether all radio buttons in the group are disabled

Radio Props

Name	Type	Default	Description
value	string	''	Value of the radio option
disabled	boolean	false	Whether the radio is disabled
checked	boolean	false	Whether the radio is checked

Events

RadioGroup Events

Event	Payload	Description
ae-radio-group-change	{ value: string }	Fired when the selected value changes

Radio Events

Event	Payload	Description
ae-radio-change	{ checked: boolean, value: string }	Fired when a radio button is selected

Accessibility

The radio component follows WAI-ARIA guidelines:

• Uses proper ARIA roles (radiogroup, radio)
• Implements keyboard navigation (arrow keys to navigate, Space/Enter to select)
• Maintains proper focus management
• Includes proper ARIA attributes (aria-checked, aria-disabled)

Styling

The Radio component can be styled using CSS custom properties and shadow parts.

Custom Colors

Custom Color Option 1 Custom Color Option 2

<style>
ae-radio-group {
  --ae-radio-color: #6366f1;
  --ae-radio-hover-color: #4f46e5;
  --ae-radio-checked-color: #4f46e5;
}
</style>

<ae-radio-group name='custom-color'>
<ae-radio value="option1">Custom Color Option 1</ae-radio>
<ae-radio value="option2">Custom Color Option 2</ae-radio>
</ae-radio-group>

Custom Size

Large Option 1 Large Option 2

<style>
ae-radio-group.large {
  --ae-radio-size: 24px;
  --ae-radio-label-font-size: 1.125rem;
}
</style>

<ae-radio-group name='large-size' class="large">
<ae-radio value="option1">Large Option 1</ae-radio>
<ae-radio value="option2">Large Option 2</ae-radio>
</ae-radio-group>

CSS Custom Properties

Property	Description	Default
--ae-radio-size	Size of the radio button	16px
--ae-radio-color	Color of the unchecked radio	var(--ae-color-primary)
--ae-radio-hover-color	Color on hover	var(--ae-color-primary-hover)
--ae-radio-checked-color	Color when checked	var(--ae-color-primary)
--ae-radio-disabled-color	Color when disabled	var(--ae-color-disabled)
--ae-radio-label-font-size	Font size of the label	1rem
--ae-radio-label-color	Color of the label text	var(--ae-color-text)

CSS Shadow Parts

Part	Description
control	The radio button circle
indicator	The inner checked indicator
label	The label text container