Skip to content

feat: add uncontrolled mode to FormError#168

Merged
jaruesink merged 2 commits intomainfrom
feature/uncontrolled-form-error
Jan 21, 2026
Merged

feat: add uncontrolled mode to FormError#168
jaruesink merged 2 commits intomainfrom
feature/uncontrolled-form-error

Conversation

@jaruesink
Copy link
Copy Markdown
Contributor

@jaruesink jaruesink commented Jan 21, 2026

Summary

  • Added message prop to FormError and FormErrorField to support uncontrolled mode.
  • FormError now defaults name to _form only when message is not provided.
  • Added Uncontrolled stories to demonstrate manual error display.
  • Added unit tests covering uncontrolled behavior and precedence.

Summary by CodeRabbit

  • New Features

    • FormError component now supports uncontrolled mode, allowing you to manually pass error messages via a new message prop without relying on form state.
  • Documentation

    • Added story examples demonstrating uncontrolled FormError usage with custom styling options.
  • Tests

    • Added comprehensive test suite for uncontrolled mode, including message precedence and context-independent rendering scenarios.

✏️ Tip: You can customize this high-level summary in your review settings.

@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jan 21, 2026

Walkthrough

The changes add uncontrolled mode support to the FormError component, enabling it to display manual error messages via a message prop. This includes a changeset file, a new story demonstrating the feature, tests validating the uncontrolled behavior, and updates to core components to handle both manual and form state-driven error displays.

Changes

Cohort / File(s) Summary
Changeset Documentation
.changeset/add-uncontrolled-form-error.md
Documents patch release for @lambdacurry/forms package, noting addition of uncontrolled mode via optional message prop to FormError component.
Story & Examples
apps/docs/src/remix-hook-form/form-error-uncontrolled.stories.tsx
New story file demonstrating uncontrolled FormError usage. Includes UncontrolledFormErrorExample component with Default and CustomStyling story variants. Shows FormError rendered with manual message prop independently of form state.
Tests
apps/docs/src/remix-hook-form/form-error.test.tsx
Adds optional message prop to TestFormWithError test helper; updates FormError usage to pass message through. Introduces new "Uncontrolled Mode" test suite validating manual message display, precedence over form state errors, and rendering without form context.
Core Components
packages/components/src/remix-hook-form/form-error.tsx, packages/components/src/ui/form-error-field.tsx
FormError: adds optional message prop to FormErrorProps; computes effectiveName conditionally based on presence of name or message; passes both to FormErrorField. FormErrorField: makes name optional; adds message prop; adds early return path rendering FormItem with FormMessage when message is provided; adds early null return when name is absent.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop, a skip, and now a way,
To show errors come what may!
No form control? No worries here,
Just pass a message, plain and clear.
Uncontrolled dreams now take their flight,

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: add uncontrolled mode to FormError' accurately and concisely summarizes the main change: introducing uncontrolled mode capability to the FormError component via a new message prop.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feature/uncontrolled-form-error

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 21, 2026

📝 Storybook Preview: View Storybook

This preview will be updated automatically when you push new changes to this PR.

Note: The preview will be available after the workflow completes and the PR is approved for deployment.

@jaruesink jaruesink merged commit 42da88b into main Jan 21, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant