RadioRadio

Radio permite que os usuários selecionem uma opção de um conjunto, garantindo que apenas uma opção seja selecionada por vez.

Como usar

Importe os componentes conforme necessário:

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

Importe os tipos TypeScript dos componentes conforme necessário:

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

Exemplo de uso:

Chinese

English

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

O valor do atributo value do componente <mdui-radio-group> é o valor value do componente <mdui-radio> atualmente selecionado. Você também pode alternar o radio selecionado atualizando o atributo value do componente <mdui-radio-group>.

Chinese

English

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

Fonte

Você pode usar o componente <mdui-radio> isoladamente. Assim, você pode ler e modificar o estado selecionado pelo atributo checked.

Radio

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

Fonte

Estado desabilitado

Use o atributo disabled no componente <mdui-radio-group> para desabilitar todo o grupo de radios.

Chinese

English

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

Fonte

Para desabilitar um radio específico, adicione o atributo disabled no componente <mdui-radio>.

Chinese

English

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

Fonte

Ícone

Você pode definir os atributos unchecked-icon e checked-icon para definir os ícones do Material Icons nos estados não selecionado e selecionado, respectivamente. Você também pode usar os slots unchecked-icon e checked-icon para definir os ícones.

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>

Fonte

`mdui-radio-group` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`disabled`	`disabled`	`boolean`	`false`
Define se este componente está desabilitado.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`.
`name`	`name`	`string`	`''`
O nome do grupo de botões de opção, que será enviado com os dados do formulário.
`value`	`value`	`string`	`''`
O valor atualmente selecionado no grupo de botões de opção, que será enviado com os dados do formulário.
	`defaultValue`	`string`	`''`
O valor selecionado por padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que um dos botões de opção esteja selecionado.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.

Métodos

Nome	Parâmetros	Retorno
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.

Eventos

Nome
`change`
Disparado quando o valor selecionado muda.
`input`
Disparado quando o valor selecionado muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
(padrão)
Elementos `<mdui-radio>`.

`mdui-radio` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`value`	`value`	`string`	`''`
O valor atual do botão de opção.
`disabled`	`disabled`	`boolean`	`false`
Define se o botão de opção atual está desabilitado.
`checked`	`checked`	`boolean`	`false`
Define se o botão de opção atual está selecionado.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nome do ícone Material Icons para o estado não selecionado. Também pode ser definido via `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nome do ícone Material Icons para o estado selecionado. Também pode ser definido via `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Métodos

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`change`
Disparado quando este botão de opção é selecionado.

Slots

Nome
(padrão)
Conteúdo de texto.
`unchecked-icon`
Ícone do estado não selecionado.
`checked-icon`
Ícone do estado selecionado.

CSS Parts

Nome
`control`
Contêiner do ícone esquerdo.
`unchecked-icon`
Ícone do estado não selecionado.
`checked-icon`
Ícone do estado selecionado.
`label`
Conteúdo de texto.

Capítulo anterior

NavigationRail Trilho de navegação

Próximo capítulo

RangeSlider Slider de intervalo

RadioRadio

Como usar

Exemplos

Estado selecionado

Estado desabilitado

Ícone

`mdui-radio-group` API

Propriedades

Métodos

Eventos

Slots

`mdui-radio` API

Propriedades

Métodos

Eventos

Slots

CSS Parts