Radio buttons

Radio buttons pick one option from a short list, with every option in view. A radio set groups them under one name, so choosing one clears the others and a form submits only the chosen value. It lays them out in a column or, for two or three short options, a row. Each set below holds a different choice, so pick one.

Bicycle

Tram

Rocket

Yes

Dark

Light

Window

Aisle

Now

Later

Tea

Coffee

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a selection control⁠

Four components capture a choice in a form. Each suits a different job:

Checkbox: one or more options picked from a short list, or a single yes to confirm, such as "I agree to the terms".
Switch: a setting that takes effect the moment it is flipped, such as Wi-Fi or dark mode.
Radio buttons: exactly one option from a short list shown in full, such as delivery speed.
Select: exactly one option from a longer list kept closed until opened, such as country.

Two jobs belong elsewhere. A choice made by clicking a compact tag, such as filtering results, is a filter chip, and a two-state setting in a toolbar is a toggle button.

Built in⁠

Radio buttons that share a name act as one group with no script, and a radio set writes name onto each radio for you, generating one when none exists, so two unnamed sets never merge into one group.
The checked radio holds the group's one Tab stop, and the arrow keys move and check.
A checked radio submits its value under its name, and required on any radio requires the whole group.
A column or a row of options with horizontal, 36 pixels apart.
The radio set is the radio group assistive technology announces, named by the aria-label or aria-labelledby you give it.
Radios inside a disabled fieldset disable themselves; no disabled on each one.
The touch target is at least 48 by 48 pixels even though the circle paints smaller (touch-target).
Each radio's label is the default slot's content, so a radio needs no separate label element.

Using radio buttons well⁠

Put each set of options in one radio set, and give the set a visible label that names the choice.
Give every option a visible label after its control, in the radio's default slot.
Stack the options in a column by default. Keep horizontal for two or three short options, because a row never wraps.
Select a sensible default when one exists. With none, nothing is chosen until the user picks, and a form can still submit that state.

These rules follow Material 3 Expressive's guidance for radio buttons, on material.io.

Groups⁠

Put radio buttons in a radio set, cw-radio-set, and they form one group: checking one unchecks the rest. Set checked on the option the group starts with. A click or an arrow key fires change, which the demo uses to report the choice.

Layout⁠

horizontal lays the radio buttons out in a row instead of a column, with 36 pixels between them. A column is the easiest to scan, so reserve a row for two or three short options. The row never wraps: a row of long labels overflows instead of breaking onto a second line.

Group label⁠

Give the radio set an aria-labelledby holding the id of the element that names the choice, which then names the group. Each radio button keeps its own label as well: the set labels the group, never the options.

Forms and names⁠

name is the name every radio button submits under and groups by. Set it on the radio set, not on each radio. Leave it empty and the set uses the first name a radio already carries, and generates a name only when none carries one, so name the set for any group in a form.

The set's value is the checked radio's value, and setting it checks the radio that holds it. A form submits the checked radio's own value under the group name, and a form that holds no checked radio submits nothing for the group.

Requiring a choice⁠

A checked radio submits its value under its name; the others in the group submit nothing. Set the name once on the radio set, or on each radio. A radio with no name is a group of one. Setting required on any radio requires a choice from the whole group.

The demo wires a form as a page would. The preview cannot submit it, so the button reports from its own click, and the form's reset button returns the group to its authored state.

Touch target⁠

touch-target sets the area that takes a touch. Omit it and the radio takes the touch target from your style configuration, which is overflow unless you have changed it.

With overflow, the layout holds the circle and the touch area spills past it. With wrapper, the layout holds the full touch area, so neighbors sit farther away. none keeps only the circle as the target.

Disabled⁠

disabled takes a radio out of the Tab order and ignores clicks. A radio inside a disabled <fieldset> is disabled too, and its disabled reads true. Turn on the switch in the demo to disable the second radio; the fieldset below is disabled from the start.

Radio set

Radio

Properties⁠

Property	Attribute	Type	Description
`compareWith`		`(a: TItem, b: TItem) => boolean`	Decides whether two values are the same, in place of the default matching and of `valueKey`.
`horizontal`	`horizontal`	`boolean`default `false`	Lays the radios out in a row instead of a column. See Layout.
`name`	`name`	`string`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`value`	`value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`valueKey`	`value-key`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Slots⁠

Slot	Description
(default)	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Events⁠

Event	Type	Detail	Description
`input`	`InputEvent`	—	Fired when the user changes the selection. It bubbles and is composed.
`change`	`SelectionChangeEvent`	`SelectionChangeEventDetail<TItem>`	Fired when the set's `value` changes other than by setting `value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values are the same, in place of the default matching and of `valueKey`.
`horizontal`	`boolean`default `false`	Lays the radios out in a row instead of a column. See Layout.
`name`	`string`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Children⁠

Child	Description
`children`	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Events⁠

Prop	Argument	Description
`onInput`	`React.ChangeEvent<HTMLInputElement>`	Fired when the user changes the selection. It bubbles and is composed.
`onChange`	`SelectionChangeEvent<TItem>`	Fired when the set's `value` changes other than by setting `value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles. Its `detail` carries `value` and `values`.

Parameters⁠

Parameter	Type	Description
`Horizontal`	`bool?`default `false`	Lays the radios out in a row instead of a column. See Layout.
`Name`	`string?`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`Value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`ValueExpression`	`Expression<Func<TItem>>?`	Gets or sets an expression that identifies the bound value.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Event callbacks⁠

Parameter	Type	Description
`OnInput`	`EventCallback<ChangeEventArgs>`	Fired when the user changes the selection. It bubbles and is composed.
`OnChange`	`EventCallback<SelectionChangeEventArgs<TItem>>`	Fired when the set's `Value` changes other than by setting `Value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles. Its `detail` carries `Value` and `values`.

Inputs⁠

Input	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values are the same, in place of the default matching and of `valueKey`.
`horizontal`	`boolean`default `false`	Lays the radios out in a row instead of a column. See Layout.
`name`	`string`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Content projection⁠

Content	Description
content with no `slot`	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Outputs⁠

Output	Event	Description
`cwInput`	`InputEvent`	Fired when the user changes the selection. It bubbles and is composed.
`cwChange`	`SelectionChangeEvent`	Fired when the set's `value` changes other than by setting `value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles. Its `detail` carries `value` and `values`.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values are the same, in place of the default matching and of `valueKey`.
`horizontal`	`boolean`default `false`	Lays the radios out in a row instead of a column. See Layout.
`name`	`string`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Slots⁠

Slot	Description
`default`	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Events⁠

Event	Type	Description
`input`	`InputEvent`	Fired when the user changes the selection. It bubbles and is composed.
`change`	`SelectionChangeEvent`	Fired when the set's `value` changes other than by setting `value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles. Its `detail` carries `value` and `values`.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values are the same, in place of the default matching and of `valueKey`.
`horizontal`	`boolean`default `false`	Lays the radios out in a row instead of a column. See Layout.
`name`	`string`	The name every radio in the set submits under, and groups by. Set it here rather than on each radio. Left empty, the set gives every radio the first name one of them carries, and generates a name only when none carries one. See Forms and names, Requiring a choice.
`value`	`TItem`	The checked radio's value, or `null` when no radio is checked. Setting it checks the radio whose value matches; a value no radio holds is kept, with no radio checked, until a radio holding it arrives. When several radios hold the value and none of them is checked, the first of them is checked. See Forms and names, Requiring a choice.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.

name overrides any name on the radios and renames them all when it changes. A radio's own name changed afterward is not re-resolved.

Snippets⁠

Snippet	Description
`children`	The radio buttons to be displayed.

Only direct cw-radio children are named. A radio wrapped in another element keeps its own name.

Events⁠

Prop	Type	Description
`onInput`	`InputEvent`	Fired when the user changes the selection. It bubbles and is composed.
`onChange`	`SelectionChangeEvent`	Fired when the set's `value` changes other than by setting `value`: the user's selection, or code checking or unchecking one of its radios. It bubbles, as do the radios' own `change` events, so a listener on the set checks `event.target` to tell them apart. It bubbles. Its `detail` carries `value` and `values`.

Properties⁠

Property	Attribute	Type	Description
`checked`	`checked`	`boolean`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`disabled`	`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`name`	`name`	`string`	The name the radio's `value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`required`	`required`	`boolean`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`tabIndex`	`tabindex`	`number`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`validationMessage`read-only		`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only		`ValidityState`	The element's `ValidityState`.
`value`	`value`	`unknown`default `on`	The value the radio stands for. A radio set's `value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.
`willValidate`read-only		`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

A form reset returns each radio to its authored checked state.

Slots⁠

Slot	Description
(default)	The label content.

Events⁠

Event	Type	Detail	Description
`input`	`InputEvent`	—	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`change`	`Event`	—	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `checked` from code does not fire it on that radio. It bubbles.

Methods⁠

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.

Props⁠

Prop	Type	Description
`checked`	`boolean`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`name`	`string`	The name the radio's `value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`required`	`boolean`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`tabIndex`	`number`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`validationMessage`read-only (ref)	`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only (ref)	`ValidityState`	The element's `ValidityState`.
`value`	`unknown`default `on`	The value the radio stands for. A radio set's `value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.
`willValidate`read-only (ref)	`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

A form reset returns each radio to its authored checked state.

Children⁠

Child	Description
`children`	The label content.

Events⁠

Prop	Argument	Description
`onInput`	`React.ChangeEvent<HTMLInputElement>`	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`onChange`	`React.ChangeEvent<HTMLInputElement>`	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `checked` from code does not fire it on that radio. It bubbles.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.

Parameters⁠

Parameter	Type	Description
`Checked`	`bool?`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`Disabled`	`bool?`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`Name`	`string?`	The name the radio's `Value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`Required`	`bool?`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`TabIndex`	`int?`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`Value`	`TItem`default `on`	The value the radio stands for. A radio set's `Value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.

A form reset returns each radio to its authored checked state.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The label content.

Event callbacks⁠

Parameter	Type	Description
`OnInput`	`EventCallback<ChangeEventArgs>`	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`OnChange`	`EventCallback<ChangeEventArgs>`	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `Checked` from code does not fire it on that radio. It bubbles.

Inputs⁠

Input	Type	Description
`checked`	`boolean`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`name`	`string`	The name the radio's `value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`required`	`boolean`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`tabIndex`	`number`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`value`	`unknown`default `on`	The value the radio stands for. A radio set's `value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.

A form reset returns each radio to its authored checked state.

Content projection⁠

Content	Description
content with no `slot`	The label content.

Outputs⁠

Output	Event	Description
`cwInput`	`InputEvent`	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`cwChange`	`Event`	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `checked` from code does not fire it on that radio. It bubbles.

Props⁠

Prop	Type	Description
`checked`	`boolean`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`name`	`string`	The name the radio's `value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`required`	`boolean`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`tabIndex`	`number`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`value`	`unknown`default `on`	The value the radio stands for. A radio set's `value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.

A form reset returns each radio to its authored checked state.

Slots⁠

Slot	Description
`default`	The label content.

Events⁠

Event	Type	Description
`input`	`InputEvent`	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`change`	`Event`	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `checked` from code does not fire it on that radio. It bubbles.

Props⁠

Prop	Type	Description
`checked`	`boolean`	Whether the radio is the selected one in its group. A user's selection updates it. See Groups.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled.
`name`	`string`	The name the radio's `value` is submitted under while it is checked. Radios that share a name in the same page or component form a group, in which checking one unchecks the others. See Forms and names, Requiring a choice.
`required`	`boolean`default `false`	Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. See Requiring a choice.
`tabIndex`	`number`	The element's position in the tab order: `0` puts it in the order, and `-1` leaves it out while script can still focus it. A group, such as a set of tabs, manages it for its members.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Touch target.
`value`	`unknown`default `on`	The value the radio stands for. A radio set's `value` is the checked radio's value. It can be any value when set from code; the attribute gives a string. A form receives it as a string while the radio is checked. See Forms and names, Requiring a choice.

A form reset returns each radio to its authored checked state.

Snippets⁠

Snippet	Description
`children`	The label content.

Events⁠

Prop	Type	Description
`onInput`	`InputEvent`	Dispatched after `change` when the user selects the radio with a click or Space, including when it is already selected. An arrow key moves the selection without it. It bubbles and is composed.
`onChange`	`Event`	Dispatched when the user selects the radio with a click, Space or an arrow key, and when another radio in its group is selected and unchecks it. A click also fires it when the radio is already selected, and before `input`. Setting `checked` from code does not fire it on that radio. It bubbles.

Radio set

Radio

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Token	Value
`--ct-radio-set-horizontal-spacing`	`36px` `--ct-radio-set-horizontal-spacing`
`--ct-radio-set-vertical-spacing`	`36px` `--ct-radio-set-vertical-spacing`

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Names and states⁠

A radio set is a radiogroup and each radio button a radio, announced with its checked state; together they follow the WAI-ARIA Authoring Practices: Radio Group pattern.

The radio set is the group, and takes its name from the aria-labelledby or aria-label you give it. Point aria-labelledby at a visible label for the choice; the set has no label property and no slot for one.
The group announces its orientation as horizontal in a row and vertical in a column.
Each radio button names itself from its slotted text or its aria-label. Give every radio a visible label, or an aria-label where its spoken name matters; the set labels the group, not the options.
checked is announced as the checked state, and aria-label is the only ARIA attribute to set on a radio.
A radio announces itself as a radio and the set announces the group, so set no role on either. A radio outside a set draws no group of its own.
The set's value is the checked radio's value, and it is announced through that radio. The set has no disabled state of its own: disable each radio, or set it required, on its own.

Keyboard and focus⁠

Key	Action
Tab	Enters the group at its one Tab stop: the checked radio, or the first enabled radio when none is checked.
Shift+Tab	Leaves the group the same way.
Arrow keys	Move to the next or previous enabled radio and check it, wrapping at the ends.
Space	Checks the focused radio.

Tab and Shift+Tab are the browser's own; the radios handle Space and the arrow keys, and the set adds none. Home and End do nothing.

All four arrow keys work in both orientations: Up and Down work in a row; Left and Right work in a column.
Each radio draws a focus ring on keyboard focus only.
A disabled radio is never the Tab stop, and the arrow keys skip it. A disabled radio that is checked takes the whole group out of the Tab order, and so does disabling every radio.

Pointer and touch⁠

Each radio has a touch target of at least 48 by 48 pixels by default, above the 24 by 24 pixel minimum of WCAG 2.5.8, whatever size the circle paints. The 36-pixel gap between radios keeps the targets apart.
none shrinks the touch area to the circle, which no longer guarantees that minimum. The Touch target example shows all three values.

Display settings⁠

In forced colors, a radio paints its circle in CanvasText, and a disabled radio in GrayText. Hover draws a round 2 pixel ButtonText ring, and press a 4 pixel one.
Under a reduced-motion preference, a radio drops its selection transitions and animation.
In right-to-left text, the Left arrow moves to the next radio and the Right arrow to the previous one. Nothing else mirrors.

Standards⁠

With its defaults, radio buttons in a radio set meet three WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)

Three more depend on how you use them, each with the one thing you do:

1.3.1 Info and Relationships (A): put the radios in a radio set, give the group a visible label and point the set's aria-labelledby at it.
3.3.2 Labels or Instructions (A): label every option and the group.
4.1.2 Name, Role, Value (A): give each radio slotted text or an aria-label.

Token	Value
`--ct-radio-container-end-end-radius`	same as `--ct-radio-container-radius` `--ct-radio-container-end-end-radius`
`--ct-radio-container-end-start-radius`	same as `--ct-radio-container-radius` `--ct-radio-container-end-start-radius`
`--ct-radio-container-radius`	`2px` `--ct-radio-container-radius`
`--ct-radio-container-start-end-radius`	same as `--ct-radio-container-radius` `--ct-radio-container-start-end-radius`
`--ct-radio-container-start-start-radius`	same as `--ct-radio-container-radius` `--ct-radio-container-start-start-radius`
`--ct-radio-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-radio-disabled-label-text-color`
`--ct-radio-disabled-label-text-opacity`	`0.38` `--ct-radio-disabled-label-text-opacity`
`--ct-radio-disabled-selected-icon-color`	`--ct-sys-color-on-surface` `--ct-radio-disabled-selected-icon-color`
`--ct-radio-disabled-selected-icon-opacity`	`0.38` `--ct-radio-disabled-selected-icon-opacity`
`--ct-radio-disabled-unselected-icon-color`	`--ct-sys-color-on-surface` `--ct-radio-disabled-unselected-icon-color`
`--ct-radio-disabled-unselected-icon-opacity`	`0.38` `--ct-radio-disabled-unselected-icon-opacity`
`--ct-radio-focus-icon-color`	`--ct-sys-color-on-surface` `--ct-radio-focus-icon-color`
`--ct-radio-hover-icon-color`	`--ct-sys-color-on-surface` `--ct-radio-hover-icon-color`
`--ct-radio-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-radio-hover-state-layer-color`
`--ct-radio-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-radio-hover-state-layer-opacity`
`--ct-radio-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-radio-icon-color`
`--ct-radio-icon-size`	`20px` `--ct-radio-icon-size`
`--ct-radio-label-gap`	`21px` `--ct-radio-label-gap`
`--ct-radio-label-text-color`	`--ct-sys-color-on-surface` `--ct-radio-label-text-color`
`--ct-radio-label-text-font`	`--ct-sys-typescale-label-large-font` `--ct-radio-label-text-font`
`--ct-radio-label-text-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-radio-label-text-line-height`
`--ct-radio-label-text-size`	`--ct-sys-typescale-label-large-size` `--ct-radio-label-text-size`
`--ct-radio-label-text-weight`	`--ct-sys-typescale-label-large-weight` `--ct-radio-label-text-weight`
`--ct-radio-pressed-icon-color`	`--ct-sys-color-on-surface` `--ct-radio-pressed-icon-color`
`--ct-radio-pressed-state-layer-color`	`--ct-sys-color-primary` `--ct-radio-pressed-state-layer-color`
`--ct-radio-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-radio-pressed-state-layer-opacity`
`--ct-radio-selected-focus-icon-color`	`--ct-sys-color-primary` `--ct-radio-selected-focus-icon-color`
`--ct-radio-selected-hover-icon-color`	`--ct-sys-color-primary` `--ct-radio-selected-hover-icon-color`
`--ct-radio-selected-hover-state-layer-color`	`--ct-sys-color-primary` `--ct-radio-selected-hover-state-layer-color`
`--ct-radio-selected-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-radio-selected-hover-state-layer-opacity`
`--ct-radio-selected-icon-color`	`--ct-sys-color-primary` `--ct-radio-selected-icon-color`
`--ct-radio-selected-pressed-icon-color`	`--ct-sys-color-primary` `--ct-radio-selected-pressed-icon-color`
`--ct-radio-selected-pressed-state-layer-color`	`--ct-sys-color-on-surface` `--ct-radio-selected-pressed-state-layer-color`
`--ct-radio-selected-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-radio-selected-pressed-state-layer-opacity`
`--ct-radio-state-layer-size`	`40px` `--ct-radio-state-layer-size`

Radio buttons

Reference docs⁠link

Choosing a selection control⁠link

Built in⁠link

Using radio buttons well⁠link

Groups⁠link

Layout⁠link

Group label⁠link

Forms and names⁠link

Requiring a choice⁠link

Touch target⁠link

Disabled⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Properties⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Children⁠link

Events⁠link

Methods⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Tokens⁠link

Tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a selection control⁠

Built in⁠

Using radio buttons well⁠

Groups⁠

Layout⁠

Group label⁠

Forms and names⁠

Requiring a choice⁠

Touch target⁠

Disabled⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Properties⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Children⁠

Events⁠

Methods⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Tokens⁠

Tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠