Radio

Il componente Radio Group consente di selezionare una sola opzione tra più scelte.

Utilizzo

Importa i componenti:

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

Importa i tipi TypeScript:

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

Esempio:

Cinese

Inglese

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Cinese</mdui-radio>
  <mdui-radio value="english">Inglese</mdui-radio>
</mdui-radio-group>

La proprietà value del componente <mdui-radio-group> corrisponde al value del componente <mdui-radio> attualmente selezionato. Puoi modificare il pulsante radio selezionato aggiornando la proprietà value del componente <mdui-radio-group>.

Cinese

Inglese

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Cinese</mdui-radio>
  <mdui-radio value="english">Inglese</mdui-radio>
</mdui-radio-group>

Sorgente

Il componente <mdui-radio> può essere usato anche da solo. In questo caso, usa la proprietà checked per accedere e modificare lo stato selezionato.

Radio

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

Sorgente

Stato Disabilitato

Per disabilitare l'intero gruppo radio, aggiungi l'attributo disabled al componente <mdui-radio-group>.

Cinese

Inglese

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Cinese</mdui-radio>
  <mdui-radio value="english">Inglese</mdui-radio>
</mdui-radio-group>

Sorgente

Per disabilitare un pulsante radio specifico, aggiungi l'attributo disabled al componente <mdui-radio>.

Cinese

Inglese

<mdui-radio-group>
  <mdui-radio value="chinese">Cinese</mdui-radio>
  <mdui-radio value="english" disabled>Inglese</mdui-radio>
</mdui-radio-group>

Sorgente

Icone

Puoi impostare le Icone Material per gli stati deselezionato e selezionato del pulsante radio utilizzando rispettivamente gli attributi unchecked-icon e checked-icon. Oppure, puoi utilizzare gli slot unchecked-icon e checked-icon.

Cinese

Inglese

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Cinese</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>
    Inglese
  </mdui-radio>
</mdui-radio-group>

Sorgente

`mdui-radio-group` API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`disabled`	`disabled`	`boolean`	`false`
Se questo componente deve essere disabilitato
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`name`	`name`	`string`	`''`
Nome del gruppo di pulsanti di opzione, verrà inviato insieme ai dati del modulo
`value`	`value`	`string`	`''`
Valore attualmente selezionato nel gruppo di pulsanti di opzione, verrà inviato insieme ai dati del modulo
	`defaultValue`	`string`	`''`
Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
`required`	`required`	`boolean`	`false`
Se è obbligatorio selezionare uno dei pulsanti di opzione al momento dell'invio del modulo
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota

Metodi

Nome	Parametri	Restituisce
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida

Eventi

Nome
`change`
Attivato quando il valore selezionato cambia
`input`
Attivato quando il valore selezionato cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

Slots

Nome
(predefinito)
Elementi `<mdui-radio>`

`mdui-radio` API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`value`	`value`	`string`	`''`
Valore corrente del pulsante di opzione
`disabled`	`disabled`	`boolean`	`false`
Se il pulsante di opzione corrente deve essere disabilitato
`checked`	`checked`	`boolean`	`false`
Se il pulsante di opzione corrente è selezionato
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nome dell'icona Material per lo stato non selezionato. Può anche essere impostato tramite `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`change`
Attivato quando si seleziona questo pulsante di opzione

Slots

Nome
(predefinito)
Contenuto testuale
`unchecked-icon`
Icona nello stato non selezionato
`checked-icon`
Icona nello stato selezionato

CSS Parts

Nome
`control`
Contenitore dell'icona a sinistra
`unchecked-icon`
Icona nello stato non selezionato
`checked-icon`
Icona nello stato selezionato
`label`
Contenuto testuale

Capitolo precedente

NavigationRail

Capitolo successivo

RangeSlider