feat(apollo-vertex): add invalid state to Combobox with alert icon

Show an AlertTriangleIcon and destructive border/ring when aria-invalid
is set on ComboboxTrigger. Add invalid example to docs and templates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: sdignum

apps/apollo-vertex/app/shadcn-components/combobox/page.mdx

@@ -1,4 +1,4 @@
-import { ComboboxSingleSelectTemplate, ComboboxMultiSelectTemplate } from '@/templates/ComboboxTemplate'
+import { ComboboxSingleSelectTemplate, ComboboxMultiSelectTemplate, ComboboxInvalidTemplate } from '@/templates/ComboboxTemplate'
 
 # Combobox
 
@@ -16,6 +16,12 @@ An autocomplete input with a filterable list, supporting single and multi-select
   <ComboboxMultiSelectTemplate />
 </div>
 
+### Invalid
+
+<div className="not-prose my-8 rounded-lg border overflow-hidden">
+  <ComboboxInvalidTemplate />
+</div>
+
 ## Installation
 
 ```bash
@@ -93,3 +99,24 @@ const [values, setValues] = useState<string[]>([])
   </ComboboxContent>
 </Combobox>
 ```
+
+### Invalid
+
+```tsx
+<Combobox value={value} onValueChange={setValue}>
+  <ComboboxTrigger placeholder="Select a framework..." aria-invalid="true">
+    {selectedLabel}
+  </ComboboxTrigger>
+  <ComboboxContent>
+    <ComboboxInput placeholder="Search frameworks..." />
+    <ComboboxList>
+      <ComboboxEmpty>No results found.</ComboboxEmpty>
+      <ComboboxGroup>
+        <ComboboxItem value="next">Next.js</ComboboxItem>
+        <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
+        <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
+      </ComboboxGroup>
+    </ComboboxList>
+  </ComboboxContent>
+</Combobox>
+```

apps/apollo-vertex/registry/combobox/combobox.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-react";
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  ChevronsUpDownIcon,
+  XIcon,
+} from "lucide-react";
 import * as React from "react";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
@@ -98,9 +103,11 @@ function ComboboxTrigger({
   className,
   placeholder,
   children,
+  "aria-invalid": ariaInvalid,
   ...props
 }: ComboboxTriggerProps) {
   const { open } = useComboboxContext();
+  const isInvalid = ariaInvalid === "true" || ariaInvalid === true;
 
   return (
     <PopoverTrigger asChild>
@@ -110,6 +117,7 @@ function ComboboxTrigger({
         tabIndex={0}
         aria-expanded={open}
         aria-haspopup="listbox"
+        aria-invalid={ariaInvalid}
         className={cn(
           buttonVariants({ variant: "outline" }),
           "w-full justify-between font-normal",
@@ -119,7 +127,12 @@ function ComboboxTrigger({
         {...props}
       >
         {children ?? <span className="truncate">{placeholder}</span>}
-        <ChevronsUpDownIcon className="ml-auto size-4 shrink-0 opacity-50" />
+        <span className="ml-auto flex items-center gap-1">
+          {isInvalid && (
+            <AlertTriangleIcon className="size-4 shrink-0 text-destructive" />
+          )}
+          <ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
+        </span>
       </div>
     </PopoverTrigger>
   );

apps/apollo-vertex/templates/ComboboxTemplate.tsx

@@ -92,6 +92,38 @@ function MultiSelectContent() {
   );
 }
 
+function InvalidContent() {
+  const [value, setValue] = useState<string[]>([]);
+  const selectedLabel = frameworks.find((f) => f.value === value[0])?.label;
+
+  return (
+    <div className="p-4">
+      <Combobox value={value} onValueChange={setValue}>
+        <ComboboxTrigger
+          className="w-[240px]"
+          placeholder={"Select a framework"}
+          aria-invalid="true"
+        >
+          {selectedLabel}
+        </ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxInput placeholder="Search frameworks..." />
+          <ComboboxList>
+            <ComboboxEmpty>{"No frameworks found."}</ComboboxEmpty>
+            <ComboboxGroup>
+              {frameworks.map((f) => (
+                <ComboboxItem key={f.value} value={f.value}>
+                  {f.label}
+                </ComboboxItem>
+              ))}
+            </ComboboxGroup>
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
+  );
+}
+
 export const ComboboxSingleSelectTemplate = dynamic(
   () => Promise.resolve(SingleSelectContent),
   { ssr: false },
@@ -101,3 +133,8 @@ export const ComboboxMultiSelectTemplate = dynamic(
   () => Promise.resolve(MultiSelectContent),
   { ssr: false },
 );
+
+export const ComboboxInvalidTemplate = dynamic(
+  () => Promise.resolve(InvalidContent),
+  { ssr: false },
+);