Field
Peças base de todo campo de formulário — rótulo, texto de ajuda, mensagem de erro e caixa de grupo.
'use client';
import { FieldDescription, FieldError, Label } from '@/components/ui/field';
import { Input, TextField } from '@/components/ui/input';
export default function FieldDemo() {
return (
<TextField name="empresa" isRequired className="w-full max-w-sm">
<Label>Nome da empresa</Label>
<Input placeholder="Ex.: Clínica Sorriso Feliz" />
<FieldDescription>Aparece no cabeçalho do site e nas notas fiscais.</FieldDescription>
<FieldError>Informe o nome da empresa.</FieldError>
</TextField>
);
}Instalação
npx shadcn@latest add @lenstech/fieldUso
import { FieldDescription, FieldError, Label } from "@/components/ui/field"
import { Input, TextField } from "@/components/ui/input"<TextField name="empresa" isRequired>
<Label>Nome da empresa</Label>
<Input />
<FieldDescription>Aparece no cabeçalho do site.</FieldDescription>
<FieldError>Informe o nome da empresa.</FieldError>
</TextField>Todos os campos da biblioteca aceitam os atalhos label, description e errorMessage, que montam essas
peças por você. Use as peças do Field diretamente quando precisar de um layout diferente do padrão.
A associação é automática
Dentro de um campo do React Aria (TextField, Select, ComboBox…), o Label recebe o htmlFor certo, a
FieldDescription vira aria-describedby e o FieldError só aparece quando o campo está inválido. Você não
precisa criar ids.
Exemplos
Obrigatório
Com isRequired e um <FieldError /> vazio, o erro exibido é a mensagem nativa do navegador ao enviar o
formulário. Passe um texto como filho para personalizar.
'use client';
import { FieldDescription, FieldError, Label } from '@/components/ui/field';
import { Input, TextField } from '@/components/ui/input';
export default function FieldRequired() {
return (
<TextField name="instagram" isRequired className="w-full max-w-sm">
<Label>
Instagram da loja <span className="text-destructive">*</span>
</Label>
<Input placeholder="@sualoja" />
<FieldDescription>Usaremos para avaliar sua identidade visual.</FieldDescription>
<FieldError />
</TextField>
);
}Inválido
isInvalid força o estado de erro: o rótulo, a borda e a mensagem ficam na cor destructive.
'use client';
import { FieldError, Label } from '@/components/ui/field';
import { Input, TextField } from '@/components/ui/input';
export default function FieldInvalid() {
return (
<TextField
name="cnpj"
defaultValue="12.345.678/0001"
isInvalid
className="w-full max-w-sm"
>
<Label>CNPJ</Label>
<Input placeholder="00.000.000/0000-00" />
<FieldError>CNPJ incompleto — confira os 14 dígitos.</FieldError>
</TextField>
);
}Desabilitado
'use client';
import { FieldDescription, Label } from '@/components/ui/field';
import { Input, TextField } from '@/components/ui/input';
export default function FieldDisabled() {
return (
<TextField isDisabled defaultValue="LT-000482" className="w-full max-w-sm">
<Label>Código do cliente</Label>
<Input />
<FieldDescription>Gerado automaticamente — não pode ser alterado.</FieldDescription>
</TextField>
);
}Caixa de grupo
FieldGroup desenha a borda e o anel de foco em volta de vários elementos — útil para prefixos, sufixos e
botões dentro do campo.
'use client';
import { FieldDescription, FieldGroup, Label } from '@/components/ui/field';
import { Input, TextField } from '@/components/ui/input';
export default function FieldGroupExample() {
return (
<TextField name="subdominio" className="w-full max-w-sm">
<Label>Endereço da loja</Label>
<FieldGroup>
<Input
placeholder="padariadourada"
className="h-full rounded-none border-0 bg-transparent shadow-none data-focused:ring-0 dark:bg-transparent"
/>
<span className="border-l bg-muted px-3 py-2 text-sm text-muted-foreground">.lenstech.com.br</span>
</FieldGroup>
<FieldDescription>Letras minúsculas, números e hífen.</FieldDescription>
</TextField>
);
}Quando usar
- Use para montar campos com layout próprio (asterisco no rótulo, sufixo, contador de caracteres).
- Não use quando os atalhos
label/description/errorMessagedo campo já resolvem — é menos código. - Para busca, prefira
SearchField, que já traz ícone e botão de limpar dentro de umFieldGroup.
API
Label
Aceita todas as props do Label do React Aria. Fica com a cor
destructive quando o campo está inválido e esmaecido quando desabilitado.
FieldDescription
Aceita todas as props do Text do React Aria. Já define slot="description".
FieldError
Aceita todas as props do FieldError do React Aria.
Prop
Type
FieldGroup
Aceita todas as props do Group do React Aria. Reage a foco interno,
inválido e desabilitado.
inputBase
String de classes Tailwind usada por Input, Textarea e DateInput. Reaproveite em campos próprios para
manter o mesmo visual.