Form Field
Compõe label, controle, ajuda e erro em um campo acessível.
- Status
- Beta
- Distribuição
- Source via shadcn
Design
Preview funcional
Carregando preview funcional…
Explorar anatomia e estados visuais
Anatomia
- Label
- Slot do controle
- Descrição opcional
- Mensagem de erro opcional
Variantes e estados
errorno-helperno-label
Uso
Quando usar
- um controle de formulário precisa de contexto, ajuda ou validação.
Quando não usar
- o componente hospedeiro já entrega a composição completa do campo.
Composição React
import {
Field,
FieldDescription,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
<Field>
<FieldLabel htmlFor="email">E-mail</FieldLabel>
<Input id="email" name="email" />
<FieldDescription>Use seu e-mail corporativo.</FieldDescription>
</Field>Implementação
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/field @tis/inputpnpm dlx shadcn@latest add @tis/field @tis/inputyarn dlx shadcn@latest add @tis/field @tis/inputbunx --bun shadcn@latest add @tis/field @tis/inputContrato público
- Item do registry
@tis/field- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Arquitetura técnica
- Provider
- Composição React
- Papel do provider
- Nativo ou composição
- Arquitetura comportamental
- Base UI
- CSS
ds-tis/css
Acessibilidade
Semântica e comportamento
Mantenha label, helper e error associados ao controle por IDs; estado invalid também exige aria-invalid no controle.
Responsabilidade do consumidor
- fornecer nomes e descrições acessíveis contextuais;
- preservar teclado, foco visível e HTML semântico;
- testar conteúdo, fluxo e contraste reais na aplicação.
Evidência de validação
Instalado no consumer React/Vite permanente e coberto por build de produção, browser, responsividade e Axe.