Formulaires

<TextField label="Raison sociale" required placeholder="Ex. Grossiste Démo Kossodo" />
<TextField label="Référence client" hint="Numéro de bon de commande du client" />
<TextField label="IFU" required error="L’IFU comporte 8 chiffres suivis d’une lettre, ex. 00012345A." />
<TextField label="E-mail" leading={<AtSign />} type="email" />
<TextField label="Libellé" maxLength={60} showCount />
<TextField label="Code tiers" disabled value="CLI-00042" />
<TextField label="N° de commande" readOnly value="CMD-2026-00421" />

<Textarea label="Instructions de livraison" autosize maxRows={6} maxLength={500} showCount />

<SearchInput
  value={query} onValueChange={setQuery}
  onSearch={(q) => fetchOrders(q)} loading={loading}
  placeholder="N° de commande, client…" shortcutHint="/"
/>

const [value, setValue] = useState('63.4');
<NumberField label="Rendement usinage" value={value} onValueChange={setValue} unit="%" min={0} max={100} maxDecimals={1} />

<QuantityField
  label="Quantité réceptionnée" value={qty} onValueChange={setQty}
  unit={unit} units={[{ value: 'kg', label: 'kg' }, { value: 't', label: 't' }]} onUnitChange={setUnit}
/>

const [amount, setAmount] = useState<bigint | null>(18750000n);
<MoneyField label="Montant du règlement" currency="XOF" value={amount} onValueChange={setAmount} showAmountInWords required />
<MoneyField label="Montant de l’avoir" currency="XOF" value={credit} onValueChange={setCredit} allowNegative />
<MoneyField label="Acompte" currency="XOF" value={null} onValueChange={…} error="…" />
<MoneyField label="Montant en euros" currency="EUR" value={1250050n} onValueChange={…} />

<DateField label="Date de livraison souhaitée" value={date} onChange={(e) => setDate(e.target.value)} min="2026-10-13" />
<DateRangeField label="Période" value={range} onValueChange={setRange} />

<FileUpload
  label="Pièces jointes" files={files}
  onFilesAdded={(items) => { setFiles((f) => [...f, ...items]); items.filter((i) => i.status === 'pending').forEach(upload); }}
  onRemove={(item) => setFiles((f) => f.filter((x) => x.id !== item.id))}
  accept=".pdf,image/*,.xlsx" maxSize={10 * 1024 * 1024} maxFiles={8}
/>

<FormSection title="Identité du client" description="…" actions={<Button variant="link">Importer depuis l’IFU</Button>}>
  <FormGrid columns={2}>
    <TextField label="Raison sociale" required />
    <TextField label="Adresse" fieldClassName="md:col-span-full" />
  </FormGrid>
</FormSection>
<FormActions sticky={false}
  secondary={<Button>Annuler</Button>}
  primary={<Button variant="primary" type="submit">Créer le client</Button>} />

<Field label="Code IFU" hint="8 chiffres + 1 lettre" required>
  {(f) => <input id={f.id} aria-describedby={f.describedBy} aria-invalid={f.invalid || undefined}
                 className={cn(inputBaseClasses, inputSizeClasses.md, 'font-mono uppercase')} />}
</Field>

<FieldGroup label="Téléphone du livreur" hint="Indicatif et numéro">
  {(g) => <div className="flex gap-2">…</div>}
</FieldGroup>

<InputAdornments leading={<Search />} trailing="lots">
  {(style) => <input style={style} className={cn(inputBaseClasses, inputSizeClasses.md)} />}
</InputAdornments>

<CashCountTable expected={385_000n} defaultQuantities={{ 'note-10000': 30, 'note-5000': 12 }}
  onQuantitiesChange={(quantities, total) => setTotal(total)} />
<CashCountTable readOnly quantities={quantities} caption="Billetage de l’arrêté ARC-2026-0327" />

<FormGrid columns={4}>
  <TextField label="Code article" />
  <SelectField label="Unité de stock" options={…} />
  …
</FormGrid>

<SelectField label="Mode de règlement" defaultValue="momo" options={…} />
<MoneyField label="Montant" currency="XOF" defaultValue="358160" />
<NumberField label="Humidité" unit="%" defaultValue="13.5" maxDecimals={1} />
<RadioGroup label="Priorité" defaultValue="normal" options={…} />
<DateField label="Échéance" defaultValue="2026-10-31" onValueChange={(iso) => …} />