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>

Examples

Checked State

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.

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

Disabled State

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

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

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.

mdui-radio-group API

Properties

AttributePropertyReflectTypeDefault
disableddisabledbooleanfalse

Disables the radio group when set.

formformstring-

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>.

namenamestring''

The name of the radio group, which is submitted with form data.

valuevaluestring''

The value of the selected radio button, which is submitted with form data.

defaultValuestring''

The default selected value. Resets to this value when form is reset. This value can only be set via JavaScript property.

requiredrequiredbooleanfalse

Requires a radio selection when the form is submitted.

validityValidityState-

A ValidityState object that represents the element's validity states.

validationMessagestring-

The element's validation message. This is empty if the element meets its constraints.

Methods

NameParametersReturns
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

AttributePropertyReflectTypeDefault
valuevaluestring''

Specifies the value of the radio.

disableddisabledbooleanfalse

Disables the radio when set.

checkedcheckedbooleanfalse

Sets the radio to the checked state.

unchecked-iconuncheckedIconstring-

Specifies the Material Icons name for the unchecked state. Alternatively, use slot="unchecked-icon".

checked-iconcheckedIconstring-

Specifies the Material Icons name for the checked state. Alternatively, use slot="checked-icon".

autofocusautofocusbooleanfalse

Determines if the element should be focused when the page loads.

tabindextabIndexnumber-

Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

NameParametersReturns
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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons