fix: improve multi-select validation UX with Banner component (#12674)

[jezweb]

Summary

• Fixes duplicate option validation error messages not being displayed in multi-select field creation
• IMPROVED UX: Uses Twenty CRM's Banner component for professional error display
• Follows established design system patterns instead of cramped individual field errors
• Connects existing Zod validation to UI layer for better user feedback

Problem

When creating multi-select fields with duplicate option values, the validation fails silently with no visual feedback to users about what's wrong.

Solution (UX Improvements)

1. Professional Error Display: Uses Twenty CRM's Banner component with danger variant for clean, prominent error messaging
2. Design System Compliance: Follows Twenty CRM's established patterns for form-level validation feedback
3. Manual Validation Trigger: Added trigger('options') to ensure validation runs when options change
4. Clean Interface: Removed cramped individual field error messages in favor of form-level banner
5. Accessibility: Banner component includes proper accessibility features

Screenshots

Improved Validation Banner (Professional UX)

!Twenty CRM Improved Validation Banner

Demo Page Comparison

!Multi-Select Validation Demo

Original Interface Screenshot

!Twenty CRM Multi-Select After Fix

Technical Implementation

• Banner Integration: Imported and used Twenty CRM's Banner component with danger variant
• Form State Access: Added formState: { errors } to useFormContext in SettingsDataModelFieldSelectForm
• Error Propagation: Displays form-level validation errors using Banner instead of individual field errors
• Validation Trigger: Manual trigger ensures validation runs on option changes
• Clean Code: Removed individual field error prop passing for cleaner component interface

Test Plan

1. Navigate to Settings → Data model → [Object] → Add Field → Multi-select
2. Create duplicate option labels (e.g., "Option 1" in multiple fields)
3. Verify professional red banner appears at top of form with clear error message
4. Verify Save button remains disabled during validation errors
5. Change option to unique value and verify banner disappears

Files Changed

• packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
• packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

The validation logic was already present - we improved the user experience by implementing professional error display using Twenty CRM's design system.

🤖 Generated with Claude Code

[github-actions[bot]]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:33222

This environment will automatically shut down when the PR is closed or after 5 hours.

[prastoin]

Hello there, putting waiting for author labels as ci is broken. Is this related in any existing issue ?

[prastoin]

Also title seems to be unrelated ? this seem to be fixing/refactoring the phone input https://github.com/twentyhq/twenty/issues/12903 ? You pushed two html files that also seem unrelated

[prastoin]

Yeah, it seems that you've swapped two PRs content and description Closing this from now