# Composant shadcn/ui

> Installez un composant de formulaire qui affiche vos champs Ikiform avec vos propres composants shadcn/ui.

Si votre projet utilise shadcn/ui, vous pouvez installer un formulaire prêt à l'emploi au lieu d'écrire le markup. C'est une option parmi d'autres : le même formulaire fonctionne toujours avec du [HTML simple](https://ikiform.com/fr/docs/html.md) et [fetch](https://ikiform.com/fr/docs/frameworks.md).

## Installation

`Terminal`:

```bash
npx shadcn@latest add https://ikiform.com/r/form.json
```

Cela copie `components/ikiform/form.tsx` dans votre projet et installe les composants shadcn/ui qu'il utilise : `button`, `checkbox`, `input`, `label`, `radio-group` et `textarea`. Le fichier vous appartient, modifiez-le à volonté. Les listes déroulantes utilisent un `<select>` natif, donc il fonctionne avec les variantes Radix et Base UI de shadcn/ui.

## Utilisation

`app/contact/page.tsx`:

```tsx
import { IkiForm } from "@/components/ikiform/form";

export default function Contact() {
  return <IkiForm form="frm_xxxxxxxxxxxxxxxx" />;
}
```

Au montage, le composant récupère le schéma public du formulaire et affiche un contrôle par champ, avec les libellés, placeholders, textes d'aide et options définis dans le tableau de bord. Définissez d'abord les champs dans l'onglet [Fields](https://ikiform.com/fr/docs/fields.md) du formulaire ; un formulaire sans champs n'affiche aucun input.

- Il valide dans le navigateur avec les mêmes règles et messages que le serveur.
- Il envoie du JSON avec le honeypot et un horodatage d'affichage signé, ce qui aide le scoring anti-spam.
- Les erreurs de champ du serveur apparaissent sous leur champ ; les autres erreurs apparaissent au-dessus du bouton.
- En cas de succès, il remplace le formulaire par son message de succès.

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `form` | `string` | Obligatoire. L'id du formulaire. |
| `fields` | `IkiFormField[]` | Remplace les champs récupérés. Même forme que les définitions de champs. |
| `onSuccess` | `({ id, values }) => void` | Appelé après un envoi réussi. |
| `submitLabel` | `string` | Texte du bouton. Par défaut, le libellé d'envoi du formulaire. |
| `successMessage` | `ReactNode` | Affiché après l'envoi. Par défaut, le message de succès du formulaire. |
| `turnstileSiteKey` | `string` | Uniquement pour les formulaires avec vos propres clés Turnstile et sans clé de site enregistrée dans Ikiform. |
| `className` | `string` | Noms de classes pour l'élément form. |
| `baseUrl` | `string` | Par défaut `https://ikiform.com`. |

`app/waitlist/page.tsx`:

```tsx
import { IkiForm } from "@/components/ikiform/form";

export default function Waitlist() {
  return (
    <IkiForm
      form="frm_xxxxxxxxxxxxxxxx"
      submitLabel="Join the waitlist"
      successMessage="You're on the list."
      onSuccess={({ id }) => console.log("Submitted", id)}
    />
  );
}
```

### Champs dans le code

Passez `fields` pour afficher le formulaire sans la définition du tableau de bord. Le serveur valide toujours selon les champs publiés du formulaire, alors gardez les deux synchronisés.

`Champs dans le code`:

```tsx
<IkiForm
  form="frm_xxxxxxxxxxxxxxxx"
  fields={[
    { id: "email", type: "email", label: "Work email", required: true },
    { id: "team_size", type: "number", label: "Team size", validation: { min: 1, integer: true } },
  ]}
/>
```

## Vérification humaine

Avec le contrôle anti-spam réglé sur **Ikiform**, le composant intègre une petite frame ikiform.com qui reste masquée tant que Turnstile n'a pas besoin d'un clic, et demande un nouveau token après chaque tentative. Si la frame ne peut pas se charger, il propose d'ouvrir la vérification dans une nouvelle fenêtre. Avec vos propres clés Turnstile, il affiche le widget Turnstile avec la clé de site du formulaire.

## L'endpoint de schéma

Le composant lit `GET https://ikiform.com/f/<formId>/schema`. Vous pouvez l'appeler vous-même pour construire votre propre rendu, ou utiliser `getSchema` du [SDK](https://ikiform.com/fr/docs/sdk.md#getschema).

`GET /f/:formId/schema`:

```json
{
  "id": "frm_xxxxxxxxxxxxxxxx",
  "title": "Contact",
  "description": null,
  "fields": [{ "id": "email", "type": "email", "label": "Email", "required": true }],
  "settings": { "submit_label": "Send", "success_message": "Thanks!" },
  "honeypot_field": "_gotcha",
  "turnstile_required": false,
  "turnstile_site_key": null,
  "challenge": null,
  "ts": "1792300000000.signature"
}
```

- Ouvert à toutes les origines (`Access-Control-Allow-Origin: *`) et jamais mis en cache.
- Les formulaires en pause, désactivés et inconnus renvoient tous le même `404`.
- Seuls les champs publiés et les réglages d'affichage quittent le serveur. Les domaines autorisés, l'URL de redirection, les réglages anti-spam et les limites de débit restent privés.
- `challenge` vaut `{ "provider": "ikiform", "url": ... }`, `{ "provider": "custom", "site_key": ... }` ou `null`. `ts` est un horodatage d'affichage signé et récent, à renvoyer en `_ikiform_ts`.
- Il autorise 60 requêtes par minute par visiteur et par formulaire, indépendamment du quota d'envoi.

> Le code source du composant est du React et du Tailwind simples. Lisez-le, restylez-le ou supprimez les parties inutiles.