EXAMPLE / UI

Capture now, complete when ready

Use form contracts to accept a minimal intake while keeping missing readiness fields visible.

Test fixtureIntermediate
PATTERN EXPLORER

Follow the pattern. Inspect its limits.

Explore the source walkthrough, its evidence and the choices you would make in your own application.

PARCOURS DU CODE SOURCELire l’opération dans l’ordre rédigé
Choose a point to look closer
01 / Parcours du code source

Choose the form contract

Inspect all-fields, progressive-steps, and customer-projection forms. The package includes field kinds, conditional rules, sections, and step layouts.

An exploration of the inspected source; no example is executed here.

1 / 4

The situation.

A customer intake can begin with a name. In the fixture, a quick capture is accepted while email, phone, and consent remain completion debt. A richer profile can then determine whether the record is ready for the next workflow.

What you will learn

  • Describe form controls and layout with FormSpec metadata.
  • Separate accepted intake from a complete business record.
  • Expose public form and proof entrypoints without depending on private preview helpers.

Follow the operation.

  1. 01

    Choose the form contract

    Inspect all-fields, progressive-steps, and customer-projection forms. The package includes field kinds, conditional rules, sections, and step layouts.

  2. 02

    Inspect minimal intake

    The quick-capture fixture contains a customer ID and display name. The smoke test expects capture to succeed and completion to remain incomplete with email, phone, and consent debt.

  3. 03

    Inspect conditional validation

    Another test builds Zod validation with relations and expects a missing repeated contact value to be reported at contacts[0].value.

  4. 04

    Use the public proof map

    The proof-config export lists docs, sandbox, forms, and UI entrypoints. Adapt through the supported exports, then supply your own persistence and submission behavior.

What the source demonstrates.

  • The inspected fixture separates acceptance from completion status.
  • The source tests inspect field coverage, step layout, conditional validation, and public exports.
  • The public preview is deterministic fixture state with no required backend or credentials.

What it does not establish.

  • Production form storage, submission delivery, or authentication.
  • A production renderer for every host application.
  • A PII hint automatically implementing a privacy control.

Bring it into your environment.

Use the exact source context and prerequisites below. A source walkthrough is not a verified public-package installation recipe.

  • Access to the inspected source repository and a checkout at the cited revision.
  • The repository's Bun workspace dependencies and required generated package exports. These instructions were inspected; the examples were not executed in this review.

Répertoire de travail : examples/form-showcase

PACKAGE-LOCAL COMMANDS
bun run smoke

The source assertions cover quick-capture acceptance, incomplete readiness, conditional validation, and supported public entrypoints.

Commands and tests inspected; not executed here.

Read the related guide →

Make the pattern your own.

  • Decide which fields block intake and which block later readiness.
  • Map the FormSpec fields to your host design system.
  • Add storage, submission, and authorization tests when connecting the form to real actions.
CONTEXTE SOURCE

Inspect the evidence.

Reviewed 2026-10-27 · b67c376f

Pinned source links require repository access; publication and anonymous package availability were not checked for this example.

Declared maturity
stable
Catalogue registration
Registered
Inline preview
Registered
Execution in this review
Not rerun
Production qualification
Not assessed
Votre vue

Make room for your context.

Shape the presentation around this moment. You can change it whenever you need.

Votre contexte

The different parts of you

Choose a starting point

Un mélange utile de contexte, de visuels et de guidage discret.

Tune each dimension
Each dimension can change independently. Product permissions and available actions stay unchanged.

Support the way you begin and return

Tune your support

Confort de lecture

Choisir votre langue

La langue de l’interface change uniquement le texte. Les marchés, les prix et les parcours conservent leurs propres paramètres.

Couverture des traductions

Une partie du contenu est affichée en anglais.

Navigation151
Graphe616
Catégories378
Portfolio833
Exemples2 035
Aperçu de la source1 542

D’autres traductions seront ajoutées à mesure que le contenu sera relu.

Cette préférence est enregistrée dans ce navigateur.

Rechercher sur le site

Des points de départ utiles

Aucun résultat. Essayez une expression plus courte, un nom d’opération ou un autre périmètre de recherche.

UN PEU DE PLACE POUR EXPLORER

Trouvez quelque chose à explorer.

Ouvrez un aperçu détaillé sur cette page, essayez une autre perspective ou suivez le détail vers sa propre page.

Fonctionnement des aperçus et des commandes
01

Regarder avant de partir

Survolez un lien ou sélectionnez-le avec Tab pour voir un aperçu. Cliquer sur le lien d’origine ou appuyer sur Entrée ouvre toujours sa destination.

02

Rester dans le contexte

Entrez dans l’aperçu pour explorer ses sections. Depuis un lien sélectionné, utilisez Alt + ↓ pour y entrer au clavier. Échap le ferme.

03

Ouvrir les possibilités

Les lignes dépliables, les choix de perspective et les commandes mises en évidence révèlent davantage. Votre vue adapte le confort de lecture et le contexte exploré.

Un bouton séparé pour voir de plus près

Affichez de petits boutons d’aperçu à côté des liens quand l’espace le permet. Touchez l’œil pour examiner ou le lien pour y aller directement. Ce choix reste dans cet onglet.

Aucun historique de navigation n’est collecté. La réduction des animations suit votre appareil et Votre vue.