CheckboxCheckbox

O Checkbox permite que os usuários selecionem uma ou mais opções de um conjunto, ou alternem o estado ligado/desligado de uma única opção.

Como usar

Importe o componente quando necessário:

import 'mdui/components/checkbox.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Checkbox } from 'mdui/components/checkbox.js';

Exemplo de uso:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

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

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`checked`	`checked`	`boolean`	`false`
Define se o componente está selecionado.
	`defaultChecked`	`boolean`	`false`
Estado de seleção padrão. Ao redefinir o formulário, será restaurado para este estado. Esta propriedade só pode ser definida via propriedade JavaScript.
`indeterminate`	`indeterminate`	`boolean`	`false`
Define se o componente está no estado indeterminado.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que esta caixa de seleção esteja selecionada.
`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`	`''`
Nome da caixa de seleção, que será enviado com os dados do formulário.
`value`	`value`	`string`	`'on'`
Valor da caixa de seleção, que será enviado com os dados do formulário.
`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"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Nome do ícone Material Icons para o estado indeterminado. Também pode ser definido via `slot="indeterminate-icon"`.
	`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.
`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
`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.
`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 o estado de seleção muda.
`input`
Disparado quando o estado de seleção muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
(padrão)
Texto da caixa de seleção.
`unchecked-icon`
Ícone do estado não selecionado.
`checked-icon`
Ícone do estado selecionado.
`indeterminate-icon`
Ícone do estado indeterminado.

CSS Parts

Nome
`control`
Contêiner do ícone esquerdo.
`unchecked-icon`
Ícone do estado não selecionado.
`checked-icon`
Ícone do estado selecionado.
`indeterminate-icon`
Ícone do estado indeterminado.
`label`
Texto da caixa de seleção.

Capítulo anterior

Card Card

Próximo capítulo

Chip Chip

CheckboxCheckbox

Como usar

Exemplos

Estado selecionado

Estado desabilitado

Estado indeterminado

Ícone

API

Propriedades

Métodos

Eventos

Slots

CSS Parts