Label

Label

Rótulo de campo de formulário. Não existia como componente próprio no Hub legado: o TextInput antigo não vinha com um label embutido, então esta é uma peça nova, construída sobre o primitivo Label do Radix (radix-ui).

Quando usar

• Sempre que um input ou textarea aparecer em um formulário. Rótulo não é decoração, é a forma primária de dar nome acessível a um campo.
• Associe pelo par htmlFor (no label) e id (no campo). É isso que faz o clique no texto focar o campo e o leitor de tela anunciar o nome certo.

Quando não usar

• Como substituto de aria-label em campos sem rótulo visível (busca compacta, ícone sozinho): nesses casos use aria-label direto no campo, sem label visual.
• Sozinho, sem nenhum campo associado: um label sem htmlFor não associa a nada e vira só um texto com a fonte errada para o que provavelmente deveria ser um text-b3 comum.

Anatomia

<label data-slot="label">
  texto do rotulo
  <span data-slot="label-required">   opcional, so quando required e true
</label>

Props além do primitivo Radix

• required: mostra um indicador visual (*) ao lado do texto. O indicador é aria-hidden: a obrigatoriedade real do campo é comunicada pelo atributo required no input/textarea, não pelo asterisco, que é só reforço visual.
• disabled: aplica a cor de texto desabilitada no próprio rótulo. O Label do Radix não inspeciona o campo associado sozinho (o campo pode nem ser irmão direto no DOM), então quem compõe o formulário precisa informar esse estado explicitamente, sincronizado com o disabled do campo.

Acessibilidade

• A associação por htmlFor/id é a peça central deste componente. Sem ela, o label é só texto estilizado e o campo perde o nome acessível.
• O indicador de obrigatório é puramente visual (aria-hidden="true"): a semântica de obrigatoriedade vem do atributo HTML required no campo, que é o que leitores de tela e validação de formulário realmente usam.
• Estilo: text-l3 (14px/600) em text-content-secondary, o padrão de rótulo do design system.

Composição futura

O componente field, que junta label, campo, descrição e mensagem de erro em um bloco só, é de outra etapa do projeto e não foi construído aqui. O label já expõe o que ele vai precisar: aceita qualquer prop do Label.Root do Radix (incluindo htmlFor), mais required e disabled, o suficiente para o field compor por cima sem precisar de mudança nesta API.