Field

Una etiqueta, pista, control y error de un campo, siempre en el mismo orden y espaciado.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-name">Nombre del recordatorio</label><input class="feitio-input" id="pg-name"></div>

Cuándo usarlo

• Alrededor de cada campo de formulario: TextInput, Textarea, Select, TimeInput.

Cuándo no usarlo

• Para un grupo de opciones (Radios, Checkbox): el grupo usa Fieldset, con el título en el legend.

Ejemplos

<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 marcador de posición

• Permitido como un ejemplo extra corto, debajo de una etiqueta que permanece.
• Nunca en lugar de la etiqueta o la pista: desaparece cuando la persona escribe.
• Nunca con información necesaria: eso va en la pista, que permanece.

Anatomía

Escritura

• Etiqueta: un sustantivo corto o una pregunta directa, sin dos puntos.
• Pista: solo si ayuda a acertar la primera vez.
• Opcional: "(opcional)" al final de la etiqueta.

Accesibilidad

• La etiqueta es un <label for> real: hacer clic en ella enfoca el campo.
• Pista y error van en aria-describedby; los lectores de pantalla los leen con la etiqueta.

Atributos