Navegação

Componentes

Label

beta

Nomeia um controle e o torna clicável. Rótulo solto, sem vínculo, é armadilha de acessibilidade.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/label

Playground
<Label htmlFor="campo">Nome do aluno</Label>

Uso

Associa um texto a um campo. Use `htmlFor` apontando para o `id` do controle — sem isso o clique no rótulo não foca o campo.

Com checkbox

O rótulo cresce para caber o controle inline. `gap-2` já vem do componente — não some com margem manual.

Desabilitado

O opacity-50 do rótulo depende de `data-disabled` no grupo pai (`group-data-[disabled=true]`), não de uma prop própria. Marque o grupo, não o Label.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Label não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css