Label

Identifica un control de formulario u otro elemento de la interfaz. Siempre acompaña al campo que describe y se asocia con él por htmlFor.

Default

Cuándo usar

  • Cualquier campo de formulario: input, select, combobox, radio, checkbox.
  • Cuando un control no tiene texto visible que lo identifique.
  • Sobre el campo, alineado a la izquierda, en una línea cuando sea posible.

Tamaños

Escala y peso

Tres tamaños: small, medium (default) y large. El peso se controla por separado con weight (regular o semibold). Usa semibold para destacar campos primarios dentro de un grupo.

Requerido y deshabilitado

Estados

Marca los campos obligatorios con la prop required. Si el campo asociado está deshabilitado, sincroniza el estado del label con disabled para mantener la coherencia visual.

Accesibilidad

Asociación con el control

  • Usa htmlFor con el id del control para que el lector de pantalla anuncie el campo correcto.
  • Hacer clic en el label debe enfocar el campo asociado.
  • No uses solo placeholder como sustituto del label.
  • Si el campo es obligatorio, el asterisco se anuncia por aria; no requiere texto extra.

Contenido

Texto del label

  • Una a tres palabras. Sentence case.
  • Sustantivo concreto: Nombre, Email, Teléfono.
  • Sin signos de puntuación al final.
  • Si necesitas más explicación, usa un texto de ayuda debajo del campo, no en el label.