Radio

An enhanced native <input type="radio"> supporting radio groups and controlled values.

Basic Usage

Basic usage

Option 1Option 2

Example

Radios sharing the same name are mutually exclusive (the component syncs across Shadow DOM); without name, each is independent — use the same name or oas-radio-group for mutual exclusion.

Radio Group

Radio group

Choose a payment methodWeChat PayAlipayBank card

Example

The group is controlled via value; each item's value acts as the option identifier. The group manages single-selection exclusivity.

Single-item Disabled

Single disabled

SelectableDisabledDisabled & selected

Example

Item-level disabled only disables that item: not clickable, not focusable (native disabled semantics), other items in the group are unaffected; disable the whole group via oas-radio-group's disabled (see below).

Disabled

Disabled

Selected & disabledDisabledDisabled

Example

Events

Change events

Option AOption BOption C

Example

Listen to oas-change: a single item dispatches detail: { checked, value }, the group dispatches detail: { value }.

API

Attributes

Attribute	Description	Type	Default
checked	Whether checked	boolean	—
disabled	Disabled	boolean	—
name	Native group name (managed inside the group)	string	—
value	Option identifier	string	—

Events

Event	Description
oas-change	Change, detail: { checked, value }; group: detail: { value }

Slots

Name	Description
default	—

oas-radio-group: value (selected value), disabled, supports slot="label" to set the group title.