TextFieldCampo de texto

O campo de texto permite que os usuários insiram texto na página, geralmente usado em formulários e diálogos.

Como usar

Importe o componente conforme necessário:

import 'mdui/components/text-field.js';

Importe o tipo TypeScript do componente conforme necessário:

import type { TextField } from 'mdui/components/text-field.js';

Exemplo de uso:

<mdui-text-field label="Text Field"></mdui-text-field>

Use o atributo helper para definir o texto de ajuda na parte inferior do campo de texto. Você também pode usar o slot helper para definir o texto de ajuda. Adicione helper-on-focus para exibir o texto de ajuda apenas quando o campo de texto está em foco.

Supporting text

<mdui-text-field label="Text Field" helper="Supporting text"></mdui-text-field>

<mdui-text-field label="Text Field">
  <span slot="helper" style="color: blue">Supporting text</span>
</mdui-text-field>

<mdui-text-field label="Text Field" helper="Supporting text" helper-on-focus></mdui-text-field>

Fonte

Com limpeza

Use o atributo clearable para que, quando o campo de texto tiver um valor, um botão de limpeza apareça no lado direito.

<mdui-text-field clearable label="Text Field" value="Input Text"></mdui-text-field>

Fonte

Texto alinhado à direita

Use o atributo end-aligned para alinhar o texto à direita.

<mdui-text-field end-aligned label="Text Field" value="Input Text"></mdui-text-field>

Fonte

Texto e ícones antes/depois

Defina os atributos icon e end-icon para adicionar ícones do Material Icons à esquerda e à direita do campo de texto. Você também pode adicionar elementos pelos slots icon e end-icon.

<mdui-text-field icon="search" end-icon="mic" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Fonte

Defina os atributos prefix e suffix para adicionar texto à esquerda e à direita do campo de texto. Esses textos só são exibidos quando o campo de texto está em foco ou tem um valor. Você também pode usar os slots prefix e suffix para adicionar elementos de texto.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Fonte

Modo somente leitura

Use o atributo readonly para colocar o campo de texto no modo somente leitura.

<mdui-text-field readonly label="Text Field" value="Input Text"></mdui-text-field>

Fonte

Modo desabilitado

Use o atributo disabled para desabilitar o campo de texto.

<mdui-text-field disabled label="Text Field" value="Input Text"></mdui-text-field>

Fonte

Campo de texto multilinha

Use o atributo rows para definir o número de linhas do campo de texto multilinha.

<mdui-text-field rows="3" label="Text Field"></mdui-text-field>

Fonte

Use o atributo autosize para fazer o campo de texto ajustar automaticamente a altura conforme o comprimento do conteúdo. Use os atributos min-rows e max-rows para especificar o número mínimo e máximo de linhas ao ajustar automaticamente a altura.

<mdui-text-field autosize label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>

Fonte

Contador de caracteres

Quando o número máximo de caracteres é definido pelo atributo maxlength, você pode adicionar o atributo counter para exibir o contador de caracteres abaixo do campo de texto.

<mdui-text-field maxlength="20" counter label="Text Field"></mdui-text-field>

Fonte

Campo de senha

Quando type="password", adicione o atributo toggle-password para adicionar um botão de alternância de visibilidade da senha no lado direito do campo de texto.

<mdui-text-field type="password" toggle-password label="Text Field"></mdui-text-field>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Forma do campo de texto. O padrão é `filled`. Os valores possíveis são: `filled`: Campo de texto com cor de fundo; efeito visual mais forte. `outlined`: Campo de texto com borda; efeito visual mais suave.
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Tipo de entrada do campo de texto. O padrão é `text`. Os valores possíveis são: `text`: Valor padrão. Campo de texto. `number`: Permite apenas entrada de números. Em dispositivos com teclado dinâmico, exibe teclado numérico. `password`: Usado para entrada de senha; o valor é ocultado. `url`: Usado para entrada de URL; valida o formato da URL. Em dispositivos com teclado dinâmico, exibe teclado apropriado. `email`: Usado para entrada de e-mail; valida o formato do e-mail. Em dispositivos com teclado dinâmico, exibe teclado apropriado. `search`: Usado para caixa de pesquisa. Em dispositivos com teclado dinâmico, o ícone Enter se torna ícone de pesquisa. `tel`: Usado para entrada de número de telefone. Em dispositivos com teclado dinâmico, exibe teclado numérico de telefone. `hidden`: Oculta o controle, mas seu valor ainda é enviado ao servidor. `date`: Controle para entrada de data (ano, mês, dia, sem hora). Em navegadores suportados, abre um seletor de data ou um seletor de rolagem numérica. `datetime-local`: Controle para entrada de data e hora, sem fuso horário. Em navegadores suportados, abre um seletor de data ou um seletor de rolagem numérica. `month`: Controle para entrada de mês e ano, sem fuso horário. `time`: Controle para entrada de hora, sem fuso horário. `week`: Controle para entrada de data composta por ano e número da semana, sem fuso horário.
`name`	`name`	`string`	`''`
O nome do campo de texto, que será enviado com os dados do formulário.
`value`	`value`	`string`	`''`
O valor do campo de texto, que será enviado com os dados do formulário.
	`defaultValue`	`string`	`''`
Valor padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
`label`	`label`	`string`	-
Texto do rótulo.
`placeholder`	`placeholder`	`string`	-
Texto de placeholder.
`helper`	`helper`	`string`	-
Texto de ajuda na parte inferior do campo de texto. Também pode ser definido via `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Define se o texto de ajuda na parte inferior deve ser exibido apenas quando o campo recebe foco.
`clearable`	`clearable`	`boolean`	`false`
Define se o conteúdo do campo de texto pode ser limpo.
`clear-icon`	`clearIcon`	`string`	-
Nome do ícone Material Icons para o botão de limpar, exibido à direita do campo de texto quando ele é limpável. Também pode ser definido via `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Define se o texto deve ser alinhado à direita.
`prefix`	`prefix`	`string`	-
Texto de prefixo do campo de texto. Exibido apenas quando o campo está focado ou tem valor. Também pode ser definido via `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texto de sufixo do campo de texto. Exibido apenas quando o campo está focado ou tem valor. Também pode ser definido via `slot="suffix"`.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons para o ícone de prefixo do campo de texto. Também pode ser definido via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons para o ícone de sufixo do campo de texto. Também pode ser definido via `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Nome do ícone Material Icons exibido à direita do campo de texto quando a validação do campo do formulário falha. Também pode ser definido via `slot="error-icon"`.
`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>`.
`readonly`	`readonly`	`boolean`	`false`
Define se o componente está no modo somente leitura.
`disabled`	`disabled`	`boolean`	`false`
Define se a caixa de entrada está desabilitada.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que este campo seja preenchido.
`rows`	`rows`	`number`	-
Número fixo de linhas exibidas para o campo de texto.
`autosize`	`autosize`	`boolean`	`false`
Define se a altura do campo de texto deve ser ajustada automaticamente com base no conteúdo digitado.
`min-rows`	`minRows`	`number`	-
Número mínimo de linhas quando `autosize` é `true`.
`max-rows`	`maxRows`	`number`	-
Número máximo de linhas quando `autosize` é `true`.
`minlength`	`minlength`	`number`	-
Número mínimo de caracteres permitido.
`maxlength`	`maxlength`	`number`	-
Número máximo de caracteres permitido.
`counter`	`counter`	`boolean`	`false`
Define se deve exibir a contagem de caracteres. Só é válido quando `maxlength` é especificado.
`min`	`min`	`number`	-
Quando `type` é `number`, o valor mínimo permitido.
`max`	`max`	`number`	-
Quando `type` é `number`, o valor máximo permitido.
`step`	`step`	`number`	-
Quando `type` é `number`, o incremento/decremento ao usar as setas.
`pattern`	`pattern`	`string`	-
Expressão regular usada para validação do formulário.
`toggle-password`	`togglePassword`	`boolean`	`false`
Quando `type` é `password`, definir esta propriedade adiciona um botão para alternar entre texto visível e oculto.
`show-password-icon`	`showPasswordIcon`	`string`	-
Ícone Material Icons para o botão de alternância de senha, exibido quando a senha está visível. Também pode ser definido via `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Ícone Material Icons para o botão de alternância de senha, exibido quando a senha está oculta. Também pode ser definido via `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Atributo não padrão do iOS, usado para controlar se a primeira letra do texto é automaticamente capitalizada. Válido no iOS 5 e posteriores. Os valores possíveis são: `none`: Desativa a capitalização da primeira letra. `sentences`: Capitaliza a primeira letra de frases. `words`: Capitaliza a primeira letra de palavras. `characters`: Capitaliza todas as letras.
`autocorrect`	`autocorrect`	`string`	-
Atributo `autocorrect` do elemento `<input>`.
`autocomplete`	`autocomplete`	`string`	-
Atributo `autocomplete` do elemento `<input>`.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Atributo `enterkeyhint` do elemento `<input>`, usado para personalizar o texto ou ícone exibido na tecla Enter do teclado virtual. A aparência real depende do dispositivo e idioma do usuário. Os valores possíveis são: `enter`: Insere uma nova linha. `done`: Conclui a entrada; fecha o teclado virtual. `go`: Navega para o destino do texto inserido. `next`: Move para o próximo campo de entrada. `previous`: Move para o campo de entrada anterior. `search`: Navega para os resultados da pesquisa. `send`: Envia a mensagem de texto.
`spellcheck`	`spellcheck`	`boolean`	`false`
Define se a verificação ortográfica está habilitada.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Atributo `inputmode` do elemento `<input>`, usado para personalizar o tipo de teclado virtual. Os valores possíveis são: `none`: Sem teclado virtual. Útil quando se quer implementar seu próprio controle de entrada de teclado. `text`: Teclado padrão para entrada de texto. `decimal`: Teclado para entrada de números decimais, podendo incluir ponto decimal `.` ou vírgula de milhar `,`. `numeric`: Exibe teclado numérico de 0 a 9. `tel`: Teclado numérico de telefone, incluindo dígitos de 0 a 9, asterisco `*` e cerquilha `#`. `search`: Teclado virtual otimizado para entrada de pesquisa; o botão de envio geralmente exibe `search` ou "Pesquisar". `email`: Teclado virtual otimizado para entrada de endereço de e-mail, geralmente com teclas como `@`, `.`. `url`: Teclado virtual otimizado para entrada de URL, geralmente com teclas como `.`, `/`, `#`.
	`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.
	`valueAsNumber`	`number`	-
Obtém o valor atual e converte para o tipo `number`; ou define um valor do tipo `number`. Se o valor não puder ser convertido para `number`, retorna `NaN`.
`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
`select`		`void`
Seleciona o texto no campo de texto.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Seleciona um intervalo específico no campo de texto.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Substitui um intervalo específico do texto no campo de texto por um novo texto.
`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 valor do campo de texto muda e o campo perde o foco.
`input`
Disparado quando o valor do campo de texto muda.
`invalid`
Disparado quando a validação do campo do formulário falha.
`clear`
Disparado ao clicar no botão de limpar gerado pelo atributo `clearable`. Pode impedir a limpeza do campo de texto chamando `event.preventDefault()`.

Slots

Nome
`icon`
Ícone à esquerda.
`end-icon`
Ícone à direita.
`error-icon`
Ícone à direita no estado de falha de validação.
`prefix`
Texto à esquerda.
`suffix`
Texto à direita.
`clear-button`
Botão de limpar.
`clear-icon`
Ícone dentro do botão de limpar.
`toggle-password-button`
Botão de alternância de visibilidade da senha.
`show-password-icon`
Ícone dentro do botão de alternância de senha no estado de senha visível.
`hide-password-icon`
Ícone dentro do botão de alternância de senha no estado de senha oculta.
`helper`
Texto de ajuda na parte inferior.

CSS Parts

Nome
`container`
Contêiner do campo de texto.
`icon`
Ícone à esquerda.
`end-icon`
Ícone à direita.
`error-icon`
Ícone à direita no estado de falha de validação.
`prefix`
Texto à esquerda.
`suffix`
Texto à direita.
`label`
Texto do rótulo acima.
`input`
Elemento `<input>` ou `<textarea>` interno.
`clear-button`
Botão de limpar.
`clear-icon`
Ícone dentro do botão de limpar.
`toggle-password-button`
Botão de alternância de visibilidade da senha.
`show-password-icon`
Ícone dentro do botão de alternância de senha no estado de senha visível.
`hide-password-icon`
Ícone dentro do botão de alternância de senha no estado de senha oculta.
`supporting`
Contêiner de informações auxiliares na parte inferior, incluindo helper, error, counter.
`helper`
Texto de ajuda na parte inferior.
`error`
Texto de descrição de erro na parte inferior.
`counter`
Contador de caracteres no canto inferior direito.

Capítulo anterior

Tabs Abas

Próximo capítulo

Tooltip Tooltip

TextFieldCampo de texto

Como usar

Exemplos

Forma

Texto auxiliar

Com limpeza

Texto alinhado à direita

Texto e ícones antes/depois

Modo somente leitura

Modo desabilitado

Campo de texto multilinha

Contador de caracteres

Campo de senha

API

Propriedades

Métodos

Eventos

Slots

CSS Parts