Radio

The radio group component is designed for selecting a single option from a set of options.

Usage

Import the component:

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

Import the TypeScript type:

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

Example:

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

The value property of the <mdui-radio-group> component corresponds to the value of the currently selected <mdui-radio> component. You can change the selected radio button by updating the value property of the <mdui-radio-group> component.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

Code

The <mdui-radio> component can also be used independently. In this case, use the checked property to access and modify the checked state.

Radio

<mdui-radio checked>Radio</mdui-radio>

Code

Disabled State

To disable the entire radio group, add the disabled attribute to the <mdui-radio-group> component.

Chinese

English

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

Code

To disable a specific radio button, add the disabled attribute to the <mdui-radio> component.

Chinese

English

<mdui-radio-group>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english" disabled>English</mdui-radio>
</mdui-radio-group>

Code

Icons

You can set Material Icons for the unchecked and checked states of the radio button using the unchecked-icon and checked-icon attributes, respectively. Alternatively, you can use the unchecked-icon and checked-icon slots.

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinese</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    English
  </mdui-radio>
</mdui-radio-group>

Code

`mdui-radio-group` API

Properties

Attribute	Property	Type	Default
`disabled`	`disabled`	`boolean`	`false`
Disables the radio group when set.
`form`	`form`	`string`	-
Associates the radio group with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the radio group is associated with its parent `<form>`, if any. This attribute allows radio group elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.
`name`	`name`	`string`	`''`
The name of the radio group, which is submitted with form data.
`value`	`value`	`string`	`''`
The value of the selected radio button, which is submitted with form data.
	`defaultValue`	`string`	`''`
The default selected value. Resets to this value when form is reset. This value can only be set via JavaScript property.
`required`	`required`	`boolean`	`false`
Requires a radio selection when the form is submitted.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
The element's validation message. This is empty if the element meets its constraints.

Methods

Name	Parameters	Returns
`checkValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event and returns `false`. If it's valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If it's valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the text is non-empty, it indicates that the field is invalid.

Events

Name
`change`
Emitted when the selected value changes.
`input`
Emitted when the selected value changes.
`invalid`
Emitted when the form control's validity is checked and it doesn't meet the constraints.

Slots

Name
(default)
`<mdui-radio>` elements.

`mdui-radio` API

Properties

Attribute	Property	Type	Default
`value`	`value`	`string`	`''`
Specifies the value of the radio.
`disabled`	`disabled`	`boolean`	`false`
Disables the radio when set.
`checked`	`checked`	`boolean`	`false`
Sets the radio to the checked state.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Specifies the Material Icons name for the unchecked state. Alternatively, use `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Specifies the Material Icons name for the checked state. Alternatively, use `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

Name	Parameters	Returns
`click`		`void`
Simulates a mouse click on the element.
`focus`	`options: FocusOptions` (Optional)	`void`
Sets focus on the element. An optional parameter can be an object with a `preventScroll` property. If `preventScroll` is set to `true`, the page will not scroll to bring the focused element into view.
`blur`		`void`
Removes focus from the element.

Events

Name
`focus`
Emitted when the radio gains focus.
`blur`
Emitted when the radio loses focus.
`change`
Emitted when the radio is selected.

Slots

Name
(default)
Text content.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.

CSS Parts

Name
`control`
Container for the left icon.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.
`label`
Text content.

Checkbox

Up Next

Switch

Radio

Usage

Examples

Checked State

Disabled State

Icons

`mdui-radio-group` API

Properties

Methods

Events

Slots

`mdui-radio` API

Properties

Methods

Events

Slots

CSS Parts