From 202ca5c7a428d9a192e781ec0eb178293dcf6b08 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 24 Sep 2026 14:43:50 +0200
Subject: [PATCH] Design System: Fix `Select` does not show its invalid state
 correctly (#50859)

## Problem

`Select` does not show its invalid state correctly.
Change anything in [the production form
example](https://supabase.com/design-system/docs/ui-patterns/forms) and
submit;

<img width="982" height="401" alt="image"
src="https://github.com/user-attachments/assets/3b0382e2-b77a-4f79-a9c6-3fa2d7c671a3"
/>

## Solution

Apply the same styles as for the other inputs:

<img width="887" height="354" alt="image"
src="https://github.com/user-attachments/assets/d05e12e1-171e-4e5c-8b49-2ea54ab79ce3"
/>

## Review instructions

Change anything in [the staging form
example](https://design-system-ah0n5wasc-supabase.vercel.app/design-system/docs/ui-patterns/forms)
and submit

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Select triggers now display destructive error styling when marked as
invalid, including updated background and border colors.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/ui/src/components/shadcn/ui/select-trigger.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/shadcn/ui/select-trigger.tsx b/packages/ui/src/components/shadcn/ui/select-trigger.tsx
index 67c9fd3b4e4..be51e32667d 100644
--- a/packages/ui/src/components/shadcn/ui/select-trigger.tsx
+++ b/packages/ui/src/components/shadcn/ui/select-trigger.tsx
@@ -3,9 +3,13 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from '../../../lib/constants'
+import { cn } from '../../../lib/utils'
 
 export const selectTriggerVariants = cva(
-  'flex w-full cursor-pointer items-center justify-between rounded-md border border-strong hover:border-control-hover bg-control-raised text-xs data-[placeholder]:text-foreground-lighter ring-border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200 data-[state=open]:border-control-hover gap-2 [&>span]:truncate text-left',
+  cn(
+    'flex w-full cursor-pointer items-center justify-between rounded-md border border-strong hover:border-control-hover bg-control-raised text-xs data-[placeholder]:text-foreground-lighter ring-border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200 data-[state=open]:border-control-hover gap-2 [&>span]:truncate text-left',
+    'aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:hover:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive'
+  ),
   {
     variants: {
       size: {