fix(Input): aria-invalid tailwind classname

[ntatoud]

The className has-[[aria-invalid]]:<some-style> would apply the style even if the input had aria-label="false" in the DOM.
The correct way to write it was has-[[aria-invalid="true"]]:<some-style> which can be simplified as has-aria-invalid:<some-style>.

I checked around the code and did not see any other similar case.

Summary by CodeRabbit

• Refactor
  • Updated input component styling configuration for improved code maintainability. No changes to user-facing functionality or appearance.

[coderabbitai]

Walkthrough

Updates Tailwind CSS variant syntax in the input component from attribute selector notation has-[[aria-invalid]] to the newer has-aria-invalid variant for handling aria-invalid states. The styling behavior and dark-mode support remain unchanged.

Changes

Cohort / File(s)	Summary
Tailwind variant syntax update src/components/ui/input.tsx	Changed aria-invalid state handling from has-[[aria-invalid]] attribute selector syntax to has-aria-invalid variant syntax across border, ring, and dark mode classes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file with localized, repetitive syntax changes
• No functional or logic modifications
• Direct variant name substitution with consistent pattern application

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing the aria-invalid Tailwind classname in the Input component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/input-invalid-styles

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b12d92 and 6c889d4.

📒 Files selected for processing (1)

• src/components/ui/input.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Playwright E2E Tests

🔇 Additional comments (1)

src/components/ui/input.tsx (1)

13-13: Correct fix for aria-invalid attribute handling.

The change from has-[[aria-invalid]] to has-aria-invalid: properly fixes the bug where styles were applied regardless of the aria-invalid value. The new syntax correctly matches only when aria-invalid="true", preventing incorrect styling when the attribute is explicitly set to "false".

To confirm the has-aria-invalid: variant is fully supported in your Tailwind v4.1.14 setup, please verify that:

1. The destructive border styles apply correctly when an input has aria-invalid="true"
2. The styles do NOT apply when an input has aria-invalid="false" or no aria-invalid attribute

You can test this by temporarily adding different aria-invalid states to an Input component in your development environment.

---

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 and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud