O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Campo de texto

Campos de texto são geralmente usados em formulários. Os campos de texto do mdui possuem funções como contagem de caracteres e validação de formulário.

Pode ser usado com o sistema de layout de grade para o layout do formulário.

Como usar

Será inicializado automaticamente após o carregamento da página. Para campos de texto gerados dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Cores

Usar cor de destaque.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Campos de texto

Estilo

Campo de texto de linha única

Este é um exemplo simples de campo de texto:

Exemplo

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Rótulo fixo

Exemplo

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Rótulo flutuante

Exemplo

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

Estado desativado

Adicione o atributo disabled ao elemento .mdui-textfield-input para desativar o campo de texto.

Exemplo

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Rótulo fixo -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Rótulo flutuante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Campo de texto de várias linhas

Substitua a tag input de um campo de texto de linha única pela tag textarea para criar um campo de texto de várias linhas. O campo de texto de várias linhas ajustará automaticamente sua altura com base no conteúdo.

Exemplo

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Rótulo fixo -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Rótulo flutuante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Estado desativado -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Ao adicionar o atributo rows no textarea, a altura do campo de texto permanecerá fixa.

Exemplo

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

Com texto de ajuda

Adicione o elemento <div class="mdui-textfield-helper"></div> ao final de <div class="mdui-textfield"></div> para adicionar um texto de ajuda.

Exemplo

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

Com ícone

Exemplo

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Rótulo fixo -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Rótulo flutuante, campo de texto de várias linhas -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Estado desativado -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Campo de texto expansível

Exemplo

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Funções

Validação de formulário

O mdui usa HTML5 para validação de formulário. Adicione o elemento <div class="mdui-textfield-error"></div> ao final de <div class="mdui-textfield"></div> para adicionar mensagens de erro.

Se houver mensagens de erro e texto de ajuda ao mesmo tempo, o elemento do texto de ajuda deve ser colocado após o elemento da mensagem de erro.

Exemplo

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">O nome de usuário não pode estar vazio</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Formato de e-mail inválido</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">A senha deve ter pelo menos 6 caracteres e conter letras maiúsculas e minúsculas</div>
  <div class="mdui-textfield-helper">Por favor, insira uma senha com pelo menos 6 caracteres e que contenha letras maiúsculas e minúsculas</div>
</div>

Além de usar a validação de formulário do HTML5, você também pode usar JavaScript para validação.

Adicione a classe .mdui-textfield-invalid ao campo de texto que falhou na validação e remova-a após a validação ser bem-sucedida.

Exemplo

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">O nome de usuário já existe</div>
</div>

Contagem de caracteres

Adicione o atributo maxlength="" ao elemento input para limitar o comprimento dos caracteres inseridos. O mdui adicionará automaticamente uma contagem de caracteres em tempo real no canto inferior direito do campo de texto.

Exemplo

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Formato de e-mail inválido</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Campos de texto gerados dinamicamente

Se o seu campo de texto for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Se você modificar dinamicamente o conteúdo do campo de texto, precisará chamar o método mdui.updateTextFields() para reinicializá-lo. Este método aceita um seletor CSS com a classe .mdui-textfield, um elemento DOM ou um array de elementos DOM como parâmetro, indicando que apenas o campo de texto especificado será reinicializado. Se nenhum parâmetro for passado, todos os campos de texto na página serão reinicializados.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-textfield`	Define um campo de texto.
`.mdui-textfield-floating-label`	Define um campo de texto com rótulo flutuante.
`.mdui-textfield-label`	Define o rótulo do campo de texto.
`.mdui-textfield-input`	Define a entrada do campo de texto.
`.mdui-textfield-error`	Define a mensagem de erro da validação do formulário.
`.mdui-textfield-helper`	Define o texto de ajuda do campo de texto.

Painel colapsável

Controles de seleção