# Radio button [Radio buttons](https://m3.material.io/components/radio-button) let people select one option from a set of options.

A list of items with radio buttons and one selected.

* [Design article](https://m3.material.io/components/radio-button) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/radio) ## Usage Radios behave like [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) elements and form a group with the same `name` attribute. Only one radio can be selected in a group. Radios can be pre-selected by adding a `checked` attribute. Add a `value` to identify which radio is selected in a form. ```html ``` ### Label Associate a label with a radio using the `` element. ```html Cats

Dogs ``` > Note: do not wrap radios inside of a ``, which stops screen readers > from correctly announcing the number of radios in a group. ## Accessibility Add an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute to radios without labels or radios whose labels need to be more descriptive. Place radios inside a [`role="radiogroup"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role). Radio groups must display a label, either with `aria-label` or `aria-labelledby`. ```html

Starting position

1st

2nd

``` > Note: radios are not automatically labelled by `` elements and always > need an `aria-label`. See b/294081528. ## Theming Radios support [Material theming](../theming/README.md) and can be customized in terms of color. ### Tokens Token | Default value -------------------------------- | ----------------------------------- `--md-radio-icon-color` | `--md-sys-color-on-surface-variant` `--md-radio-selected-icon-color` | `--md-sys-color-primary` `--md-radio-icon-size` | `20px` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-radio.scss) ### Example ```html

``` ## API ### MdRadio <md-radio> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `required` | `required` | `boolean` | `false` | Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. | | `value` | `value` | `string` | `'on'` | The element value to use in form submission when checked. | | `checked` | `checked` | `boolean` | `undefined` | | | `disabled` | | `boolean` | `undefined` | | | `name` | | `string` | `undefined` | | #### Methods | Method | Parameters | Returns | Description | | --- | --- | --- | --- | | `formResetCallback` | _None_ | `void` | | | `formStateRestoreCallback` | `state` | `void` | | #### Events | Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description | | --- | --- | --- | --- | --- | | `input` | `InputEvent` | Yes | No | Dispatched when the value changes from user interaction. | | `change` | `Event` | Yes | Yes | Dispatched when the value changes from user interaction. |