# 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`. ```tsx import { Label, Input } from "@fluentui/react-components"; const id = useId(); <> Nombre ``` ## 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. ```tsx Pequeño Mediano Grande ``` ## 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. ```tsx Email Teléfono ``` ## 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.