Form Field

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

A “Form Field” is the canonical composition of Label + Input (or another control) + optional helper / error message. It’s not a single export. it’s a pattern you compose from atoms.

Pattern

With error

Code

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>

When we ship a typed Form integration with react-hook-form (issue #11), this page upgrades to show <FormField name="cpf" /> with built-in error wiring.