feat(Select): add size prop (xs/sm/base/lg) matching Input/Combobox (#405)

Author: mattrothenberg

.changeset/select-size-variants.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": minor
+---
+
+feat(Select): add size prop (xs/sm/base/lg) matching Input and Combobox heights

packages/kumo-docs-astro/src/components/demos/SelectDemo.tsx

@@ -16,6 +16,54 @@ export function SelectBasicDemo() {
   );
 }
 
+/** Select trigger sizes (xs/sm/base/lg) matching Input and Combobox. */
+export function SelectSizesDemo() {
+  return (
+    <div className="grid gap-4">
+      <div className="flex items-center gap-3">
+        <span className="w-10 text-sm text-kumo-subtle">xs</span>
+        <Select
+          aria-label="Select size xs"
+          size="xs"
+          className="w-[200px]"
+          placeholder="Choose..."
+          items={{ a: "Option A", b: "Option B" }}
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-10 text-sm text-kumo-subtle">sm</span>
+        <Select
+          aria-label="Select size sm"
+          size="sm"
+          className="w-[200px]"
+          placeholder="Choose..."
+          items={{ a: "Option A", b: "Option B" }}
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-10 text-sm text-kumo-subtle">base</span>
+        <Select
+          aria-label="Select size base"
+          size="base"
+          className="w-[200px]"
+          placeholder="Choose..."
+          items={{ a: "Option A", b: "Option B" }}
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-10 text-sm text-kumo-subtle">lg</span>
+        <Select
+          aria-label="Select size lg"
+          size="lg"
+          className="w-[200px]"
+          placeholder="Choose..."
+          items={{ a: "Option A", b: "Option B" }}
+        />
+      </div>
+    </div>
+  );
+}
+
 /** Select without visible label - use aria-label for accessibility. */
 export function SelectWithoutLabelDemo() {
   const [value, setValue] = useState("apple");

packages/kumo-docs-astro/src/pages/components/select.mdx

@@ -13,6 +13,7 @@ import Heading from "~/components/docs/Heading.astro";
 import PropsTable from "~/components/docs/PropsTable.astro";
 import {
   SelectBasicDemo,
+  SelectSizesDemo,
   SelectWithoutLabelDemo,
   SelectWithFieldDemo,
   SelectPlaceholderDemo,
@@ -92,6 +93,20 @@ export default function Example() {
   </ComponentExample>
 </ComponentSection>
 
+{/* Sizes */}
+
+<ComponentSection>
+  <Heading level={3}>Sizes</Heading>
+  <p>
+    Use the <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">size</code> prop
+    to match Input sizing (xs, sm, base, lg).
+  </p>
+
+  <ComponentExample demo="SelectSizesDemo">
+    <SelectSizesDemo client:load />
+  </ComponentExample>
+</ComponentSection>
+
 {/* Without Visible Label */}
 
 <ComponentSection>
@@ -318,11 +333,23 @@ export default function Example() {
 <Heading level={3}>Select.Option</Heading>
 <PropsTable component="Select.Option" />
 
-  <Heading level={3}>Select.Group</Heading>
-  <p>Groups related options together with an accessible <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">role="group"</code>. Use with <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">Select.GroupLabel</code> to provide a visible heading.</p>
+<Heading level={3}>Select.Group</Heading>
+<p>
+  Groups related options together with an accessible{" "}
+  <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">role="group"</code>.
+  Use with{" "}
+  <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">
+    Select.GroupLabel
+  </code>{" "}
+  to provide a visible heading.
+</p>
 
-  <Heading level={3}>Select.GroupLabel</Heading>
-  <p>A visible heading for a <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">Select.Group</code>. Automatically associated with its parent group for accessibility.</p>
+<Heading level={3}>Select.GroupLabel</Heading>
+<p>
+  A visible heading for a{" "}
+  <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">Select.Group</code>.
+  Automatically associated with its parent group for accessibility.
+</p>
 
   <Heading level={3}>Select.Separator</Heading>
   <p>A visual divider line between option groups. Renders with <code class="rounded bg-kumo-control px-1 py-0.5 text-sm">role="separator"</code>.</p>

packages/kumo/src/components/select/select.test.tsx

@@ -4,6 +4,22 @@ import { useState } from "react";
 import { Select } from "./select";
 
 describe("Select", () => {
+  describe("size", () => {
+    it("applies size classes to the trigger", () => {
+      const { container } = render(
+        <Select aria-label="Pick one" size="xs">
+          <Select.Option value="a">Option A</Select.Option>
+        </Select>,
+      );
+
+      const trigger = container.querySelector('[role="combobox"]');
+      expect(trigger).toBeTruthy();
+      expect(trigger?.className).toContain("h-5");
+      expect(trigger?.className).toContain("px-1.5");
+      expect(trigger?.className).toContain("text-xs");
+    });
+  });
+
   describe("label visibility (new behavior)", () => {
     it("shows visible label by default when label prop is provided", () => {
       render(

packages/kumo/src/components/select/select.tsx

@@ -4,19 +4,22 @@ import { forwardRef, useId } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../../utils/cn";
 import { buttonVariants } from "../button";
+import { KUMO_INPUT_VARIANTS, type KumoInputSize } from "../input/input";
 import { SkeletonLine } from "../loader";
 import { Field, type FieldErrorMatch } from "../field/field";
 import {
   usePortalContainer,
   type PortalContainer,
 } from "../../utils/portal-provider";
 
-/** Select variant definitions (currently empty, reserved for future additions). */
+/** Select variant definitions. */
 export const KUMO_SELECT_VARIANTS = {
-  // Select currently has no variant options but structure is ready for future additions
+  size: KUMO_INPUT_VARIANTS.size,
 } as const;
 
-export const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;
+export const KUMO_SELECT_DEFAULT_VARIANTS = {
+  size: "base",
+} as const;
 
 /**
  * Select component styling metadata for Figma plugin code generation
@@ -57,16 +60,40 @@ export const KUMO_SELECT_STYLING = {
 } as const;
 
 // Derived types from KUMO_SELECT_VARIANTS
-export interface KumoSelectVariantsProps {}
+export type KumoSelectSize = keyof typeof KUMO_SELECT_VARIANTS.size;
 
-export function selectVariants(_props: KumoSelectVariantsProps = {}) {
+export interface KumoSelectVariantsProps {
+  /**
+   * Size of the select trigger. Matches Input component sizes.
+   * - `"xs"` — Extra small for compact UIs (h-5 / 20px)
+   * - `"sm"` — Small for secondary fields (h-6.5 / 26px)
+   * - `"base"` — Default size (h-9 / 36px)
+   * - `"lg"` — Large for prominent fields (h-10 / 40px)
+   * @default "base"
+   */
+  size?: KumoSelectSize;
+}
+
+export function selectVariants({
+  size = KUMO_SELECT_DEFAULT_VARIANTS.size,
+}: KumoSelectVariantsProps = {}) {
   return cn(
-    buttonVariants(),
+    buttonVariants({ size }),
     "justify-between font-normal",
     "focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100",
   );
 }
 
+const triggerIconStyles: Record<
+  KumoInputSize,
+  { iconSize: number; className: string }
+> = {
+  xs: { iconSize: 12, className: "text-kumo-subtle" },
+  sm: { iconSize: 14, className: "text-kumo-subtle" },
+  base: { iconSize: 16, className: "text-kumo-subtle" },
+  lg: { iconSize: 18, className: "text-kumo-subtle" },
+};
+
 /**
  * Shape for items that carry extra metadata (disabled state, tooltip).
  * Plain `ReactNode` values are still supported for backward compatibility.
@@ -239,6 +266,8 @@ type SelectPropsGeneric<T, Multiple extends boolean | undefined = false> = Omit<
 export interface SelectProps {
   /** Additional CSS classes merged via `cn()`. */
   className?: string;
+  /** Size of the select trigger. Matches Input component sizes. */
+  size?: KumoSelectSize;
   /**
    * Label content for the select.
    * When provided, enables the Field wrapper with a visible label above the select.
@@ -311,6 +340,7 @@ export function Select<T, Multiple extends boolean | undefined = false>({
   hideLabel,
   placeholder,
   loading,
+  size = KUMO_SELECT_DEFAULT_VARIANTS.size,
   labelTooltip,
   description,
   error,
@@ -365,9 +395,7 @@ export function Select<T, Multiple extends boolean | undefined = false>({
     >
       <SelectBase.Trigger
         className={cn(
-          buttonVariants(),
-          "justify-between font-normal",
-          "focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100",
+          selectVariants({ size }),
           props.disabled && "cursor-not-allowed opacity-50",
           className,
         )}
@@ -379,13 +407,21 @@ export function Select<T, Multiple extends boolean | undefined = false>({
         ) : (
           <SelectBase.Value
             placeholder={placeholder}
-            className="min-w-0 truncate"
+            className="min-w-0 truncate data-[placeholder]:text-kumo-placeholder"
           >
             {renderValue}
           </SelectBase.Value>
         )}
-        <SelectBase.Icon className="flex shrink-0 items-center">
-          <CaretUpDownIcon />
+        <SelectBase.Icon
+          className={cn(
+            "flex shrink-0 items-center",
+            triggerIconStyles[size].className,
+          )}
+        >
+          <CaretUpDownIcon
+            size={triggerIconStyles[size].iconSize}
+            className="fill-current"
+          />
         </SelectBase.Icon>
       </SelectBase.Trigger>
       <SelectBase.Portal container={container}>