NovoFormuláriodesde v0.2.0

Field

Layout de campo de formulário com rótulo e ajuda.

Quando usar

Layout padrão de formulário com label, descrição e mensagem de erro.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.

Editor Sandpack disponível para: button, input, textarea, switch, skeleton, separator, label e spinner. Este componente usa apenas o preview interativo acima.

Exemplos

Variações comuns de uso.

Campo básico

import { Field, FieldGroup, FieldLabel, FieldDescription } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldBasic() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="email">E-mail</FieldLabel>
        <Input id="email" type="email" />
        <FieldDescription>Enviaremos confirmações aqui.</FieldDescription>
      </Field>
    </FieldGroup>
  )
}

Com erro

<Field data-invalid>
  <FieldLabel htmlFor="email">E-mail</FieldLabel>
  <Input id="email" aria-invalid />
</Field>

API

Props principais documentadas para o time.

Prop	Tipo	Padrão	Descrição
data-invalid	boolean	—	Marca o campo com erro visual.
data-disabled	boolean	—	Estado desabilitado no layout do Field.

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/field.json

pnpm dlx shadcn@latest add @youxgroup/field

Dependências

npm: cn

Registry: @youxgroup/label, @youxgroup/separator

Relacionados

label input separator