Label

• Nombrar un campo de texto: identificar qué información espera completar un Input, para que la persona entienda qué escribir antes de hacerlo. Ej.: "Título SEO", "Descripción", "Texto alternativo".
• Nombrar un campo de selección: identificar la pregunta u opción que resuelve un Select. Ej.: "Motivo del rechazo", "¿Cuál es el motivo de la cancelación?".
• Reforzar el nombre del campo con una aclaración breve: sumar un ícono junto con un Tooltip cuando el campo necesita una precisión corta antes de completarse, en vez de extender el texto del label. Ej.: un ícono de ayuda junto a "Tamaño de página".

• Nombrar una opción de Checkbox o Radio button: ambos controles ya incluyen su propio rótulo a través de la prop label; envolverlos en un Label duplica el rotulado. En su lugar, usar la prop label de Checkbox o Radio.
• Mostrar texto de ayuda o instrucciones adicionales: el Label es un rótulo corto, no el lugar para instrucciones extensas debajo de un campo. En su lugar, usar helpText del patrón Form Field.
• Comunicar un error de validación: el Label no cambia de apariencia para señalar un error. En su lugar, usar la apariencia danger del patrón Form Field.

1. Text: contenido textual que identifica el campo, describiendo qué información se espera completar.
2. Icon: elemento opcional que se agrega después del texto, generalmente envuelto en un Tooltip, para sumar una aclaración breve sin extender el label.

El Label aparece justo antes o junto al campo que nombra: dentro de un grupo de un formulario, un filtro o una sección de configuración, siempre asociado a un Input o un Select a través de htmlFor.

• Vínculo con el campo: usar htmlFor con el mismo valor que el id del campo, para que un clic en el Label enfoque el campo y las tecnologías de asistencia anuncien el rótulo al llegar a él.
• Rótulo siempre presente, aunque no sea visible: usar hidden en vez de omitir el Label; el texto sigue disponible para lectores de pantalla aunque no se muestre en pantalla.
• Ícono que refuerza el mensaje: cuando el Label incluye un ícono de ayuda, el texto ya identifica el campo por sí solo; el ícono con Tooltip complementa esa información, no la reemplaza.

El Label nombra el campo. Con la menor cantidad de palabras posible, le dice a la persona qué dato se espera, antes de que empiece a completarlo.

• Capitalización: sentence case. Solo los nombres propios llevan mayúscula.
• Puntuación: sin punto final. Sin dos puntos después del label.
• Forma verbal: sustantivo o frase nominal breve; sin verbos imperativos ("Ingresá tu nombre"), sin artículos innecesarios ("El nombre del producto").
• Preguntas directas: por defecto, preferir frases nominales, son más directas y cortas de leer. "Motivo de la cancelación", no "¿Cuál es el motivo de la cancelación?". Usar una pregunta directa solo como excepción, cuando el contexto lo requiere: por ejemplo, una cancelación u otra situación sensible, donde ese matiz más empático se justifica.
• Campo opcional: agregar "(opcional)" después del sustantivo. "Teléfono (opcional)".
• Obligatorio/Opcional: marcar solo la minoría. Si la mayoría de los campos son obligatorios, marcar solo los opcionales con "(opcional)"; si la mayoría son opcionales, marcar solo los obligatorios con asterisco.
• Label hidden: mismo criterio de contenido que el visible; que esté oculto visualmente no lo exime de ser descriptivo.
• aria-label sin Label: usarlo solo como último recurso, con el mismo texto que usarías como Label visible.

Instalá el componente vía terminal.

Las propiedades adicionales se pasan al elemento <label>. Consultá la documentación del elemento label para ver la lista de atributos aceptados.

• Input — Recibe el rótulo de Label para identificar el campo de texto.
• Select — Recibe el rótulo de Label para identificar la opción a elegir.
• Form Field — Combina label, campo y texto de ayuda en un solo bloque de formulario.
• Tooltip — Para agregar una aclaración breve junto al ícono del Label.

Label