Composant · Formulaire

Form

Stable

Wrapper `<form>` qui prend en charge la soumission asynchrone, suit un statut interne idle/submitting/submitted/error et affiche un message d’aide, de succès ou d’erreur sous les champs.

Voir le code (Svelte)

<Form status="idle">
  <Input label="Nom du projet" placeholder="Sent Forge" />
  <Input label="URL" placeholder="https://" type="url" />
  <Button variant="primary" type="submit">Créer</Button>
</Form>

Exemples

Formulaire de contact (succès)

Soumission qui échoue (erreur interne)

Message d’erreur explicite

API

Prop	Type	Default
`onsubmit`	`(event: SubmitEvent) => void \| Promise<void>`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`successText`	`string`	optionnel
`submitting`	`boolean` (`$bindable`)	`false`
`noNoscript`	`boolean`	`false`
`class`	`string`	optionnel
`children`	`Snippet`	requis
`...rest`	`HTMLFormAttributes` (sauf `class` / `onsubmit`)	optionnel

Notes d’usage

`onsubmit` peut être asynchrone : le composant appelle `event.preventDefault()`, passe en `submitting`, puis en `submitted` (ou `error` si la promesse rejette).

`errorText` fourni en prop prime sur l’erreur capturée en interne ; `successText` s’affiche après une soumission réussie et `helperText` seulement à l’état idle.

Un `<noscript>` d’avertissement est rendu par défaut ; passez `noNoscript` pour le supprimer.

Tokens utilisés

--st-component-form-gap
--st-component-form-fieldGap
--st-component-form-helpText
--st-component-form-errorText
--st-component-form-successText
--st-semantic-text-secondary
--st-semantic-feedback-error
--st-semantic-feedback-success