Form Validation Form Control

Route

Open the live form page at /app/forms/form-validation.

The form index is available at /app/forms.

/forms/form-validation

Source files

The catalog entry is defined in lib/form-element-catalog.ts.

The page route is app/app/forms/[slug]/page.tsx.

The showcase renderer is components/form-element-showcase.tsx.

Some larger form families use dedicated files such as components/form-layouts-showcase.tsx, components/form-validation-showcase.tsx, and components/form-wizard-showcase.tsx.

Interaction contract

Form Validation should visually align with the textfield focus, density, label, disabled, readonly, validation, and dark-theme behavior where applicable.

Focus states should use --textfield-focus-color with fallback to --primary.

Avoid hardcoded focus colors so custom primary color selection remains accurate.

• Focus state follows the selected primary color.
• Dark mode background, border, placeholder, and text are readable.
• Open menus or popovers have correct surface color.
• Validation states override focus color when invalid or valid.
• Mobile layout remains usable without horizontal scrolling.