MoléculasForm Field

Campo de Formulário

@velon-finance/ui · status: convention · molecule

Um “Campo de Formulário” é a composição canônica de Label + Input (ou outro controle) + mensagem opcional de ajuda ou erro. Não é um único export. é um padrão que você compõe a partir dos átomos.

Padrão

Apenas para fins fiscais. Não compartilhamos.

Com erro

CPF inválido. confira os dígitos.

Código

import { Label, Input } from '@velon-finance/ui'
 
<div className="space-y-2">
  <Label htmlFor="cpf">CPF</Label>
  <Input id="cpf" placeholder="000.000.000-00" aria-describedby="cpf-help" />
  <p id="cpf-help" className="text-micro text-muted-foreground">Apenas para fins fiscais.</p>
</div>

Quando lançarmos uma integração tipada de Form com react-hook-form (issue #11), esta página será atualizada para mostrar <FormField name="cpf" /> com a ligação de erros embutida.

AlertStatus Badge