Label
Nombra un campo de formulario y describe qué información se espera completar en él.
- 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.
- Text: contenido textual que identifica el campo, describiendo qué información se espera completar.
- 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.
Visible (default): rótulo visible en pantalla; usarlo en la mayoría de los campos para que cualquier persona identifique qué información se espera. Ej.: "Título SEO", "Descripción".
Hidden (hidden): oculta visualmente el texto pero lo mantiene disponible para lectores de pantalla; reservarlo para campos cuyo propósito ya es evidente por el contexto visual (un ícono, un placeholder claro), pero que igual necesitan un rótulo accesible. Ej.: un campo de búsqueda con ícono de lupa y sin rótulo visible.
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.
Nombrar el campo con lo que se espera completar, en pocas palabras y concreto.
Evitar labels genéricos que no describen qué información espera el campo.
Cuando el campo necesita una aclaración breve, sumar el ícono con Tooltip en vez de alargar el texto del label.
Evitar extender el texto del label con la aclaración completa en lugar de usar el ícono de ayuda.
- 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.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Label } from "@nimbus-ds/components";
const Example: React.FC = () => <Label>Título SEO</Label>;
export default Example;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
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the label. | |
htmlFor | string | The for attribute specifies which form element a label is bound to. | |
hidden | boolean | 'false' | If true the label will be visually hidden but maintain accessibility purpose |
Label.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.