Field

Rótulo, dica, controle e erro de um campo, sempre na mesma ordem e no mesmo espaço.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-name">Nome do lembrete</label><input class="feitio-input" id="pg-name"></div>

Quando usar

• Em volta de todo campo de formulário: TextInput, Textarea, Select, TimeInput.

Quando não usar

• Para um grupo de opções (Radios, Checkbox): o grupo usa Fieldset, com o título no legend.

Exemplos

<div class="feitio-field">
  <label class="feitio-label" for="nome">Nome do lembrete</label>
  <span class="feitio-hint" id="nome-dica">Aparece na notificação</span>
  <input class="feitio-input" id="nome" aria-describedby="nome-dica nome-erro" aria-invalid="true">
  <span class="feitio-error-message" id="nome-erro">…Escreva um nome</span>
</div>

Texto de exemplo (placeholder)

• Permitido como exemplo extra, curto, embaixo de um rótulo que continua lá.
• Nunca no lugar do rótulo nem da dica: some quando a pessoa digita.
• Nunca com informação necessária: isso vai na dica, que fica.

Anatomia

Como escrever

• Rótulo: substantivo curto ou pergunta direta, sem dois-pontos.
• Dica: só se ajudar a acertar de primeira.
• Opcional: "(opcional)" no fim do rótulo.

Acessibilidade

• O rótulo é um <label for> de verdade: clicar nele foca o campo.
• Dica e erro entram no aria-describedby; o leitor de tela lê junto com o rótulo.

Atributos