Primitiveinput

Label

Stable

Primitive de rótulo para controles de formulário. Um <label> nativo associado por htmlFor, que dá nome ao controle e o ativa quando pressionado — foco num campo de texto, alternância num checkbox. O estado desabilitado acompanha o controle, lido do peer ou do grupo, em vez de ser uma prop que poderia discordar dele.

Instalação

npx up-web-ds add label

Preview

Basic

With Checkbox

Required

Disabled

All states

Basic

With Checkbox

Required

Disabled

Usage

Imports de Label
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useId } from 'react'
Label
function ItemIdField() {
  const id = useId()

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor={id}>Id do item</Label>
      <Input id={id} placeholder="question-card" />
    </div>
  )
}

Props

Estende React.ComponentProps<'label'>. Aceita também os atributos padrão de um elemento React (282 não listados).

Metadata

Notas de acessibilidade

Leitor de tela verificado por teste: o label dá o nome acessível ao controle por htmlFor — os testes encontram o campo e o checkbox pelo nome que o label lhes dá, inclusive o checkbox do Base UI, que delega a um input oculto. O id vem sempre de useId(), nunca de literal, porque o catálogo renderiza cada exemplo duas vezes. "Obrigatório" é dito em texto e o campo carrega required; nenhum asterisco colorido carrega o significado sozinho. Teclado verificado por teste: o label não entra na sequência de tabulação — Tab vai direto ao controle —, e pressioná-lo move o foco para o campo ou alterna o checkbox. O estado desabilitado acompanha o controle: via peer (:disabled nativo ou data-disabled do Base UI) ou via um grupo com data-disabled="true"; o spec confirma no navegador que a opacidade e o cursor mudam de fato, e que pressionar o label de um controle desabilitado não o altera. Touch verificado em viewport de 375px com emulação de toque: tocar no texto do label alterna o checkbox e foca o campo, então o label amplia o alvo em vez de competir com ele, e o campo mede acima de 24x24. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o label não anima nem tem transição.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
input
Status
Stable

Origem e distribuição

Fonte
shadcn registry / label
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/label.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Number FieldQuestionnaire