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.

RECORRIDO DEL CÓDIGO FUENTELeer la operación en el orden redactado
Choose a point to look closer
01 / Recorrido del código fuente

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.

Directorio de trabajo: 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.
CONTEXTO DE LA FUENTE

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
Tu vista

Make room for your context.

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

Tu contexto

The different parts of you

Choose a starting point

Una mezcla útil de contexto, imágenes y orientación discreta.

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

Comodidad de lectura

Elige tu idioma

El idioma de la interfaz solo cambia el texto. Los mercados, precios y flujos de trabajo conservan sus propios ajustes.

Cobertura de traducción

Parte del contenido se muestra en inglés.

Navegación151
Grafo616
Categorías188
Portafolio332
Ejemplos2035
Vista previa de la fuente41

Se añadirán más traducciones a medida que se revise el contenido.

Esta preferencia se guarda en este navegador.

Buscar en el sitio web

Puntos de partida útiles

Sin resultados. Prueba una frase más corta, un nombre de operación u otro ámbito de búsqueda.

UN POCO DE ESPACIO PARA EXPLORAR

Encuentra algo que explorar.

Abre una vista detallada en esta página, prueba otra perspectiva o sigue el detalle a su propia página.

Cómo funcionan las vistas previas y los controles
01

Mirar antes de salir

Pasa el cursor por un enlace o enfócalo con Tab para ver una vista previa. Hacer clic en el enlace original o pulsar Intro siempre abre su destino.

02

Mantener el contexto

Entra en la vista previa para explorar sus secciones. Usa Alt + ↓ desde un enlace enfocado para entrar con el teclado. Escape la cierra.

03

Abrir las posibilidades

Las filas desplegables, las perspectivas y los controles destacados revelan más. Tu vista cambia la comodidad de lectura y el contexto que exploras.

Un botón separado para mirar más de cerca

Muestra pequeños botones de vista previa junto a los enlaces donde haya espacio. Toca el ojo para inspeccionar o el enlace para ir directamente. Esta elección permanece en esta pestaña.

No se recoge historial de navegación. El movimiento reducido sigue tu dispositivo y Tu vista.