fix: forward isInvalid to Select and DatePicker trigger ring

components/application/date-picker/date-picker.tsx

@@ -4,8 +4,9 @@ import { getLocalTimeZone, today } from "@internationalized/date";
 import { useControlledState } from "@react-stately/utils";
 import { Calendar as CalendarIcon } from "@untitledui/icons";
 import { useDateFormatter } from "react-aria";
+import { useContext } from "react";
 import type { DatePickerProps as AriaDatePickerProps, DateValue } from "react-aria-components";
-import { DatePicker as AriaDatePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components";
+import { DatePicker as AriaDatePicker, DatePickerStateContext, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components";
 import { Button, type ButtonProps } from "@/components/base/buttons/button";
 import { cx } from "@/utils/cx";
 import { Calendar } from "./calendar";
@@ -20,6 +21,27 @@ interface DatePickerProps extends AriaDatePickerProps<DateValue> {
     size?: ButtonProps["size"];
 }
 
+// Inner trigger that reads `isInvalid` from the surrounding DatePicker state
+// and forwards it to the Button's ring color. Closes the gap reported in
+// https://github.com/untitleduico/react/issues/187.
+const DatePickerTrigger = ({ size, children }: { size: ButtonProps["size"]; children: React.ReactNode }) => {
+    const state = useContext(DatePickerStateContext);
+    const isInvalid = state?.isInvalid ?? false;
+    return (
+        <Button
+            size={size}
+            color="secondary"
+            iconLeading={CalendarIcon}
+            className={cx(
+                // Match the Input/select invalid-state styling.
+                isInvalid && "ring-error_subtle",
+            )}
+        >
+            {children}
+        </Button>
+    );
+};
+
 export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, size = "sm", ...props }: DatePickerProps) => {
     const formatter = useDateFormatter({
         month: "short",
@@ -33,9 +55,7 @@ export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply,
     return (
         <AriaDatePicker aria-label="Date picker" shouldCloseOnSelect={false} {...props} value={value} onChange={setValue}>
             <AriaGroup>
-                <Button size={size} color="secondary" iconLeading={CalendarIcon}>
-                    {formattedDate}
-                </Button>
+                <DatePickerTrigger size={size}>{formattedDate}</DatePickerTrigger>
             </AriaGroup>
             <AriaPopover
                 offset={8}

components/base/select/select.tsx

@@ -29,19 +29,25 @@ interface SelectValueProps {
     size: "sm" | "md" | "lg";
     isFocused: boolean;
     isDisabled: boolean;
+    isInvalid: boolean;
     placeholder?: string;
     ref?: Ref<HTMLButtonElement>;
     icon?: FC | ReactNode;
 }
 
-const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, icon, ref }: SelectValueProps) => {
+const SelectValue = ({ isOpen, isFocused, isDisabled, isInvalid, size, placeholder, icon, ref }: SelectValueProps) => {
     return (
         <AriaButton
             ref={ref}
             className={cx(
                 "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
                 (isFocused || isOpen) && "ring-2 ring-brand",
                 isDisabled && "cursor-not-allowed opacity-50",
+                // Match Input's invalid-state styling: error ring at rest,
+                // escalated to ring-2 on focus. Closes the gap reported in
+                // https://github.com/untitleduico/react/issues/187.
+                isInvalid && "ring-error_subtle",
+                isInvalid && (isFocused || isOpen) && "ring-2 ring-error",
             )}
         >
             <AriaSelectValue<SelectItemType>

package.json

@@ -65,6 +65,7 @@
     "@storybook/nextjs-vite": "10.5.3",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/react": "^16.3.3",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
@@ -85,11 +86,13 @@
     "eslint-plugin-storybook": "10.5.3",
     "eslint-plugin-tailwindcss": "^4.2.0",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "jsdom": "^30.0.1",
     "postcss": "^8.5.21",
     "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "storybook": "^10.5.3",
     "typescript": "^5.9.3",
-    "vite": "^8.1.5"
+    "vite": "^8.1.5",
+    "vitest": "^5.0.0"
   }
 }

tests/invalid-ring.test.tsx

@@ -0,0 +1,70 @@
+// Regression test for https://github.com/untitleduico/react/issues/187
+//
+// Select and DatePicker should forward the `isInvalid` prop to the visible
+// trigger button ring color, matching the convention used by Input.
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { DatePicker } from "@/components/application/date-picker/date-picker";
+import { Select } from "@/components/base/select/select";
+
+afterEach(() => {
+    cleanup();
+});
+
+// react-aria-components <Select> also renders a hidden native <select>
+// for form submission, so we scope to the pressable trigger button.
+const getPressableTrigger = () => {
+    const triggers = document.querySelectorAll('button[data-react-aria-pressable="true"]');
+    if (triggers.length === 0) {
+        throw new Error("No pressable trigger button found in rendered output");
+    }
+    return triggers[0] as HTMLButtonElement;
+};
+
+describe("Select trigger ring color when isInvalid", () => {
+    test("does not apply error ring when isInvalid is omitted", () => {
+        render(
+            <Select aria-label="Area" placeholder="Pick" items={[{ id: "1", label: "One" }]}>
+                {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
+            </Select>,
+        );
+        const trigger = getPressableTrigger();
+        expect(trigger.className).not.toMatch(/ring-error_subtle/);
+        expect(trigger.className).not.toMatch(/\bring-error\b/);
+    });
+
+    test("applies error ring token when isInvalid is true", () => {
+        render(
+            <Select aria-label="Area" isInvalid placeholder="Pick" items={[{ id: "1", label: "One" }]}>
+                {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
+            </Select>,
+        );
+        const trigger = getPressableTrigger();
+        expect(trigger.className).toMatch(/ring-error_subtle/);
+    });
+
+    test("does not apply brand ring color when invalid", () => {
+        render(
+            <Select aria-label="Area" isInvalid placeholder="Pick" items={[{ id: "1", label: "One" }]}>
+                {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
+            </Select>,
+        );
+        const trigger = getPressableTrigger();
+        // When invalid, the trigger must not show the neutral brand ring.
+        expect(trigger.className).not.toMatch(/\bring-brand\b/);
+    });
+});
+
+describe("DatePicker trigger ring color when isInvalid", () => {
+    test("applies error ring token when isInvalid is true", () => {
+        render(<DatePicker aria-label="Arrive" isInvalid />);
+        const trigger = getPressableTrigger();
+        expect(trigger.className).toMatch(/ring-error_subtle/);
+    });
+
+    test("uses default (non-error) ring token when isInvalid is omitted", () => {
+        render(<DatePicker aria-label="Arrive" />);
+        const trigger = getPressableTrigger();
+        expect(trigger.className).not.toMatch(/ring-error_subtle/);
+    });
+});

vitest.config.mts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "node:url";
+
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./", import.meta.url)),
+        },
+    },
+    test: {
+        environment: "jsdom",
+        globals: false,
+        include: ["tests/**/*.test.{ts,tsx}"],
+    },
+});