diff --git a/.changeset/mosaic-select-component.md b/.changeset/mosaic-select-component.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-select-component.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/headless/src/primitives/select/README.md b/packages/headless/src/primitives/select/README.md
index 0da68184076..0dd75067ab7 100644
--- a/packages/headless/src/primitives/select/README.md
+++ b/packages/headless/src/primitives/select/README.md
@@ -141,19 +141,20 @@ Typeahead is active only while the popup is open. It highlights the matching opt
 
 ## Data Attributes
 
-| Attribute                   | Applies To | Description                     |
-| --------------------------- | ---------- | ------------------------------- |
-| `data-open` / `data-closed` | Trigger    | Popup open state                |
-| `data-selected`             | Option     | The currently selected option   |
-| `data-active`               | Option     | The keyboard-highlighted option |
-| `data-disabled`             | Option     | Disabled option                 |
-| `data-side`                 | Positioner | Resolved placement side         |
+| Attribute                   | Applies To | Description                                                                       |
+| --------------------------- | ---------- | --------------------------------------------------------------------------------- |
+| `data-open` / `data-closed` | Trigger    | Popup open state                                                                  |
+| `data-selected`             | Option     | The currently selected option                                                     |
+| `data-active`               | Option     | The keyboard-highlighted option                                                   |
+| `data-disabled`             | Option     | Disabled option                                                                   |
+| `data-side`                 | Positioner | Resolved placement side, or `none` while the selected option overlays the trigger |
 
 ## Important Notes
 
 - **`label` on `Select.Option`** drives both display in `Select.Value` and typeahead matching. If omitted, `value` is used for both.
 - **`items` prop** is only for label resolution — it does not control which options render. You still render `Select.Option` children yourself.
 - **Disabled options** can still receive keyboard focus but cannot be selected.
+- **Popup contents freeze while closing.** The popup outlives `open` by its exit animation, so its children are wrapped in `Freeze` (`@clerk/headless/utils`) and hold their last frame: picking an option does not move `data-selected` to the new row under the animation. The popup element itself keeps updating, so `data-closed` / `data-ending-style` still land.
 
 ## ARIA
 
diff --git a/packages/headless/src/primitives/select/align-selected-item.test.ts b/packages/headless/src/primitives/select/align-selected-item.test.ts
new file mode 100644
index 00000000000..ffa3753fa98
--- /dev/null
+++ b/packages/headless/src/primitives/select/align-selected-item.test.ts
@@ -0,0 +1,346 @@
+import type { MiddlewareState } from '@floating-ui/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { alignSelectedItem } from './align-selected-item';
+
+function rect(top: number, height: number, left = 0, width = 100): DOMRect {
+  return {
+    top,
+    height,
+    left,
+    width,
+    bottom: top + height,
+    right: left + width,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  };
+}
+
+function define(el: HTMLElement, props: Record<string, unknown>) {
+  for (const [key, value] of Object.entries(props)) {
+    Object.defineProperty(el, key, { value, configurable: true, writable: true });
+  }
+}
+
+interface Setup {
+  referenceTop: number;
+  floatingHeight: number;
+  selectedOffset: number;
+  referenceY?: number;
+}
+
+function setup({ referenceTop, floatingHeight, selectedOffset, referenceY = referenceTop }: Setup) {
+  const reference = document.createElement('button');
+  const floating = document.createElement('div');
+  const scroller = document.createElement('div');
+  const selected = document.createElement('button');
+  floating.appendChild(scroller);
+  scroller.appendChild(selected);
+  document.body.append(reference, floating);
+
+  reference.getBoundingClientRect = () => rect(referenceTop, 32, 100, 120);
+  // Like the browser, the popup is only as tall as its cap allows.
+  floating.getBoundingClientRect = () =>
+    rect(0, Math.min(floatingHeight, parseFloat(floating.style.maxHeight) || Infinity));
+  define(scroller, {
+    offsetTop: 0,
+    offsetParent: floating,
+    scrollHeight: floatingHeight,
+    clientHeight: floatingHeight,
+  });
+  define(selected, { offsetTop: selectedOffset, offsetParent: scroller });
+  // Whatever the cap, this list can scroll.
+  floating.style.maxHeight = '';
+  Object.defineProperty(scroller, 'clientHeight', {
+    configurable: true,
+    get: () => Math.min(floatingHeight, parseFloat(floating.style.maxHeight) || floatingHeight),
+  });
+
+  const openRef = { current: true };
+  const selectedItemRef = { current: selected as HTMLElement | null };
+  const onFallback = vi.fn();
+  const requestUpdate = vi.fn();
+  const middleware = alignSelectedItem({ selectedItemRef, openRef, onFallback, requestUpdate });
+
+  const state = {
+    x: 0,
+    y: 0,
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    initialPlacement: 'bottom-start',
+    elements: { reference, floating },
+    rects: {
+      reference: { x: 100, y: referenceY, width: 120, height: 32 },
+      floating: { x: 0, y: 0, width: 100, height: floatingHeight },
+    },
+    middlewareData: {},
+    platform: {},
+  } as unknown as MiddlewareState;
+
+  return { middleware, state, floating, scroller, selected, openRef, selectedItemRef, onFallback, requestUpdate };
+}
+
+function scrollTo(scroller: HTMLElement, top: number) {
+  scroller.scrollTop = top;
+  scroller.dispatchEvent(new Event('scroll'));
+}
+
+describe('alignSelectedItem', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true, writable: true });
+    document.body.innerHTML = '';
+  });
+
+  it('places the popup so the selected option sits over the trigger', async () => {
+    const { middleware, state, floating } = setup({ referenceTop: 300, floatingHeight: 200, selectedOffset: 60 });
+
+    const result = await middleware.fn(state);
+
+    expect(result).toEqual({ x: 100, y: 240, data: { availableHeight: 784 } });
+    expect(floating.style.maxHeight).toBe('784px');
+    expect(floating.style.getPropertyValue('--cl-available-height')).toBe('784px');
+  });
+
+  it('returns coordinates in the floating element space, not the viewport', async () => {
+    // The document is scrolled 1000px: the trigger is at 300 in the viewport, 1300 on the page.
+    const { middleware, state } = setup({
+      referenceTop: 300,
+      floatingHeight: 200,
+      selectedOffset: 60,
+      referenceY: 1300,
+    });
+
+    const result = await middleware.fn(state);
+
+    expect(result).toMatchObject({ x: 100, y: 1240 });
+  });
+
+  it('ignores the scale transform when measuring the selected option', async () => {
+    const { middleware, state, selected } = setup({ referenceTop: 300, floatingHeight: 200, selectedOffset: 60 });
+    selected.getBoundingClientRect = () => rect(62.4, 30.72);
+
+    const result = await middleware.fn(state);
+
+    expect(result).toMatchObject({ y: 240 });
+  });
+
+  it('cuts the list at the top of the viewport and scrolls it so the option stays on the trigger', async () => {
+    const { middleware, state, floating, scroller } = setup({
+      referenceTop: 100,
+      floatingHeight: 600,
+      selectedOffset: 300,
+    });
+
+    const result = await middleware.fn(state);
+
+    expect(result).toEqual({ x: 100, y: 8, data: { availableHeight: 392 } });
+    expect(floating.style.maxHeight).toBe('392px');
+    expect(scroller.scrollTop).toBe(208);
+  });
+
+  it('cuts a list taller than the viewport at both edges from its natural height', async () => {
+    const { middleware, state, floating, scroller } = setup({
+      referenceTop: 300,
+      floatingHeight: 1200,
+      selectedOffset: 500,
+    });
+
+    const result = await middleware.fn(state);
+
+    expect(result).toEqual({ x: 100, y: 8, data: { availableHeight: 784 } });
+    expect(floating.style.maxHeight).toBe('784px');
+    expect(scroller.scrollTop).toBe(208);
+  });
+
+  it('cuts the list at the bottom of the viewport without scrolling it', async () => {
+    const { middleware, state, floating, scroller } = setup({
+      referenceTop: 500,
+      floatingHeight: 600,
+      selectedOffset: 0,
+    });
+
+    const result = await middleware.fn(state);
+
+    expect(result).toEqual({ x: 100, y: 500, data: { availableHeight: 292 } });
+    expect(floating.style.maxHeight).toBe('292px');
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it('falls back to anchored positioning when the aligned popup would be too short', async () => {
+    const { middleware, state, onFallback } = setup({
+      referenceTop: 30,
+      floatingHeight: 600,
+      selectedOffset: 560,
+    });
+
+    // Would be 54px tall, from 8 to 62: not worth aligning.
+    expect(await middleware.fn(state)).toEqual({});
+    expect(onFallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('falls back to anchored positioning when the trigger hugs a viewport edge', async () => {
+    const nearTop = setup({ referenceTop: 10, floatingHeight: 200, selectedOffset: 0 });
+    expect(await nearTop.middleware.fn(nearTop.state)).toEqual({});
+    expect(nearTop.onFallback).toHaveBeenCalledTimes(1);
+
+    const nearBottom = setup({ referenceTop: 760, floatingHeight: 200, selectedOffset: 160 });
+    expect(await nearBottom.middleware.fn(nearBottom.state)).toEqual({});
+    expect(nearBottom.onFallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('grows downward as the user scrolls up toward the rows cut off at the top', async () => {
+    const { middleware, state, floating, scroller, requestUpdate } = setup({
+      referenceTop: 100,
+      floatingHeight: 600,
+      selectedOffset: 300,
+    });
+    await middleware.fn(state);
+    expect(scroller.scrollTop).toBe(208);
+
+    // The rows slide down 50px and the popup's bottom edge follows them into the free space.
+    scrollTo(scroller, 158);
+    expect(floating.style.maxHeight).toBe('442px');
+    expect(scroller.scrollTop).toBe(158);
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 8, data: { availableHeight: 442 } });
+
+    // Scrolled all the way up, the list is back to its natural height.
+    scrollTo(scroller, 0);
+    expect(floating.style.maxHeight).toBe('600px');
+    expect(requestUpdate).not.toHaveBeenCalled();
+  });
+
+  it('grows upward as the user scrolls down toward the rows cut off at the bottom', async () => {
+    const { middleware, state, floating, scroller, requestUpdate } = setup({
+      referenceTop: 500,
+      floatingHeight: 600,
+      selectedOffset: 0,
+    });
+    await middleware.fn(state);
+
+    // The rows slide up 50px by moving the popup, not the list, so the top edge takes the free space.
+    scrollTo(scroller, 50);
+    expect(scroller.scrollTop).toBe(0);
+    expect(floating.style.maxHeight).toBe('342px');
+    expect(requestUpdate).toHaveBeenCalledTimes(1);
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 450, data: { availableHeight: 342 } });
+  });
+
+  it('stops growing at the viewport edge and scrolls the list from there', async () => {
+    const { middleware, state, floating, scroller } = setup({
+      referenceTop: 500,
+      floatingHeight: 1200,
+      selectedOffset: 0,
+    });
+    await middleware.fn(state);
+
+    scrollTo(scroller, 600);
+    expect(floating.style.maxHeight).toBe('784px');
+    expect(scroller.scrollTop).toBe(108);
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 8, data: { availableHeight: 784 } });
+
+    scrollTo(scroller, 200);
+    expect(floating.style.maxHeight).toBe('784px');
+    expect(scroller.scrollTop).toBe(200);
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 8, data: { availableHeight: 784 } });
+  });
+
+  it('stops reacting to list scroll once closed', async () => {
+    const { middleware, state, floating, scroller, openRef } = setup({
+      referenceTop: 500,
+      floatingHeight: 600,
+      selectedOffset: 0,
+    });
+    await middleware.fn(state);
+    openRef.current = false;
+
+    scrollTo(scroller, 50);
+    expect(floating.style.maxHeight).toBe('292px');
+    expect(scroller.scrollTop).toBe(50);
+  });
+
+  it('holds the trigger-relative position for the rest of the open, and through the close', async () => {
+    const { middleware, state, selected, scroller, openRef } = setup({
+      referenceTop: 300,
+      floatingHeight: 200,
+      selectedOffset: 60,
+    });
+    const first = await middleware.fn(state);
+
+    // The user scrolled the list and the page; the popup follows the trigger, nothing else.
+    scroller.scrollTop = 40;
+    state.rects.reference.y = 1300;
+    expect(await middleware.fn(state)).toEqual({ ...first, y: 1240 });
+
+    // Closing moved the selection to another option.
+    openRef.current = false;
+    define(selected, { offsetTop: 180 });
+    expect(await middleware.fn(state)).toEqual({ ...first, y: 1240 });
+    expect(scroller.scrollTop).toBe(40);
+  });
+
+  it('measures again on the next open', async () => {
+    const { middleware, state, selected, openRef } = setup({
+      referenceTop: 300,
+      floatingHeight: 200,
+      selectedOffset: 60,
+    });
+    await middleware.fn(state);
+    openRef.current = false;
+    await middleware.fn(state);
+
+    openRef.current = true;
+    define(selected, { offsetTop: 180 });
+
+    expect(await middleware.fn(state)).toMatchObject({ y: 120 });
+  });
+
+  it('measures again when the popup remounts without a close ever repositioning', async () => {
+    const { middleware, state, floating, selected } = setup({
+      referenceTop: 300,
+      floatingHeight: 200,
+      selectedOffset: 60,
+    });
+    await middleware.fn(state);
+
+    const remounted = document.createElement('div');
+    remounted.getBoundingClientRect = floating.getBoundingClientRect;
+    remounted.appendChild(selected.parentElement ?? selected);
+    define(selected.parentElement ?? selected, { offsetParent: remounted });
+    define(selected, { offsetTop: 180 });
+    state.elements.floating = remounted;
+
+    expect(await middleware.fn(state)).toMatchObject({ y: 120 });
+    expect(remounted.style.maxHeight).toBe('784px');
+  });
+
+  it('measures again when the viewport height changes while open', async () => {
+    const { middleware, state, floating, scroller } = setup({
+      referenceTop: 400,
+      floatingHeight: 600,
+      selectedOffset: 300,
+    });
+    Object.defineProperty(window, 'innerHeight', { value: 2000, configurable: true, writable: true });
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 100, data: { availableHeight: 1984 } });
+
+    Object.defineProperty(window, 'innerHeight', { value: 500, configurable: true, writable: true });
+
+    expect(await middleware.fn(state)).toEqual({ x: 100, y: 100, data: { availableHeight: 392 } });
+    expect(floating.style.maxHeight).toBe('392px');
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it('caps the height but leaves the position alone when nothing is selected', async () => {
+    const { middleware, state, floating, selectedItemRef } = setup({
+      referenceTop: 300,
+      floatingHeight: 200,
+      selectedOffset: 60,
+    });
+    selectedItemRef.current = null;
+
+    const result = await middleware.fn(state);
+
+    expect(result).toEqual({ data: { availableHeight: 784 } });
+    expect(floating.style.maxHeight).toBe('784px');
+  });
+});
diff --git a/packages/headless/src/primitives/select/align-selected-item.ts b/packages/headless/src/primitives/select/align-selected-item.ts
new file mode 100644
index 00000000000..40da6fba647
--- /dev/null
+++ b/packages/headless/src/primitives/select/align-selected-item.ts
@@ -0,0 +1,184 @@
+import type { Middleware } from '@floating-ui/react';
+import type { RefObject } from 'react';
+
+const VIEWPORT_PADDING = 8;
+const MIN_HEIGHT = 100;
+const TRIGGER_EDGE_THRESHOLD = 20;
+
+export interface AlignSelectedItemOptions {
+  selectedItemRef: RefObject<HTMLElement | null>;
+  openRef: RefObject<boolean>;
+  /** Called when the trigger sits where an aligned popup would be unusable; position it like a menu instead. */
+  onFallback: () => void;
+  /** Called when the list scroll has moved the popup and floating-ui must reapply the position. */
+  requestUpdate: () => void;
+}
+
+interface Alignment {
+  dy: number;
+  availableHeight: number;
+  viewportHeight: number;
+  /** Free space between the popup's edges and the viewport padding, consumed as the list scrolls. */
+  freeAbove: number;
+  freeBelow: number;
+}
+
+// Layout offset, immune to the popup's enter/exit scale transform.
+function offsetWithin(child: HTMLElement, ancestor: HTMLElement): number {
+  let top = 0;
+  let el: HTMLElement | null = child;
+  while (el && el !== ancestor) {
+    top += el.offsetTop;
+    el = el.offsetParent instanceof HTMLElement ? el.offsetParent : null;
+  }
+  for (let scroller = child.parentElement; scroller && scroller !== ancestor; scroller = scroller.parentElement) {
+    top -= scroller.scrollTop;
+  }
+  return top;
+}
+
+function findScrollParent(from: HTMLElement, until: HTMLElement): HTMLElement | null {
+  for (let el = from.parentElement; el && el !== until; el = el.parentElement) {
+    if (el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+  }
+  return null;
+}
+
+function setHeight(floating: HTMLElement, height: number | null) {
+  floating.style.maxHeight = height === null ? '' : `${height}px`;
+  floating.style.setProperty('--cl-available-height', height === null ? '' : `${height}px`);
+}
+
+/**
+ * Positions the popup so the selected option sits over the trigger, like a native `<select>`.
+ *
+ * Where the viewport cuts the popup off, the list is shortened and scrolled so the option still
+ * lands on the trigger. Scrolling the list toward the cut-off rows then grows the popup into the
+ * free space on the other side before the list scrolls in place. Measured once per open and then
+ * held relative to the trigger, so page scrolling and the exit transition never move the popup.
+ */
+export function alignSelectedItem({
+  selectedItemRef,
+  openRef,
+  onFallback,
+  requestUpdate,
+}: AlignSelectedItemOptions): Middleware {
+  let held: Alignment | null = null;
+  let measuredThisOpen = false;
+  let measuredFloating: HTMLElement | null = null;
+  let detachScroll: (() => void) | null = null;
+
+  function watchScroll(scroller: HTMLElement, floating: HTMLElement) {
+    detachScroll?.();
+    let lastScrollTop = scroller.scrollTop;
+    const onScroll = () => {
+      const delta = scroller.scrollTop - lastScrollTop;
+      lastScrollTop = scroller.scrollTop;
+      if (!held || !openRef.current || delta === 0) {
+        return;
+      }
+      if (delta < 0 && held.freeBelow > 0) {
+        // Rows slid down; extend the bottom edge so none fall off it.
+        const grow = Math.min(-delta, held.freeBelow);
+        held.freeBelow -= grow;
+        held.availableHeight += grow;
+        setHeight(floating, held.availableHeight);
+      } else if (delta > 0 && held.freeAbove > 0) {
+        // Move the popup up instead of the rows, so the visible rows slide up without any leaving.
+        const grow = Math.min(delta, held.freeAbove);
+        held.freeAbove -= grow;
+        held.availableHeight += grow;
+        held.dy -= grow;
+        setHeight(floating, held.availableHeight);
+        scroller.scrollTop -= grow;
+        lastScrollTop = scroller.scrollTop;
+        requestUpdate();
+      }
+    };
+    scroller.addEventListener('scroll', onScroll);
+    detachScroll = () => scroller.removeEventListener('scroll', onScroll);
+  }
+
+  return {
+    name: 'alignSelectedItem',
+    fn({ rects, elements }) {
+      // A close is not guaranteed to reposition, so a remounted popup also marks a fresh open;
+      // a resized viewport needs the cut and scroll redone.
+      if (
+        !openRef.current ||
+        elements.floating !== measuredFloating ||
+        (held && held.viewportHeight !== window.innerHeight)
+      ) {
+        measuredThisOpen = false;
+      }
+      if (held && (!openRef.current || measuredThisOpen)) {
+        return {
+          x: rects.reference.x,
+          y: rects.reference.y + held.dy,
+          data: { availableHeight: held.availableHeight },
+        };
+      }
+
+      const floating = elements.floating;
+      const viewportHeight = window.innerHeight;
+      const viewportTop = VIEWPORT_PADDING;
+      const viewportBottom = viewportHeight - VIEWPORT_PADDING;
+      const maxHeight = viewportBottom - viewportTop;
+      detachScroll?.();
+      detachScroll = null;
+
+      const selected = selectedItemRef.current;
+      if (!selected || !openRef.current) {
+        held = null;
+        setHeight(floating, maxHeight);
+        return { data: { availableHeight: maxHeight } };
+      }
+
+      // Measured uncapped: the cut below needs the list's natural height, not a previous cap.
+      setHeight(floating, null);
+      const referenceRect = elements.reference.getBoundingClientRect();
+      const floatingHeight = floating.getBoundingClientRect().height;
+      setHeight(floating, maxHeight);
+      const desiredTop = referenceRect.top - offsetWithin(selected, floating);
+      const desiredBottom = desiredTop + floatingHeight;
+      const top = Math.max(desiredTop, viewportTop);
+      const bottom = Math.min(desiredBottom, viewportBottom);
+
+      const triggerNearEdge =
+        referenceRect.top < TRIGGER_EDGE_THRESHOLD || referenceRect.bottom > viewportHeight - TRIGGER_EDGE_THRESHOLD;
+      if (triggerNearEdge || bottom - top < Math.min(floatingHeight, MIN_HEIGHT)) {
+        held = null;
+        onFallback();
+        return {};
+      }
+
+      const cut = bottom - top < floatingHeight;
+      const availableHeight = cut ? bottom - top : maxHeight;
+      if (cut) {
+        setHeight(floating, availableHeight);
+      }
+      const scroller = findScrollParent(selected, floating);
+      const scrollBy = top - desiredTop;
+      if (scroller && scrollBy !== 0) {
+        scroller.scrollTop = Math.max(0, scroller.scrollTop + scrollBy);
+      }
+      if (scroller) {
+        watchScroll(scroller, floating);
+      }
+
+      // `rects` live in the floating element's coordinate space; DOM rects are viewport-relative.
+      held = {
+        dy: top - referenceRect.top,
+        availableHeight,
+        viewportHeight,
+        freeAbove: top - viewportTop,
+        freeBelow: viewportBottom - bottom,
+      };
+      measuredThisOpen = true;
+      measuredFloating = floating;
+      return { x: rects.reference.x, y: rects.reference.y + held.dy, data: { availableHeight } };
+    },
+  };
+}
diff --git a/packages/headless/src/primitives/select/select-context.ts b/packages/headless/src/primitives/select/select-context.ts
index 7d56f607041..3ef3652d068 100644
--- a/packages/headless/src/primitives/select/select-context.ts
+++ b/packages/headless/src/primitives/select/select-context.ts
@@ -38,6 +38,9 @@ export interface SelectContextValue {
   returnFocusRef: React.MutableRefObject<HTMLElement | null>;
   valueToLabelRef: React.MutableRefObject<Map<string, string>>;
   selectedItemRef: React.MutableRefObject<HTMLElement | null>;
+  /** The pointer type of the last press on the trigger, or `'keyboard'`; read when the popup opens. */
+  openMethodRef: React.MutableRefObject<string | null>;
+  /** Whether the popup is currently overlaying the selected option on the trigger. */
   alignItemWithTrigger: boolean;
   handleSelect: (value: string, index: number) => void;
   mounted: boolean;
diff --git a/packages/headless/src/primitives/select/select-popup.tsx b/packages/headless/src/primitives/select/select-popup.tsx
index f9d1d8016ea..0b5781ef654 100644
--- a/packages/headless/src/primitives/select/select-popup.tsx
+++ b/packages/headless/src/primitives/select/select-popup.tsx
@@ -2,17 +2,20 @@
 
 import React from 'react';
 
-import { type ComponentProps, mergeProps, useRender } from '../../utils';
+import { type ComponentProps, Freeze, mergeProps, useRender } from '../../utils';
 import { useSelectContext } from './select-context';
 
 export type SelectPopupProps = ComponentProps<'div'>;
 
 export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(props, ref) {
-  const { render, ...otherProps } = props;
-  const { popupRef, transitionProps } = useSelectContext();
+  const { render, children, ...otherProps } = props;
+  const { open, popupRef, transitionProps } = useSelectContext();
 
   const defaultProps = {
     ...transitionProps,
+    // Picking an option changes the value and closes in the same tick, so without this the
+    // selection would jump to the new row under the exit animation.
+    children: <Freeze frozen={!open}>{children}</Freeze>,
   };
 
   return useRender({
diff --git a/packages/headless/src/primitives/select/select-positioner.tsx b/packages/headless/src/primitives/select/select-positioner.tsx
index 32515127cb2..fec829e8135 100644
--- a/packages/headless/src/primitives/select/select-positioner.tsx
+++ b/packages/headless/src/primitives/select/select-positioner.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { FloatingFocusManager, FloatingList } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingList, FloatingOverlay } from '@floating-ui/react';
 import React from 'react';
 
 import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
@@ -22,9 +22,10 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
       labelsRef,
       returnFocusRef,
       setActiveIndex,
+      alignItemWithTrigger,
     } = useSelectContext();
 
-    const side = placement.split('-')[0];
+    const side = alignItemWithTrigger ? 'none' : placement.split('-')[0];
 
     const floatingProps = getFloatingProps({
       onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
@@ -81,18 +82,22 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
     }
 
     return (
-      <FloatingFocusManager
-        context={floatingContext}
-        modal={false}
-        returnFocus={returnFocusRef}
-      >
-        <FloatingList
-          elementsRef={elementsRef}
-          labelsRef={labelsRef}
+      <>
+        {/* An overlay on the trigger only works while the page holds still beneath it. */}
+        {alignItemWithTrigger && <FloatingOverlay lockScroll />}
+        <FloatingFocusManager
+          context={floatingContext}
+          modal={false}
+          returnFocus={returnFocusRef}
         >
-          {element}
-        </FloatingList>
-      </FloatingFocusManager>
+          <FloatingList
+            elementsRef={elementsRef}
+            labelsRef={labelsRef}
+          >
+            {element}
+          </FloatingList>
+        </FloatingFocusManager>
+      </>
     );
   },
 );
diff --git a/packages/headless/src/primitives/select/select-root.tsx b/packages/headless/src/primitives/select/select-root.tsx
index 427f1a6f32e..9d2212e372c 100644
--- a/packages/headless/src/primitives/select/select-root.tsx
+++ b/packages/headless/src/primitives/select/select-root.tsx
@@ -6,7 +6,6 @@ import {
   flip,
   FloatingNode,
   FloatingTree,
-  type Middleware,
   offset,
   type Placement,
   shift,
@@ -21,12 +20,13 @@ import {
   useRole,
   useTypeahead,
 } from '@floating-ui/react';
-import { type ReactNode, type RefObject, useCallback, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useControllableState } from '../../hooks/use-controllable-state';
 import { useReturnFocus } from '../../hooks/use-return-focus';
 import { useTransition } from '../../hooks/use-transition';
 import { cssVars } from '../../utils/css-vars';
+import { alignSelectedItem } from './align-selected-item';
 import { SelectContext, type SelectContextValue, type SelectItem } from './select-context';
 
 export type { SelectItem } from './select-context';
@@ -42,7 +42,9 @@ export interface SelectProps {
   onOpenChange?: (open: boolean) => void;
   /**
    * When true, the popup is positioned so the selected item overlays the
-   * trigger — like a native `<select>`. Defaults to `true`.
+   * trigger — like a native `<select>`. Defaults to `true`. Falls back to
+   * menu-like placement below the trigger when opened by touch, or when the
+   * trigger sits too close to a viewport edge for the overlay to be usable.
    */
   alignItemWithTrigger?: boolean;
   placement?: Placement;
@@ -50,33 +52,6 @@ export interface SelectProps {
   children: ReactNode;
 }
 
-function alignSelectedItem(selectedItemRef: RefObject<HTMLElement | null>): Middleware {
-  return {
-    name: 'alignSelectedItem',
-    fn({ elements }) {
-      const selectedEl = selectedItemRef.current;
-      if (!selectedEl) {
-        return {};
-      }
-
-      const floatingRect = elements.floating.getBoundingClientRect();
-      const selectedRect = selectedEl.getBoundingClientRect();
-      const referenceRect = (elements.reference as HTMLElement).getBoundingClientRect();
-
-      const itemOffsetInPopup = selectedRect.top - floatingRect.top;
-      const desiredTop = referenceRect.top - itemOffsetInPopup;
-
-      const viewportHeight = window.innerHeight;
-      const clampedTop = Math.max(8, Math.min(desiredTop, viewportHeight - floatingRect.height - 8));
-
-      return {
-        x: referenceRect.left,
-        y: clampedTop,
-      };
-    },
-  };
-}
-
 function SelectInner(props: SelectProps) {
   const {
     items,
@@ -106,34 +81,67 @@ function SelectInner(props: SelectProps) {
   const popupRef = useRef<HTMLDivElement | null>(null);
   const valueToLabelRef = useRef<Map<string, string>>(new Map());
   const selectedItemRef = useRef<HTMLElement | null>(null);
+  const openRef = useRef(open);
+  openRef.current = open;
+  const openMethodRef = useRef<string | null>(null);
+  const updateRef = useRef<() => void>(() => {});
+  const [touchOpen, setTouchOpen] = useState(false);
+  const [fallback, setFallback] = useState(false);
+  const alignActive = alignProp && !touchOpen && !fallback;
+  // Memoized so its held position survives re-renders during the exit transition.
+  const align = useMemo(
+    () =>
+      alignSelectedItem({
+        selectedItemRef,
+        openRef,
+        onFallback: () => setFallback(true),
+        requestUpdate: () => updateRef.current(),
+      }),
+    [],
+  );
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        setTouchOpen(openMethodRef.current === 'touch');
+      }
+      setOpen(next);
+    },
+    [setOpen],
+  );
 
   const {
     refs,
     floatingStyles,
     context: floatingContext,
     placement,
+    update,
   } = useFloating({
     nodeId,
     open,
-    onOpenChange: setOpen,
+    onOpenChange: handleOpenChange,
     placement: placementProp,
-    middleware: [
-      offset(alignProp ? 0 : sideOffset),
-      ...(!alignProp ? [flip(), shift({ padding: 5 })] : []),
-      size({
-        apply({ availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            maxHeight: `${availableHeight}px`,
-          });
-        },
-      }),
-      ...(!alignProp ? [arrow({ element: arrowRef })] : []),
-      ...(alignProp ? [alignSelectedItem(selectedItemRef)] : []),
-      cssVars({ sideOffset }),
-    ],
+    middleware: alignActive
+      ? [offset(0), align, cssVars({ sideOffset })]
+      : [
+          offset(sideOffset),
+          flip(),
+          shift({ padding: 5 }),
+          size({
+            apply({ availableHeight, elements }) {
+              Object.assign(elements.floating.style, {
+                maxHeight: `${availableHeight}px`,
+              });
+            },
+          }),
+          arrow({ element: arrowRef }),
+          cssVars({ sideOffset }),
+        ],
     whileElementsMounted: autoUpdate,
   });
 
+  updateRef.current = update;
+
   const returnFocusRef = useReturnFocus(floatingContext);
 
   const { mounted, transitionProps } = useTransition({
@@ -141,6 +149,13 @@ function SelectInner(props: SelectProps) {
     ref: popupRef,
   });
 
+  // Reset only once the popup is gone, or the exit transition would reposition.
+  useEffect(() => {
+    if (!mounted) {
+      setFallback(false);
+    }
+  }, [mounted]);
+
   const isControlled = props.value !== undefined;
 
   const handleSelect = useCallback(
@@ -154,9 +169,9 @@ function SelectInner(props: SelectProps) {
       if (!isControlled) {
         setSelectedLabel(valueToLabelRef.current.get(value) ?? value);
       }
-      setOpen(false);
+      handleOpenChange(false);
     },
-    [isControlled, setSelectedValue, setOpen],
+    [isControlled, setSelectedValue, handleOpenChange],
   );
 
   const handleTypeaheadMatch = useCallback(
@@ -219,7 +234,8 @@ function SelectInner(props: SelectProps) {
       returnFocusRef,
       valueToLabelRef,
       selectedItemRef,
-      alignItemWithTrigger: alignProp,
+      openMethodRef,
+      alignItemWithTrigger: alignActive,
       handleSelect,
       mounted,
       transitionProps,
@@ -241,7 +257,7 @@ function SelectInner(props: SelectProps) {
       selectedValue,
       selectedLabel,
       returnFocusRef,
-      alignProp,
+      alignActive,
       handleSelect,
       mounted,
       transitionProps,
diff --git a/packages/headless/src/primitives/select/select-trigger.tsx b/packages/headless/src/primitives/select/select-trigger.tsx
index f73b599211d..a7192ffed25 100644
--- a/packages/headless/src/primitives/select/select-trigger.tsx
+++ b/packages/headless/src/primitives/select/select-trigger.tsx
@@ -10,7 +10,7 @@ export type SelectTriggerProps = ComponentProps<'button'>;
 export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
   function SelectTrigger(props, ref) {
     const { render, ...otherProps } = props;
-    const { open, refs, getReferenceProps } = useSelectContext();
+    const { open, refs, getReferenceProps, openMethodRef } = useSelectContext();
 
     const state = { open };
 
@@ -18,7 +18,17 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       type: 'button',
     } satisfies DefaultProps<'button'>;
 
-    const defaultProps = { ...ownProps, ...getReferenceProps() };
+    const defaultProps = {
+      ...ownProps,
+      ...getReferenceProps({
+        onPointerDown(event: React.PointerEvent<HTMLButtonElement>) {
+          openMethodRef.current = event.pointerType;
+        },
+        onKeyDown() {
+          openMethodRef.current = 'keyboard';
+        },
+      }),
+    };
 
     return useRender({
       defaultTagName: 'button',
diff --git a/packages/headless/src/primitives/select/select.test.tsx b/packages/headless/src/primitives/select/select.test.tsx
index fd08306caf4..19b4cf5550e 100644
--- a/packages/headless/src/primitives/select/select.test.tsx
+++ b/packages/headless/src/primitives/select/select.test.tsx
@@ -555,6 +555,24 @@ describe('Select', () => {
       const positioner = document.querySelector('[data-testid="select-positioner"]');
       expect(positioner).toHaveAttribute('data-side');
     });
+
+    it('holds the options at their last frame while the popup exits', async () => {
+      const user = userEvent.setup();
+      renderSelect({ defaultValue: 'apple' });
+
+      await user.click(screen.getByRole('combobox'));
+      const popup = screen.getByTestId('select-popup');
+      Object.defineProperty(popup, 'getAnimations', {
+        value: () => [{ finished: new Promise<void>(() => {}) }],
+      });
+
+      await user.click(screen.getByRole('option', { name: 'Banana' }));
+
+      expect(popup).toHaveAttribute('data-closed', '');
+      expect(screen.getByTestId('select-value')).toHaveTextContent('Banana');
+      expect(screen.getByRole('option', { name: 'Apple', hidden: true })).toHaveAttribute('data-selected', '');
+      expect(screen.getByRole('option', { name: 'Banana', hidden: true })).not.toHaveAttribute('data-selected');
+    });
   });
 
   describe('controlled open', () => {
@@ -722,6 +740,45 @@ describe('Select', () => {
     });
   });
 
+  describe('alignItemWithTrigger', () => {
+    it('marks the positioner with data-side="none" and blocks page scrolling while open', async () => {
+      const user = userEvent.setup();
+      renderSelect({ alignItemWithTrigger: true });
+
+      await user.click(screen.getByRole('combobox'));
+
+      expect(screen.getByTestId('select-positioner')).toHaveAttribute('data-side', 'none');
+      expect(document.body).toHaveStyle({ overflow: 'hidden' });
+
+      await user.keyboard('{Escape}');
+      await waitFor(() => expect(screen.queryByTestId('select-positioner')).not.toBeInTheDocument());
+      expect(document.body).not.toHaveStyle({ overflow: 'hidden' });
+    });
+
+    it('positions like a menu when opened by touch', async () => {
+      const user = userEvent.setup();
+      renderSelect({ alignItemWithTrigger: true });
+      const trigger = screen.getByRole('combobox');
+
+      await user.pointer({ keys: '[TouchA]', target: trigger });
+
+      expect(screen.getByTestId('select-positioner')).toHaveAttribute('data-side', 'bottom');
+      expect(document.body).not.toHaveStyle({ overflow: 'hidden' });
+    });
+
+    it('positions like a menu when the trigger hugs the viewport edge', async () => {
+      const user = userEvent.setup();
+      renderSelect({ alignItemWithTrigger: true, defaultValue: 'banana' });
+      const trigger = screen.getByRole('combobox');
+      // jsdom lays everything out at 0,0: as close to the top edge as it gets.
+      expect(trigger.getBoundingClientRect().top).toBe(0);
+
+      await user.click(trigger);
+
+      await waitFor(() => expect(screen.getByTestId('select-positioner')).toHaveAttribute('data-side', 'bottom'));
+    });
+  });
+
   describe('accessibility (axe)', () => {
     it('has no violations when closed', async () => {
       const { container } = render(
diff --git a/packages/headless/src/utils/css-vars.test.ts b/packages/headless/src/utils/css-vars.test.ts
index 07ddcf01d45..17e6fb4de92 100644
--- a/packages/headless/src/utils/css-vars.test.ts
+++ b/packages/headless/src/utils/css-vars.test.ts
@@ -324,4 +324,13 @@ describe('cssVars middleware', () => {
       ]);
     });
   });
+
+  it('uses the height an alignment middleware already settled on', async () => {
+    const state = createMockState({ floatingHeight: 150 });
+    state.middlewareData.alignSelectedItem = { availableHeight: 784 };
+
+    await cssVars().fn(state);
+
+    expect(getVars(state).get('--cl-available-height')).toBe('784px');
+  });
 });
diff --git a/packages/headless/src/utils/css-vars.ts b/packages/headless/src/utils/css-vars.ts
index d091f3a61dc..ca70b7c7aaa 100644
--- a/packages/headless/src/utils/css-vars.ts
+++ b/packages/headless/src/utils/css-vars.ts
@@ -30,12 +30,15 @@ export function cssVars(opts?: { sideOffset?: SideOffset }): Middleware {
       const overflow = await detectOverflow(state, { padding: 5 });
       const side = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';
 
+      // A middleware that already capped the popup (select alignment) owns the height.
       const availableHeight =
-        side === 'top'
-          ? rects.floating.height - overflow.top
-          : side === 'bottom'
-            ? rects.floating.height - overflow.bottom
-            : rects.floating.height - Math.max(overflow.top, 0) - Math.max(overflow.bottom, 0);
+        typeof middlewareData.alignSelectedItem?.availableHeight === 'number'
+          ? middlewareData.alignSelectedItem.availableHeight
+          : side === 'top'
+            ? rects.floating.height - overflow.top
+            : side === 'bottom'
+              ? rects.floating.height - overflow.bottom
+              : rects.floating.height - Math.max(overflow.top, 0) - Math.max(overflow.bottom, 0);
 
       const availableWidth =
         side === 'left'
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index 784e648e294..6cdab88f677 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -61,6 +61,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     popover: dynamic(() => import('../stories/popover.component.mdx')),
     profile: dynamic(() => import('../stories/profile.component.mdx')),
     section: dynamic(() => import('../stories/section.mdx')),
+    select: dynamic(() => import('../stories/select.component.mdx')),
     table: dynamic(() => import('../stories/table.mdx')),
     toast: dynamic(() => import('../stories/toast.mdx')),
     text: dynamic(() => import('../stories/text.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index ebe2f7b9fab..fab15559d6f 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -164,6 +164,15 @@ import {
   meta as sectionMeta,
   MultipleEmailAndPhoneNumbers as SectionMultipleEmailAndPhoneNumbers,
 } from '../stories/section.stories';
+import {
+  Controlled as SelectComponentControlled,
+  Default as SelectComponentDefault,
+  Descriptions as SelectComponentDescriptions,
+  Ghost as SelectComponentGhost,
+  meta as selectComponentMeta,
+  Overflowing as SelectComponentOverflowing,
+  Placeholder as SelectComponentPlaceholder,
+} from '../stories/select.component.stories';
 import { meta as selectMeta } from '../stories/select.stories';
 import { meta as tableMeta } from '../stories/table.stories';
 import { meta as tabsMeta } from '../stories/tabs.stories';
@@ -374,6 +383,16 @@ const headingModule: StoryModule = {
 
 const menuComponentModule: StoryModule = { meta: menuComponentMeta, Default: MenuComponentDefault };
 
+const selectComponentModule: StoryModule = {
+  meta: selectComponentMeta,
+  Default: SelectComponentDefault,
+  Descriptions: SelectComponentDescriptions,
+  Ghost: SelectComponentGhost,
+  Placeholder: SelectComponentPlaceholder,
+  Controlled: SelectComponentControlled,
+  Overflowing: SelectComponentOverflowing,
+};
+
 const otpComponentModule: StoryModule = {
   meta: otpComponentMeta,
   Default: OtpComponentDefault,
@@ -600,6 +619,7 @@ export const registry: StoryModule[] = [
   popoverComponentModule,
   profileComponentModule,
   sectionModule,
+  selectComponentModule,
   tableModule,
   textModule,
   toastModule,
diff --git a/packages/swingset/src/stories/field.component.mdx b/packages/swingset/src/stories/field.component.mdx
index 29ee1850bf8..12b54613df0 100644
--- a/packages/swingset/src/stories/field.component.mdx
+++ b/packages/swingset/src/stories/field.component.mdx
@@ -11,7 +11,7 @@ import * as FieldStories from './field.component.stories';
 
 ## Usage
 
-Compose one Mosaic control inside each `Field.Root` to generate its ID, the label's `htmlFor`, and the message relationships. Rendering multiple controls logs a development warning. The caller owns validation and decides when to render an error. Use a separate `Field.Root` for each control; grouped controls should use native `<fieldset>` and `<legend>` semantics until dedicated Mosaic `Fieldset` and `Field.Item` components are available.
+Compose one Mosaic control inside each `Field.Root` to generate its ID, the label relationship, and the message relationships. Rendering multiple controls logs a development warning. The caller owns validation and decides when to render an error. Use a separate `Field.Root` for each control; grouped controls should use native `<fieldset>` and `<legend>` semantics until dedicated Mosaic `Fieldset` and `Field.Item` components are available.
 
 ```tsx
 import { Field } from '@clerk/ui/mosaic/components/field';
@@ -42,14 +42,28 @@ Field does not validate controls or render errors automatically. Its parts may a
 
 Pass `visuallyHidden` to `Field.Label` when the surrounding UI already makes the label redundant. The label is still rendered and still associated with the control, so the control keeps its accessible name — unlike dropping the label and relying on a `placeholder`, which is not an accessible name. It applies the same style as the [VisuallyHidden](/components/visually-hidden) component.
 
+### Controls without a native label
+
+<Story
+  name='WithSelect'
+  storyModule={FieldStories}
+/>
+
+A native `<label>` activates the control it names, which for a `Select` trigger would open the
+listbox on every label click. A control that cannot be natively labelled registers as such, and
+`Field.Label` then renders a `span` instead: clicking it focuses the control, and the control is named
+through `aria-labelledby` rather than `htmlFor`. Description and error relationships are unchanged.
+Explicit `htmlFor` still renders a native `label`. `Select.Trigger` opts in; `Input` and `OTP` keep
+the native label.
+
 ## Parts
 
-| Part                | Stable slot class       | Description                                       |
-| ------------------- | ----------------------- | ------------------------------------------------- |
-| `Field.Root`        | `.cl-field-root`        | Unstyled `div` and field context provider.        |
-| `Field.Label`       | `.cl-field-label`       | Native `label` associated with the field control. |
-| `Field.Description` | `.cl-field-description` | Supporting `p` associated with the field control. |
-| `Field.Error`       | `.cl-field-error`       | Associated error `p` with an alert icon.          |
+| Part                | Stable slot class       | Description                                                                                                                                          |
+| ------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Field.Root`        | `.cl-field-root`        | Unstyled `div` and field context provider.                                                                                                           |
+| `Field.Label`       | `.cl-field-label`       | Native `label` associated with the field control; a `span` that focuses the control when it cannot be natively labelled, such as a `Select` trigger. |
+| `Field.Description` | `.cl-field-description` | Supporting `p` associated with the field control.                                                                                                    |
+| `Field.Error`       | `.cl-field-error`       | Associated error `p` with an alert icon.                                                                                                             |
 
 ## Styling
 
diff --git a/packages/swingset/src/stories/field.component.stories.tsx b/packages/swingset/src/stories/field.component.stories.tsx
index f1e3f7a798d..b063cdb02ef 100644
--- a/packages/swingset/src/stories/field.component.stories.tsx
+++ b/packages/swingset/src/stories/field.component.stories.tsx
@@ -1,5 +1,6 @@
 import { Field } from '@clerk/ui/mosaic/components/field';
 import { Input } from '@clerk/ui/mosaic/components/input';
+import { Select } from '@clerk/ui/mosaic/components/select';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -46,3 +47,24 @@ export function VisuallyHiddenLabel() {
     </Field.Root>
   );
 }
+
+const roles = [
+  { value: 'member', label: 'Member' },
+  { value: 'admin', label: 'Admin' },
+];
+
+export function WithSelect() {
+  return (
+    <Field.Root style={stackStyles}>
+      <Field.Label>Role</Field.Label>
+      <Select.Root
+        items={roles}
+        defaultValue='member'
+      >
+        <Select.Trigger />
+        <Select.Popup />
+      </Select.Root>
+      <Field.Description>Applies to new members of the organization.</Field.Description>
+    </Field.Root>
+  );
+}
diff --git a/packages/swingset/src/stories/select.component.mdx b/packages/swingset/src/stories/select.component.mdx
new file mode 100644
index 00000000000..81c05fe926f
--- /dev/null
+++ b/packages/swingset/src/stories/select.component.mdx
@@ -0,0 +1,212 @@
+import * as SelectStories from './select.component.stories';
+
+# Select
+
+## Example
+
+Click the trigger, then use the arrow keys or type to move between options. The selected option
+opens directly over the trigger, the way a native `<select>` does.
+
+<Story
+  name='Default'
+  storyModule={SelectStories}
+/>
+
+## Usage
+
+```tsx
+import { Select } from '@clerk/ui/mosaic/components/select';
+
+const roles = [
+  { value: 'all', label: 'All roles' },
+  { value: 'admin', label: 'Admin' },
+  { value: 'member', label: 'Member' },
+];
+
+<Select.Root
+  items={roles}
+  defaultValue='all'
+>
+  <Select.Trigger />
+  <Select.Popup />
+</Select.Root>;
+```
+
+`items` is required. The options only exist while the listbox is open, so the items are what let
+the closed trigger show the selected label. `Select.Popup` renders one `Select.Option` per item
+when it is given no children, and it renders the portal and the floating positioner itself, so in
+the common case there is nothing else to write.
+
+### Trigger
+
+`Select.Trigger` renders a neutral `md` `Button` that shows the selected label and a chevron. The
+`outline` variant (the default) is the bordered form control; `ghost` drops the border for a select
+that sits inside a dense surface such as a table row. Pass `placeholder` for the text shown until
+something is chosen, or `render` to supply your own element — it receives the computed props (ARIA
+attributes, click and keyboard handlers) to spread.
+
+```tsx
+<Select.Trigger variant='ghost' />
+
+<Select.Trigger placeholder='Choose a role' />
+```
+
+<Story
+  name='Ghost'
+  storyModule={SelectStories}
+/>
+
+<Story
+  name='Placeholder'
+  storyModule={SelectStories}
+/>
+
+### Alignment
+
+By default the popup opens with the selected option sitting exactly over the trigger. The option
+row is built to the trigger's measurements — the same height, the same text inset, the same type —
+so the label does not appear to move when the list opens.
+
+That only holds while every row is the height of the trigger. An item with a `description` renders
+a second line, so a list with descriptions hangs below the trigger instead: pass
+`alignItemWithTrigger={false}`.
+
+The overlay also gives way on its own where it would not work: a touch opening, or a trigger within
+20px of the top or bottom of the viewport, places the list below the trigger like a menu.
+
+```tsx
+const roles = [
+  { value: 'member', label: 'Member', description: 'Role with non-privileged permissions.' },
+  { value: 'admin', label: 'Admin', description: 'Role with elevated permissions.' },
+];
+
+<Select.Root
+  items={roles}
+  defaultValue='member'
+  alignItemWithTrigger={false}
+>
+  <Select.Trigger />
+  <Select.Popup />
+</Select.Root>;
+```
+
+<Story
+  name='Descriptions'
+  storyModule={SelectStories}
+/>
+
+### Options
+
+Every row reserves space for the check, so the labels stay put when the selection moves. A
+`disabled` item can still be reached with the keyboard but cannot be selected. The description is
+read to assistive technology as the option's description, not as part of its name.
+
+To compose the rows yourself, give `Select.Popup` children: one `Select.Option` per item, taking the
+same `value`, `label`, `description`, and `disabled`.
+
+```tsx
+<Select.Popup>
+  {roles.map(role => (
+    <Select.Option
+      key={role.value}
+      {...role}
+    />
+  ))}
+</Select.Popup>
+```
+
+### Field
+
+Inside a `Field.Root` the trigger takes the field's id, `disabled`, `required` (as `aria-required`),
+`invalid`, and the label and message relationships. A combobox is not named by its content, so the
+trigger's `aria-labelledby` always points at its value, after any field label or `aria-label`: the
+accessible name reads "Role, Member". `Field.Label` renders as a span for a select, because a native
+`<label>` would open the listbox on click; clicking it focuses the trigger instead.
+
+```tsx
+<Field.Root>
+  <Field.Label>Role</Field.Label>
+  <Select.Root
+    items={roles}
+    defaultValue='member'
+  >
+    <Select.Trigger />
+    <Select.Popup />
+  </Select.Root>
+  <Field.Description>Applies to new members.</Field.Description>
+</Field.Root>
+```
+
+<Story
+  name='WithField'
+  storyModule={SelectStories}
+/>
+
+### Controlled
+
+```tsx
+const [value, setValue] = useState('member');
+
+<Select.Root
+  items={roles}
+  value={value}
+  onValueChange={setValue}
+>
+  <Select.Trigger />
+  <Select.Popup />
+</Select.Root>;
+```
+
+<Story
+  name='Controlled'
+  storyModule={SelectStories}
+/>
+
+### Scrolling
+
+A list with more options than fit is cut at the viewport edge and scrolled so the selected row still
+lands on the trigger. Scrolling toward the hidden rows first grows the popup into whatever space is
+free on the other side, then scrolls the list in place. The page is scroll-locked underneath. The rows scroll
+with the shared ScrollArea treatment. Nothing to opt into — `Select.Popup` composes it.
+
+<Story
+  name='Overflowing'
+  storyModule={SelectStories}
+/>
+
+## Parts
+
+| Part             | Slot                                 | Description                                                                         |
+| ---------------- | ------------------------------------ | ----------------------------------------------------------------------------------- |
+| `Select.Root`    | —                                    | State provider; owns the value, the items, open/close, and keyboard nav.            |
+| `Select.Trigger` | `select-trigger`                     | Opens the listbox. Defaults to a neutral `md` `Button`; `variant` picks the chrome. |
+| ↳ value          | `select-value`                       | The selected label, or the placeholder.                                             |
+| ↳ icon           | `select-trigger-icon`                | The trailing chevron.                                                               |
+| `Select.Popup`   | `select-positioner` / `select-popup` | Portals, positions, and renders the listbox surface.                                |
+| ↳ viewport       | `select-viewport`                    | The scrolling box inside the popup. Carries the ScrollArea fade and scrollbar.      |
+| `Select.Option`  | `select-option`                      | A single choice. `data-selected`, `data-active`, `data-disabled`, `data-described`. |
+| ↳ content        | `select-option-content`              | Stacks the label over the description.                                              |
+| ↳ label          | `select-option-label`                | The option's text. Truncates to one line.                                           |
+| ↳ description    | `select-option-description`          | The optional second line.                                                           |
+| ↳ indicator      | `select-option-indicator`            | The check. Present on every row, visible on the selected one.                       |
+
+## Styling
+
+The Mosaic select is themed with **StyleX**. Each styled part carries a stable `.cl-<slot>` class
+(the slots above) alongside the StyleX atoms. Consumers never target the hashed atomic classes —
+override by targeting the `.cl-*` slot from a CSS layer that wins over `@clerk/ui/styles.css`:
+
+```css
+@import '@clerk/ui/styles.css' layer(components);
+
+@layer overrides {
+  .cl-select-popup {
+    border-radius: 20px;
+  }
+}
+```
+
+The popup's enter/exit transition is driven off its own `data-starting-style` /`data-ending-style`
+attributes and is disabled under `prefers-reduced-motion: reduce`. Option hover state is gated
+behind `@media (hover: hover)`, and the keyboard-active option is styled off `data-active`, so
+pointer and keyboard highlighting stay in sync.
diff --git a/packages/swingset/src/stories/select.component.stories.tsx b/packages/swingset/src/stories/select.component.stories.tsx
new file mode 100644
index 00000000000..22de0858ef7
--- /dev/null
+++ b/packages/swingset/src/stories/select.component.stories.tsx
@@ -0,0 +1,179 @@
+import { Field } from '@clerk/ui/mosaic/components/field';
+import { Select } from '@clerk/ui/mosaic/components/select';
+import { Text } from '@clerk/ui/mosaic/components/text';
+import { useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+// Exposes this file's own source (via the `?raw` webpack rule) so each `<Story>` example
+// renders a code footer with its function's source. See `StoryModule.__source`.
+export { default as __source } from './select.component.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Components',
+  status: 'stable',
+  title: 'Select',
+  source: 'packages/ui/src/mosaic/components/select/select.tsx',
+};
+
+const roleFilters = [
+  { value: 'all', label: 'All roles' },
+  { value: 'admin', label: 'Admin' },
+  { value: 'member', label: 'Member' },
+];
+
+/** The selected option opens over the trigger, like a native `<select>`. */
+export function Default() {
+  return (
+    <Select.Root
+      items={roleFilters}
+      defaultValue='all'
+    >
+      <Select.Trigger />
+      <Select.Popup />
+    </Select.Root>
+  );
+}
+
+const roles = [
+  { value: 'member', label: 'Member', description: 'Role with non-privileged permissions in the organization.' },
+  { value: 'admin', label: 'Admin', description: 'Role with elevated permissions in the organization.' },
+];
+
+/**
+ * Rows with a description are taller than the trigger, so nothing in them could line up with it:
+ * the list hangs below the trigger instead, with `alignItemWithTrigger={false}`.
+ */
+export function Descriptions() {
+  return (
+    <Field.Root style={{ display: 'grid', gap: 8, maxWidth: 384 }}>
+      <Field.Label>Role</Field.Label>
+      <Select.Root
+        items={roles}
+        defaultValue='member'
+        alignItemWithTrigger={false}
+      >
+        <Select.Trigger />
+        <Select.Popup />
+      </Select.Root>
+    </Field.Root>
+  );
+}
+
+const members = [
+  { name: 'Preston Booth', email: 'preston@clerk.dev', role: 'member' },
+  { name: 'Colin Sidoti', email: 'colin@clerk.dev', role: 'admin' },
+];
+
+/** The `ghost` trigger drops the border for a select that sits inside a table row. */
+export function Ghost() {
+  return (
+    <div style={{ display: 'grid', maxWidth: 480 }}>
+      {members.map(member => (
+        <div
+          key={member.email}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            alignItems: 'center',
+            gap: 16,
+            paddingBlock: 8,
+            borderBlockEnd: '1px solid var(--cl-color-border-faded)',
+          }}
+        >
+          <div style={{ display: 'grid' }}>
+            <Text>{member.name}</Text>
+            <Text
+              size='sm'
+              color='neutral'
+            >
+              {member.email}
+            </Text>
+          </div>
+          <Select.Root
+            items={roles}
+            defaultValue={member.role}
+          >
+            <Select.Trigger variant='ghost' />
+            <Select.Popup />
+          </Select.Root>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A `placeholder` fills the trigger until something is chosen. */
+export function Placeholder() {
+  return (
+    <Select.Root items={roleFilters}>
+      <Select.Trigger placeholder='Choose a role' />
+      <Select.Popup />
+    </Select.Root>
+  );
+}
+
+/**
+ * Inside a `Field` the trigger takes the field's id, state, and label and message relationships.
+ * The label renders as a span that focuses the trigger, since a `<label>` would open it.
+ */
+export function WithField() {
+  return (
+    <Field.Root
+      required
+      invalid
+      style={{ display: 'grid', gap: 8, maxWidth: 384 }}
+    >
+      <Field.Label>Role</Field.Label>
+      <Select.Root
+        items={roleFilters}
+        defaultValue='member'
+      >
+        <Select.Trigger />
+        <Select.Popup />
+      </Select.Root>
+      <Field.Description>Applies to new members of the organization.</Field.Description>
+      <Field.Error>Choose a role.</Field.Error>
+    </Field.Root>
+  );
+}
+
+export function Controlled() {
+  const [value, setValue] = useState('member');
+
+  return (
+    <div style={{ display: 'grid', gap: 8, justifyItems: 'start' }}>
+      <Select.Root
+        items={roleFilters}
+        value={value}
+        onValueChange={setValue}
+      >
+        <Select.Trigger />
+        <Select.Popup />
+      </Select.Root>
+      <Text size='sm'>Selected: {value}</Text>
+    </div>
+  );
+}
+
+const timezones = Array.from({ length: 27 }, (_, index) => {
+  const offset = index - 12;
+  const sign = offset < 0 ? '-' : '+';
+  return { value: `utc${sign}${Math.abs(offset)}`, label: `UTC${sign}${String(Math.abs(offset)).padStart(2, '0')}:00` };
+});
+
+/**
+ * More rows than fit. The popup caps at the available height and the rows scroll inside it, with
+ * the selected row still opened over the trigger.
+ */
+export function Overflowing() {
+  return (
+    <Select.Root
+      items={timezones}
+      defaultValue='utc+0'
+    >
+      <Select.Trigger />
+      <Select.Popup />
+    </Select.Root>
+  );
+}
diff --git a/packages/ui/src/mosaic/components/field/field.context.tsx b/packages/ui/src/mosaic/components/field/field.context.tsx
index 1651e2097a8..31b19431227 100644
--- a/packages/ui/src/mosaic/components/field/field.context.tsx
+++ b/packages/ui/src/mosaic/components/field/field.context.tsx
@@ -1,21 +1,30 @@
 import { useSafeLayoutEffect } from '@clerk/shared/react';
 import React from 'react';
 
+/** `label` for natively labelable controls; `span` for a control a `<label>` would activate on click. */
+export type FieldLabelElementType = 'label' | 'span';
+
+interface RegisteredControl {
+  id: string | null;
+  labelElementType: FieldLabelElementType;
+}
+
 interface FieldContextValue {
   controlId: string;
+  labelElementType: FieldLabelElementType;
   disabled: boolean;
   required: boolean;
   invalid: boolean;
   labelIds: string[];
   messageIds: string[];
-  registerControlId: (source: symbol, id: string | null | undefined) => void;
+  registerControlId: (source: symbol, control: RegisteredControl | undefined) => void;
   setLabelIds: React.Dispatch<React.SetStateAction<string[]>>;
   setMessageIds: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 const FieldContext = React.createContext<FieldContextValue | null>(null);
 
-function mergeIds(...values: Array<string | undefined>): string | undefined {
+export function mergeIds(...values: Array<string | undefined>): string | undefined {
   const ids = Array.from(new Set(values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? [])));
   return ids.length > 0 ? ids.join(' ') : undefined;
 }
@@ -30,16 +39,17 @@ export function FieldProvider({ children, disabled, required, invalid }: FieldPr
   const generatedId = React.useId();
   const defaultControlId = `cl-field-${generatedId}`;
   const [controlId, setControlId] = React.useState(defaultControlId);
+  const [labelElementType, setLabelElementType] = React.useState<FieldLabelElementType>('label');
   const [labelIds, setLabelIds] = React.useState<string[]>([]);
   const [messageIds, setMessageIds] = React.useState<string[]>([]);
-  const controlIds = React.useRef(new Map<symbol, string | null>());
+  const controlIds = React.useRef(new Map<symbol, RegisteredControl>());
   const warnedAboutMultipleControls = React.useRef(false);
   const registerControlId = React.useCallback(
-    (source: symbol, id: string | null | undefined) => {
-      if (id === undefined) {
+    (source: symbol, control: RegisteredControl | undefined) => {
+      if (control === undefined) {
         controlIds.current.delete(source);
       } else {
-        controlIds.current.set(source, id);
+        controlIds.current.set(source, control);
       }
 
       if (
@@ -53,13 +63,16 @@ export function FieldProvider({ children, disabled, required, invalid }: FieldPr
         );
       }
 
-      setControlId(controlIds.current.values().next().value ?? defaultControlId);
+      const first = controlIds.current.values().next().value;
+      setControlId(first?.id ?? defaultControlId);
+      setLabelElementType(first?.labelElementType ?? 'label');
     },
     [defaultControlId],
   );
   const context = React.useMemo<FieldContextValue>(
     () => ({
       controlId,
+      labelElementType,
       disabled,
       required,
       invalid,
@@ -69,7 +82,7 @@ export function FieldProvider({ children, disabled, required, invalid }: FieldPr
       setLabelIds,
       setMessageIds,
     }),
-    [controlId, disabled, required, invalid, labelIds, messageIds, registerControlId],
+    [controlId, labelElementType, disabled, required, invalid, labelIds, messageIds, registerControlId],
   );
 
   return <FieldContext.Provider value={context}>{children}</FieldContext.Provider>;
@@ -100,6 +113,7 @@ interface FieldControlProps {
   ariaInvalid?: React.AriaAttributes['aria-invalid'];
   ariaLabelledBy?: string;
   ariaDescribedBy?: string;
+  labelElementType?: FieldLabelElementType;
 }
 
 export function useOptionalFieldControlProps({
@@ -109,6 +123,7 @@ export function useOptionalFieldControlProps({
   ariaInvalid,
   ariaLabelledBy,
   ariaDescribedBy,
+  labelElementType = 'label',
 }: FieldControlProps) {
   const context = useOptionalFieldContext();
   const registerControlId = context?.registerControlId;
@@ -119,9 +134,9 @@ export function useOptionalFieldControlProps({
       return undefined;
     }
 
-    registerControlId(source.current, id ?? null);
+    registerControlId(source.current, { id: id ?? null, labelElementType });
     return () => registerControlId(source.current, undefined);
-  }, [registerControlId, id]);
+  }, [registerControlId, id, labelElementType]);
 
   if (!context) {
     return null;
diff --git a/packages/ui/src/mosaic/components/field/field.test.tsx b/packages/ui/src/mosaic/components/field/field.test.tsx
index f910bd4ecec..38453901cc3 100644
--- a/packages/ui/src/mosaic/components/field/field.test.tsx
+++ b/packages/ui/src/mosaic/components/field/field.test.tsx
@@ -1,10 +1,12 @@
 import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
 
 import { Input } from '../input';
+import { Select } from '../select';
 import { Field } from './field';
 
 describe('Mosaic Field', () => {
@@ -362,6 +364,54 @@ describe('Mosaic Field', () => {
     expect(error?.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
   });
 
+  it('renders a span label that focuses a control which cannot be natively labelled', async () => {
+    const user = userEvent.setup();
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    render(
+      <Field.Root>
+        <Field.Label>Role</Field.Label>
+        <Select.Root
+          items={[{ value: 'admin', label: 'Admin' }]}
+          defaultValue='admin'
+        >
+          <Select.Trigger />
+          <Select.Popup />
+        </Select.Root>
+      </Field.Root>,
+    );
+
+    const label = screen.getByText('Role');
+    const trigger = screen.getByRole('combobox');
+    expect(label.tagName).toBe('SPAN');
+    expect(label).toHaveClass('cl-field-label');
+    expect(label).not.toHaveAttribute('for');
+    expect(label.id).not.toBe('');
+    expect(trigger.id).not.toBe('');
+    expect(trigger.getAttribute('aria-labelledby')).toContain(label.id);
+
+    await user.click(label);
+    expect(trigger).toHaveFocus();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(consoleWarn).not.toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+
+  it('keeps a native label for a select when htmlFor is explicit', () => {
+    render(
+      <Field.Root>
+        <Field.Label htmlFor='elsewhere'>Role</Field.Label>
+        <Select.Root items={[{ value: 'admin', label: 'Admin' }]}>
+          <Select.Trigger />
+          <Select.Popup />
+        </Select.Root>
+      </Field.Root>,
+    );
+
+    const label = screen.getByText('Role');
+    expect(label.tagName).toBe('LABEL');
+    expect(label).toHaveAttribute('for', 'elsewhere');
+  });
+
   it('warns when Field.Label does not render a native label', () => {
     const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
 
diff --git a/packages/ui/src/mosaic/components/field/field.tsx b/packages/ui/src/mosaic/components/field/field.tsx
index 7a870cf75c4..daae13e7777 100644
--- a/packages/ui/src/mosaic/components/field/field.tsx
+++ b/packages/ui/src/mosaic/components/field/field.tsx
@@ -11,7 +11,7 @@ import { Icon } from '../icon';
 import { FieldProvider, useOptionalFieldContext, useRegisterFieldPartId } from './field.context';
 import { styles } from './field.styles';
 
-function useNativeLabelWarning(label: HTMLLabelElement | null) {
+function useNativeLabelWarning(label: HTMLElement | null) {
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && label && label.tagName !== 'LABEL') {
       console.warn('[clerk] <Field.Label> must render a native `<label>` element.');
@@ -57,20 +57,40 @@ export interface FieldLabelProps extends MosaicComponentProps<'label'> {
   visuallyHidden?: boolean;
 }
 
-const Label = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function MosaicFieldLabel(
-  { render, className, style, id: idProp, htmlFor: htmlForProp, visuallyHidden: isVisuallyHidden = false, ...rest },
+// Typed to `HTMLElement`: a select's label renders as a span.
+const Label = React.forwardRef<HTMLElement, FieldLabelProps>(function MosaicFieldLabel(
+  {
+    render,
+    className,
+    style,
+    id: idProp,
+    htmlFor: htmlForProp,
+    visuallyHidden: isVisuallyHidden = false,
+    onClick,
+    ...rest
+  },
   ref,
 ) {
   const context = useOptionalFieldContext();
   const generatedId = React.useId();
   const id = idProp ?? (context ? `cl-field-${generatedId}-label` : undefined);
-  const htmlFor = htmlForProp ?? context?.controlId;
-  const [label, setLabel] = React.useState<HTMLLabelElement | null>(null);
+  // A `<label>` activates the control it names, which would open a select; those get a span
+  // that only focuses it, and are named through `aria-labelledby` instead.
+  const nativeLabel = htmlForProp !== undefined || context?.labelElementType !== 'span';
+  const controlId = context?.controlId;
+  const htmlFor = htmlForProp ?? (nativeLabel ? controlId : undefined);
+  const [label, setLabel] = React.useState<HTMLElement | null>(null);
   useRegisterFieldPartId(htmlForProp === undefined ? id : undefined, context?.setLabelIds);
-  useNativeLabelWarning(label);
+  useNativeLabelWarning(nativeLabel ? label : null);
+  const handleClick = (event: React.MouseEvent<HTMLLabelElement>) => {
+    onClick?.(event);
+    if (!nativeLabel && controlId && !event.defaultPrevented) {
+      document.getElementById(controlId)?.focus();
+    }
+  };
   return useRender({
     defaultTagName: 'label',
-    render,
+    render: render ?? (nativeLabel ? undefined : <span />),
     ref: [ref, setLabel],
     props: {
       ...mergeStyleProps(
@@ -88,6 +108,7 @@ const Label = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function Mosai
       ...rest,
       id,
       htmlFor,
+      onClick: handleClick,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/select/index.ts b/packages/ui/src/mosaic/components/select/index.ts
new file mode 100644
index 00000000000..f763e24dfaa
--- /dev/null
+++ b/packages/ui/src/mosaic/components/select/index.ts
@@ -0,0 +1,9 @@
+export { Select, SelectOption, SelectPopup, SelectRoot, SelectTrigger } from './select';
+export type {
+  SelectItem,
+  SelectOptionProps,
+  SelectPopupProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectTriggerVariant,
+} from './select';
diff --git a/packages/ui/src/mosaic/components/select/select.markers.stylex.ts b/packages/ui/src/mosaic/components/select/select.markers.stylex.ts
new file mode 100644
index 00000000000..b4675b8a71f
--- /dev/null
+++ b/packages/ui/src/mosaic/components/select/select.markers.stylex.ts
@@ -0,0 +1,3 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const selectOptionScope = stylex.defineMarker();
diff --git a/packages/ui/src/mosaic/components/select/select.styles.ts b/packages/ui/src/mosaic/components/select/select.styles.ts
new file mode 100644
index 00000000000..01c26833745
--- /dev/null
+++ b/packages/ui/src/mosaic/components/select/select.styles.ts
@@ -0,0 +1,160 @@
+import * as stylex from '@stylexjs/stylex';
+
+import {
+  colorVars,
+  durationVars,
+  easingVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
+import { selectOptionScope } from './select.markers.stylex';
+
+// With `alignItemWithTrigger` the selected option's box lands over the trigger's, so the two
+// boxes must inset their text identically: the trigger is a `md` Button (32px, 1px border, 12px
+// inline padding, sm text), and the option gets the same 13px from the popup's 1px border, the
+// viewport's 2px padding, and its own 10px padding at the same 32px height.
+
+export const value = stylex.create({
+  base: {
+    flexGrow: 1,
+    textAlign: 'start',
+    minWidth: 0,
+  },
+});
+
+export const positioner = stylex.create({
+  base: {
+    outline: 'none',
+  },
+});
+
+export const popup = stylex.create({
+  base: {
+    // A real border, not a shadow ring, so it occupies the 1px of layout the alignment counts on.
+    borderColor: 'light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))',
+    borderRadius: radiusVars['--cl-radius-lg'],
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    outline: 'none',
+    backgroundColor: colorVars['--cl-color-card'],
+    boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
+                0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent)`,
+    color: colorVars['--cl-color-card-foreground'],
+    opacity: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0,
+    },
+    scale: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0.96,
+      '@media (prefers-reduced-motion: reduce)': {
+        default: 1,
+        ':where([data-starting-style], [data-ending-style])': 1,
+      },
+    },
+    transformOrigin: 'var(--cl-anchor-origin, center)',
+    transitionDuration: {
+      default: `${durationVars['--cl-duration-fast']}, ${durationVars['--cl-duration-base']}`,
+      ':where([data-ending-style])': durationVars['--cl-duration-fast'],
+    },
+    transitionProperty: {
+      default: 'opacity, scale',
+      '@media (prefers-reduced-motion: reduce)': 'opacity',
+    },
+    transitionTimingFunction: {
+      default: `linear, ${easingVars['--cl-ease-default']}`,
+      ':where([data-ending-style])': `linear, ${easingVars['--cl-ease-exit']}`,
+    },
+    maxHeight: 'var(--cl-available-height)',
+    maxWidth: 'min(18rem, calc(100vw - 2rem))',
+    // Never narrower than the trigger, or the trigger's chevron shows from under the overlay.
+    minWidth: 'max(10rem, var(--cl-anchor-width, 0px))',
+  },
+});
+
+export const viewport = stylex.create({
+  base: {
+    padding: space['0.5'],
+    gap: space['0.5'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
+export const option = stylex.create({
+  base: {
+    borderRadius: radiusVars['--cl-radius-md'],
+    borderStyle: 'none',
+    gap: space['2'],
+    outline: 'none',
+    paddingBlock: space['1.5'],
+    paddingInline: '0.625rem',
+    alignItems: 'center',
+    backgroundColor: {
+      default: 'transparent',
+      ':where([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4%, transparent)`,
+      '@media (hover: hover)': {
+        default: null,
+        ':hover': `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4%, transparent)`,
+      },
+    },
+    color: colorVars['--cl-color-card-foreground'],
+    cursor: { default: 'pointer', ':where([data-disabled])': 'not-allowed' },
+    display: 'flex',
+    // The viewport is a height-capped flex column; without this the rows squash instead of scrolling.
+    flexShrink: 0,
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    opacity: { default: 1, ':where([data-disabled])': 0.5 },
+    outlineOffset: 0,
+    position: 'relative',
+    textAlign: 'start',
+    transitionDuration: durationVars['--cl-duration-base'],
+    transitionProperty: 'background-color',
+    transitionTimingFunction: 'linear',
+    minHeight: space['8'],
+    width: '100%',
+    // Extends the hit area over the gaps between rows, as Menu items do.
+    '::before': {
+      insetBlock: `calc(-1 * ${space['0.5']})`,
+      insetInline: `calc(-1 * ${space['0.5']})`,
+      content: '""',
+      position: 'absolute',
+    },
+  },
+  described: {
+    paddingBlock: space['2'],
+  },
+});
+
+export const content = stylex.create({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minWidth: 0,
+  },
+});
+
+export const description = stylex.create({
+  base: {
+    color: colorVars['--cl-color-neutral-faded'],
+    fontWeight: fontWeightVars['--cl-font-normal'],
+  },
+});
+
+// Rendered on every row and shown only on the selected one, so labels never shift with selection.
+export const indicator = stylex.create({
+  base: {
+    color: colorVars['--cl-color-neutral-faded'],
+    visibility: {
+      default: 'hidden',
+      [stylex.when.ancestor('[data-selected]', selectOptionScope)]: 'visible',
+    },
+  },
+});
diff --git a/packages/ui/src/mosaic/components/select/select.test.tsx b/packages/ui/src/mosaic/components/select/select.test.tsx
new file mode 100644
index 00000000000..dc06359bebe
--- /dev/null
+++ b/packages/ui/src/mosaic/components/select/select.test.tsx
@@ -0,0 +1,339 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Field } from '../field';
+import { Select } from './select';
+
+const roles = [
+  { value: 'all', label: 'All roles' },
+  { value: 'admin', label: 'Admin' },
+  { value: 'member', label: 'Member' },
+];
+
+function renderSelect(props?: Partial<React.ComponentProps<typeof Select.Root>>) {
+  return render(
+    <Select.Root
+      items={roles}
+      defaultValue='all'
+      {...props}
+    >
+      <Select.Trigger placeholder='Choose a role' />
+      <Select.Popup />
+    </Select.Root>,
+  );
+}
+
+describe('Mosaic Select', () => {
+  it('renders an outline neutral md Button as the default trigger, showing the selected label', () => {
+    renderSelect();
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveClass('cl-button', 'cl-select-trigger');
+    expect(trigger).toHaveAttribute('data-variant', 'outline');
+    expect(trigger).toHaveAttribute('data-color', 'neutral');
+    expect(trigger).toHaveAttribute('data-size', 'md');
+    expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(trigger.querySelector('.cl-select-value')).toHaveTextContent('All roles');
+    expect(trigger.querySelector('.cl-select-trigger-icon')).toBeInTheDocument();
+  });
+
+  it('shows the placeholder until a value is selected', () => {
+    renderSelect({ defaultValue: undefined });
+    expect(screen.getByRole('combobox').querySelector('.cl-select-value')).toHaveTextContent('Choose a role');
+  });
+
+  it('renders the ghost variant without a border', () => {
+    render(
+      <Select.Root
+        items={[{ value: 'member', label: 'Member' }]}
+        defaultValue='member'
+      >
+        <Select.Trigger variant='ghost' />
+        <Select.Popup>
+          <Select.Option
+            value='member'
+            label='Member'
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveAttribute('data-variant', 'ghost');
+    expect(trigger).toHaveClass('cl-select-trigger');
+  });
+
+  it('renders a consumer trigger passed via render', () => {
+    render(
+      <Select.Root
+        items={[{ value: 'all', label: 'All roles' }]}
+        defaultValue='all'
+      >
+        <Select.Trigger
+          render={props => (
+            <button
+              type='button'
+              {...props}
+            />
+          )}
+        />
+        <Select.Popup>
+          <Select.Option
+            value='all'
+            label='All roles'
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveClass('cl-select-trigger');
+    expect(trigger).not.toHaveClass('cl-button');
+    expect(trigger.querySelector('.cl-select-value')).toHaveTextContent('All roles');
+  });
+
+  it('keeps the listbox closed until the trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderSelect();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('combobox'));
+
+    // `role="listbox"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
+    expect(screen.getByRole('listbox')).toHaveClass('cl-select-positioner');
+    const popup = screen.getByRole('listbox').querySelector('.cl-select-popup');
+    expect(popup).toBeInTheDocument();
+    expect(popup?.querySelector('.cl-select-viewport')).toBeInTheDocument();
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+  });
+
+  it('marks the selected option and reserves the check on every row', async () => {
+    const user = userEvent.setup();
+    renderSelect();
+
+    await user.click(screen.getByRole('combobox'));
+
+    const selected = screen.getByRole('option', { name: 'All roles' });
+    expect(selected).toHaveAttribute('aria-selected', 'true');
+    expect(selected).toHaveAttribute('data-selected', '');
+    expect(selected.querySelector('.cl-select-option-indicator')).toBeInTheDocument();
+
+    const other = screen.getByRole('option', { name: 'Admin' });
+    expect(other).not.toHaveAttribute('data-selected');
+    expect(other.querySelector('.cl-select-option-indicator')).toBeInTheDocument();
+  });
+
+  it('selects an option on click, closes, and updates the trigger', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderSelect({ onValueChange });
+
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByRole('option', { name: 'Admin' }));
+
+    expect(onValueChange).toHaveBeenCalledWith('admin');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.getByRole('combobox').querySelector('.cl-select-value')).toHaveTextContent('Admin');
+  });
+
+  it('renders one option per item when the popup is given no children', () => {
+    render(
+      <Select.Root
+        items={[
+          { value: 'member', label: 'Member', description: 'Non-privileged' },
+          { value: 'admin', label: 'Admin', disabled: true },
+        ]}
+        defaultOpen
+      >
+        <Select.Trigger />
+        <Select.Popup />
+      </Select.Root>,
+    );
+
+    const member = screen.getByRole('option', { name: 'Member' });
+    expect(member).toHaveAttribute('data-described', '');
+    expect(member).toHaveAccessibleDescription('Non-privileged');
+    expect(screen.getByRole('option', { name: 'Admin' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('renders the label and description as separate slots, with the description off the name', () => {
+    render(
+      <Select.Root
+        items={[{ value: 'admin', label: 'Admin' }]}
+        defaultOpen
+      >
+        <Select.Trigger />
+        <Select.Popup>
+          <Select.Option
+            value='admin'
+            label='Admin'
+            description='Can manage members and settings'
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+
+    const option = screen.getByRole('option', { name: 'Admin' });
+    expect(option).toHaveAttribute('data-described', '');
+    expect(option.querySelector('.cl-select-option-label')).toHaveTextContent('Admin');
+    expect(option.querySelector('.cl-select-option-description')).toHaveTextContent('Can manage members and settings');
+  });
+
+  it('marks a disabled option as aria-disabled and does not select it', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select.Root
+        items={[{ value: 'admin', label: 'Admin' }]}
+        defaultOpen
+        onValueChange={onValueChange}
+      >
+        <Select.Trigger />
+        <Select.Popup>
+          <Select.Option
+            value='admin'
+            label='Admin'
+            disabled
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+
+    const option = screen.getByRole('option', { name: 'Admin' });
+    expect(option).toHaveAttribute('aria-disabled', 'true');
+
+    await user.click(option);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('merges consumer className and style onto the popup and options', () => {
+    render(
+      <Select.Root
+        items={[{ value: 'admin', label: 'Admin' }]}
+        defaultOpen
+      >
+        <Select.Trigger />
+        <Select.Popup
+          className='my-popup'
+          style={{ marginTop: '8px' }}
+        >
+          <Select.Option
+            value='admin'
+            label='Admin'
+            className='my-option'
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+
+    const popup = screen.getByRole('listbox').querySelector('.cl-select-popup');
+    expect(popup).toHaveClass('cl-select-popup', 'my-popup');
+    expect(popup).toHaveStyle({ marginTop: '8px' });
+    expect(screen.getByRole('option', { name: 'Admin' })).toHaveClass('cl-select-option', 'my-option');
+  });
+
+  it('forwards the trigger ref', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(
+      <Select.Root items={[{ value: 'admin', label: 'Admin' }]}>
+        <Select.Trigger ref={ref} />
+        <Select.Popup>
+          <Select.Option
+            value='admin'
+            label='Admin'
+          />
+        </Select.Popup>
+      </Select.Root>,
+    );
+    expect(ref.current).toBe(screen.getByRole('combobox'));
+  });
+
+  it('connects the trigger to a surrounding Field', async () => {
+    const user = userEvent.setup();
+    render(
+      <Field.Root
+        required
+        invalid
+      >
+        <Field.Label>Role</Field.Label>
+        <Select.Root
+          items={roles}
+          defaultValue='admin'
+        >
+          <Select.Trigger />
+          <Select.Popup />
+        </Select.Root>
+        <Field.Description>Who can manage members.</Field.Description>
+        <Field.Error>Pick a role.</Field.Error>
+      </Field.Root>,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    const label = screen.getByText('Role');
+    const value = trigger.querySelector('.cl-select-value');
+    const description = screen.getByText('Who can manage members.');
+    const error = screen.getByText('Pick a role.').closest('p');
+    expect(value?.id).not.toBe('');
+    expect(trigger).toHaveAttribute('aria-labelledby', `${label.id} ${value?.id}`);
+    expect(trigger).toHaveAttribute('aria-describedby', `${description.id} ${error?.id}`);
+    expect(trigger).toHaveAttribute('aria-invalid', 'true');
+    expect(trigger).toHaveAttribute('aria-required', 'true');
+    expect(trigger).not.toHaveAttribute('required');
+    expect(trigger).toHaveAccessibleName('Role Admin');
+
+    await user.click(trigger);
+    await user.click(screen.getByRole('option', { name: 'Member' }));
+    expect(trigger).toHaveAccessibleName('Role Member');
+  });
+
+  it('disables the trigger from a disabled Field', () => {
+    render(
+      <Field.Root disabled>
+        <Field.Label>Role</Field.Label>
+        <Select.Root
+          items={roles}
+          defaultValue='admin'
+        >
+          <Select.Trigger />
+          <Select.Popup />
+        </Select.Root>
+      </Field.Root>,
+    );
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('names the trigger by its value outside a Field', () => {
+    renderSelect();
+    const trigger = screen.getByRole('combobox');
+    const value = trigger.querySelector('.cl-select-value');
+    expect(trigger).toHaveAttribute('aria-labelledby', value?.id);
+    expect(trigger).toHaveAccessibleName('All roles');
+  });
+
+  it('keeps a consumer aria-label ahead of the value', () => {
+    render(
+      <Select.Root
+        items={roles}
+        defaultValue='all'
+      >
+        <Select.Trigger aria-label='Filter by role' />
+        <Select.Popup />
+      </Select.Root>,
+    );
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Filter by role All roles');
+  });
+
+  it('does not reference the value id when the trigger renders its own children', () => {
+    render(
+      <Select.Root
+        items={roles}
+        defaultValue='all'
+      >
+        <Select.Trigger aria-label='Filter by role'>Custom</Select.Trigger>
+        <Select.Popup />
+      </Select.Root>,
+    );
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveAttribute('aria-labelledby', trigger.id);
+    expect(trigger).toHaveAccessibleName('Filter by role');
+  });
+});
diff --git a/packages/ui/src/mosaic/components/select/select.tsx b/packages/ui/src/mosaic/components/select/select.tsx
new file mode 100644
index 00000000000..a400855d22b
--- /dev/null
+++ b/packages/ui/src/mosaic/components/select/select.tsx
@@ -0,0 +1,274 @@
+import type {
+  SelectOptionProps as PrimitiveSelectOptionProps,
+  SelectPopupProps as PrimitiveSelectPopupProps,
+  SelectPortalProps,
+  SelectProps as PrimitiveSelectProps,
+} from '@clerk/headless/select';
+import { Select as Primitive } from '@clerk/headless/select';
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import type { MosaicComponentProps } from '../../props';
+import { mergeStyleProps, themeProps } from '../../props';
+import { focusOutline } from '../../utils/focus-outline.styles';
+import { reset } from '../../utils/reset.styles';
+import { truncationStyles } from '../../utils/typography.styles';
+import { Button } from '../button';
+import { mergeIds, useOptionalFieldControlProps } from '../field/field.context';
+import { Icon } from '../icon';
+import { scrollAreaRoot, scrollAreaViewport } from '../scroll-area';
+import { selectOptionScope } from './select.markers.stylex';
+import * as slots from './select.styles';
+
+export interface SelectItem {
+  value: string;
+  /** Shown in the row and in the trigger once selected; also drives typeahead. */
+  label: string;
+  /**
+   * Secondary line under the label. Rows with one are taller than the trigger, so pair it with
+   * `alignItemWithTrigger={false}`.
+   */
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<PrimitiveSelectProps, 'items'> {
+  /**
+   * Every choice. Required, unlike the primitive's: the options only mount while the listbox is
+   * open, so this is what lets the closed trigger show the selected label. `Select.Popup`
+   * renders them as `Select.Option`s when it is given no children.
+   */
+  items: SelectItem[];
+}
+
+const ItemsContext = React.createContext<SelectItem[]>([]);
+
+/** Holds the selection and the items; renders no element of its own. */
+export function SelectRoot({ items, children, ...rest }: SelectProps): React.ReactElement {
+  return (
+    <ItemsContext.Provider value={items}>
+      <Primitive.Root
+        items={items}
+        {...rest}
+      >
+        {children}
+      </Primitive.Root>
+    </ItemsContext.Provider>
+  );
+}
+
+export type SelectTriggerVariant = 'outline' | 'ghost';
+
+export type SelectTriggerProps = MosaicComponentProps<'button'> & {
+  /**
+   * `outline` is the bordered form control; `ghost` drops the border for triggers that sit in
+   * dense surfaces such as table rows.
+   *
+   * @default 'outline'
+   */
+  variant?: SelectTriggerVariant;
+  /** Shown in place of the selected label while nothing is selected. */
+  placeholder?: React.ReactNode;
+};
+
+/**
+ * Opens the listbox and shows the selected option's label. Renders a neutral `md` `Button` by
+ * default; pass `render` to supply your own element. Inside a `Field` it takes the field's id,
+ * disabled, required, invalid, label, and message relationships.
+ */
+export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(function MosaicSelectTrigger(
+  {
+    variant = 'outline',
+    placeholder,
+    render,
+    className,
+    style,
+    children,
+    id: idProp,
+    disabled: disabledProp,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
+    ...rest
+  },
+  ref,
+) {
+  const generatedId = React.useId();
+  const valueId = `${generatedId}-value`;
+  const fieldProps = useOptionalFieldControlProps({
+    id: idProp,
+    disabled: disabledProp,
+    ariaInvalid,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    labelElementType: 'span',
+  });
+  const id = fieldProps?.id ?? idProp ?? generatedId;
+  // A combobox takes no name from its content, so the value is named explicitly, after any label.
+  // An `aria-label` is kept by naming the trigger itself.
+  const labelledBy = fieldProps?.['aria-labelledby'] ?? ariaLabelledBy ?? (ariaLabel ? id : undefined);
+  const trigger: SelectTriggerProps['render'] =
+    render ??
+    (props => (
+      <Button
+        variant={variant}
+        color='neutral'
+        size='md'
+        {...props}
+      />
+    ));
+
+  return (
+    <Primitive.Trigger
+      ref={ref}
+      render={trigger}
+      id={id}
+      disabled={fieldProps?.disabled ?? disabledProp}
+      aria-label={ariaLabel}
+      aria-labelledby={mergeIds(labelledBy, children === undefined ? valueId : undefined)}
+      aria-describedby={fieldProps?.['aria-describedby'] ?? ariaDescribedBy}
+      aria-invalid={fieldProps?.['aria-invalid'] ?? ariaInvalid}
+      aria-required={ariaRequired ?? (fieldProps?.required ? true : undefined)}
+      {...mergeStyleProps(themeProps('select-trigger', { variant }), className, style)}
+      {...rest}
+    >
+      {children ?? (
+        <Primitive.Value
+          id={valueId}
+          placeholder={placeholder}
+          {...mergeStyleProps(
+            themeProps('select-value'),
+            stylex.props(reset.base, truncationStyles.singleLine, slots.value.base),
+          )}
+        />
+      )}
+      <Icon
+        name='chevron-down'
+        size='sm'
+        placement='inline-end'
+        {...themeProps('select-trigger-icon')}
+      />
+    </Primitive.Trigger>
+  );
+});
+
+export interface SelectPopupProps extends PrimitiveSelectPopupProps {
+  /** Container the listbox portals into. Defaults to `document.body`. */
+  portalRoot?: SelectPortalProps['root'];
+}
+
+/**
+ * The floating surface: portals, positions, and renders the options. Given no children it renders
+ * one `Select.Option` per root `item`; pass children to compose the rows yourself. The portal and
+ * the positioner are not parts a consumer composes, so they stay out of the public API.
+ */
+export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(function MosaicSelectPopup(
+  { portalRoot, className, style, children, ...rest },
+  ref,
+) {
+  const items = React.useContext(ItemsContext);
+
+  return (
+    <Primitive.Portal root={portalRoot}>
+      <Primitive.Positioner
+        {...mergeStyleProps(themeProps('select-positioner'), stylex.props(reset.base, slots.positioner.base))}
+      >
+        <Primitive.Popup
+          ref={ref}
+          {...mergeStyleProps(
+            themeProps('select-popup'),
+            stylex.props(reset.base, scrollAreaRoot, slots.popup.base),
+            className,
+            style,
+          )}
+          {...rest}
+        >
+          <div
+            {...mergeStyleProps(
+              themeProps('select-viewport'),
+              stylex.props(reset.base, ...scrollAreaViewport(), slots.viewport.base),
+            )}
+          >
+            {children ??
+              items.map(item => (
+                <SelectOption
+                  key={item.value}
+                  {...item}
+                />
+              ))}
+          </div>
+        </Primitive.Popup>
+      </Primitive.Positioner>
+    </Primitive.Portal>
+  );
+});
+
+export interface SelectOptionProps extends Omit<PrimitiveSelectOptionProps, 'label' | 'children'>, SelectItem {}
+
+/** A single choice: its label, an optional description, and a check when it is the selection. */
+export const SelectOption = React.forwardRef<HTMLButtonElement, SelectOptionProps>(function MosaicSelectOption(
+  { label, description, className, style, ...rest },
+  ref,
+) {
+  const id = React.useId();
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const described = description !== undefined;
+
+  return (
+    <Primitive.Option
+      ref={ref}
+      label={label}
+      aria-labelledby={labelId}
+      aria-describedby={described ? descriptionId : undefined}
+      {...mergeStyleProps(
+        themeProps('select-option', { described }),
+        stylex.props(
+          reset.base,
+          focusOutline.visible,
+          selectOptionScope,
+          slots.option.base,
+          described && slots.option.described,
+        ),
+        className,
+        style,
+      )}
+      {...rest}
+    >
+      <span {...mergeStyleProps(themeProps('select-option-content'), stylex.props(reset.base, slots.content.base))}>
+        <span
+          id={labelId}
+          {...mergeStyleProps(themeProps('select-option-label'), stylex.props(reset.base, truncationStyles.singleLine))}
+        >
+          {label}
+        </span>
+        {described && (
+          <span
+            id={descriptionId}
+            {...mergeStyleProps(
+              themeProps('select-option-description'),
+              stylex.props(reset.base, slots.description.base),
+            )}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+      <Icon
+        name='check'
+        size='sm'
+        xstyle={slots.indicator.base}
+        {...themeProps('select-option-indicator')}
+      />
+    </Primitive.Option>
+  );
+});
+
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Popup: SelectPopup,
+  Option: SelectOption,
+};
diff --git a/packages/ui/src/mosaic/styles/index.ts b/packages/ui/src/mosaic/styles/index.ts
index 6182d413050..6fbce35247e 100644
--- a/packages/ui/src/mosaic/styles/index.ts
+++ b/packages/ui/src/mosaic/styles/index.ts
@@ -83,6 +83,15 @@ export type {
 } from '../components/menu';
 export { scrollAreaRoot, scrollAreaVars, scrollAreaViewport } from '../components/scroll-area';
 export type { ScrollAreaGutter } from '../components/scroll-area';
+export { Select } from '../components/select';
+export type {
+  SelectItem,
+  SelectOptionProps,
+  SelectPopupProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectTriggerVariant,
+} from '../components/select';
 export { Section } from '../components/section';
 export type {
   SectionActionsProps,