RadioRadio

El componente Radio permite a los usuarios seleccionar una opción de un conjunto, asegurando que solo una opción esté seleccionada a la vez.

Uso

Importa los componentes cuando los necesites:

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

Importa los tipos TypeScript cuando los necesites:

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

Uso:

Chino

Inglés

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chino</mdui-radio>
  <mdui-radio value="english">Inglés</mdui-radio>
</mdui-radio-group>

El valor del atributo value del componente <mdui-radio-group> es el valor del componente <mdui-radio> seleccionado actualmente. También puedes cambiar el radio seleccionado actualmente actualizando el valor del atributo value del componente <mdui-radio-group>.

Chino

Inglés

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chino</mdui-radio>
  <mdui-radio value="english">Inglés</mdui-radio>
</mdui-radio-group>

Fuente

Puedes usar el componente <mdui-radio> por separado y leer o modificar su estado seleccionado mediante el atributo checked.

Radio

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

Fuente

Estado deshabilitado

Añade el atributo disabled al componente <mdui-radio-group> para deshabilitar todo el grupo de radios.

Chino

Inglés

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chino</mdui-radio>
  <mdui-radio value="english">Inglés</mdui-radio>
</mdui-radio-group>

Fuente

Si necesitas deshabilitar un radio específico, añade el atributo disabled al componente <mdui-radio>.

Chino

Inglés

<mdui-radio-group>
  <mdui-radio value="chinese">Chino</mdui-radio>
  <mdui-radio value="english" disabled>Inglés</mdui-radio>
</mdui-radio-group>

Fuente

Icono

Los atributos unchecked-icon y checked-icon define los iconos de Material Icons en los estados no seleccionado y seleccionado respectivamente. También puedes establecerlos mediante los slots unchecked-icon y checked-icon.

Chino

Inglés

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chino</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>
    Inglés
  </mdui-radio>
</mdui-radio-group>

Fuente

`mdui-radio-group` API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`disabled`	`disabled`	`boolean`	`false`
Indica si este componente está deshabilitado.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`.
`name`	`name`	`string`	`''`
Nombre del grupo de radio, que se enviará con los datos del formulario.
`value`	`value`	`string`	`''`
Valor seleccionado actualmente en el grupo de radio, que se enviará junto con los datos del formulario.
	`defaultValue`	`string`	`''`
Valor seleccionado por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio seleccionar una opción al enviar el formulario.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.

Métodos

Nombre	Parámetros	Valor de retorno
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.

Eventos

Nombre
`change`
Se dispara cuando cambia el valor seleccionado.
`input`
Se dispara cuando cambia el valor seleccionado.
`invalid`
Se dispara cuando falla la validación del campo del formulario.

Slots

Nombre
(predeterminado)
Elementos `<mdui-radio>`.

`mdui-radio` API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`value`	`value`	`string`	`''`
Valor actual del Radio.
`disabled`	`disabled`	`boolean`	`false`
Indica si este Radio está deshabilitado.
`checked`	`checked`	`boolean`	`false`
Indica si el Radio actual está seleccionado.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nombre del icono de Material Icons para el estado no seleccionado. También se puede establecer mediante `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`change`
Se dispara cuando se selecciona este Radio.

Slots

Nombre
(predeterminado)
Contenido de texto.
`unchecked-icon`
Icono en estado no seleccionado.
`checked-icon`
Icono en estado seleccionado.

CSS Parts

Nombre
`control`
Contenedor del icono izquierdo.
`unchecked-icon`
Icono en estado no seleccionado.
`checked-icon`
Icono en estado seleccionado.
`label`
Contenido de texto.

Capítulo anterior

NavigationRail Navigation Rail

Capítulo siguiente

RangeSlider Range Slider

RadioRadio

Uso

Ejemplos

Estado seleccionado

Estado deshabilitado

Icono

`mdui-radio-group` API

Propiedades

Métodos

Eventos

Slots

`mdui-radio` API

Propiedades

Métodos

Eventos

Slots

CSS Parts