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.