fix(forms): colour a control that is already known to be invalid

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Split out of #8177, where it was scope creep.

A text field only turns red once it has been blurred. Submit a form with
Enter and you get the error message underneath a grey border, so nothing
points at the field that is wrong.

autoValidate already meant "do not wait for the field to be touched", but it
was copied into state at mount, so it could not react to an error arriving
later. Reading it live is the fix:

-const [shouldValidate, setShouldValidate] = useState(!!value || !!autoValidate)
+const [hasBeenTouched, setHasBeenTouched] = useState(!!value)
-const invalid = shouldValidate && !isValid
+const invalid = (hasBeenTouched || !!autoValidate) && !isValid

InputGroup already had an isInvalid prop, but it only put a class on the
wrapper and never reached the control. It now forwards to Input.

No new prop, and no call site has to change.

How did you test this code?

The behaviour is opt-in, so the 100-odd existing InputGroup call sites are
unaffected: isInvalid currently has no consumers on main, and autoValidate
has exactly one (RegexTester), which passes a static true and so behaves
identically either way.

• Storybook, Components/Forms/InputGroup: the new InvalidBeforeBlur story should show a red border on an untouched field. On main the same story is grey.
• The other InputGroup stories (WithError, MultipleErrors, Disabled, Sizes) should be unchanged.
• Components/Forms/Input stories unchanged.
• A form where a field validates on blur should still stay neutral until you leave it, i.e. no form goes red before you have typed.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview	Aug 4, 2026 12:19pm
flagsmith-frontend-staging	Ready	Preview	Aug 4, 2026 12:19pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Aug 4, 2026 12:19pm

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5e8d6f6e-904a-4d75-b188-fa7a1c9e63aa

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• ✅ Review completed - (🔄 Check again to review again)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}