fix: [select] mark the selected item and allow item alignment

apps/www/src/content/docs/components/select/index.mdx

@@ -43,7 +43,7 @@ Appearance first, meaning size and variant, then how many items can be chosen, a
 
 ### Basic Select
 
-A trigger and a list of items. `Select.Value` renders the current selection in the trigger.
+A trigger and a list of items. `Select.Value` renders the current selection in the trigger. A check mark shows the selected item in the list. In multiple mode, each item has a checkbox instead.
 
 <Demo data={basicDemo} />
 
@@ -117,6 +117,8 @@ The container that holds the Select items.
 
 <auto-type-table path="./props.ts" name="SelectContentProps" />
 
+Set `alignItemWithTrigger` to open the list over the trigger, with the selected item lined up on the trigger's value. Base UI turns it off for touch input and when there is not enough space, and then places the list the normal way. `side` and `align` only apply when the list is placed the normal way.
+
 ### Item
 
 Individual clickable options within the Select.
@@ -164,6 +166,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `select-item` | An individual option row |
 | `select-item-icon` | Leading icon on an item (when set) |
 | `select-item-text` | The text label of an item |
+| `select-item-indicator` | The check mark on the selected item (single selection only) |
 
 ## Accessibility
 

apps/www/src/content/docs/components/select/props.ts

@@ -79,6 +79,12 @@ export interface SelectContentProps {
    */
   sideOffset?: number;
 
+  /**
+   * Overlaps the trigger so the selected item's text lines up with the trigger's value. Has no effect in autocomplete mode.
+   * @default false
+   */
+  alignItemWithTrigger?: boolean;
+
   /** Additional CSS class names. */
   className?: string;
 

packages/react/components/select/__tests__/data-slots.test.tsx

@@ -45,10 +45,10 @@ describe('Select data-slot contract', () => {
     ]);
   });
 
-  it('exposes content, list, group, label, separator and item slots when open', async () => {
+  it('exposes content, list, group, label, separator, item and indicator slots when open', async () => {
     const user = userEvent.setup();
     render(
-      <Select>
+      <Select defaultValue='apple'>
         <Select.Trigger>
           <Select.Value placeholder='Select a fruit' />
         </Select.Trigger>
@@ -76,7 +76,8 @@ describe('Select data-slot contract', () => {
       'select-label',
       'select-separator',
       'select-item',
-      'select-item-text'
+      'select-item-text',
+      'select-item-indicator'
     ]);
   });
 

packages/react/components/select/__tests__/select.test.tsx

@@ -81,6 +81,23 @@ describe('Select', () => {
   });
 
   describe('Single Selection', () => {
+    it('marks only the selected item with an indicator', async () => {
+      const user = userEvent.setup();
+      render(<BasicSelect defaultValue='banana' />);
+      await flushMicrotasks();
+      await openSelect(user);
+      await flushMicrotasks();
+
+      const options = screen.getAllByRole('option');
+      expect(
+        options[1].querySelector('[data-slot="select-item-indicator"]')
+      ).not.toBeNull();
+      expect(
+        options[0].querySelector('[data-slot="select-item-indicator"]')
+      ).toBeNull();
+      expect(within(options[1]).queryByRole('checkbox')).toBeNull();
+    });
+
     it('displays selected value in trigger', async () => {
       render(<BasicSelect defaultValue='apple' />);
       await flushMicrotasks();
@@ -281,6 +298,21 @@ describe('Select', () => {
       expect(searchInput).toBeInTheDocument();
     });
 
+    it('marks the selected item with an indicator', async () => {
+      render(<BasicSelect autocomplete defaultValue='banana' />);
+
+      fireEvent.click(screen.getByLabelText('Select option'));
+      await flushMicrotasks();
+
+      const options = screen.getAllByRole('option');
+      expect(
+        options[1].querySelector('[data-slot="select-item-indicator"]')
+      ).not.toBeNull();
+      expect(
+        options[0].querySelector('[data-slot="select-item-indicator"]')
+      ).toBeNull();
+    });
+
     it('filters options based on search', async () => {
       const user = userEvent.setup();
       render(<BasicSelect autocomplete />);

packages/react/components/select/select-content.tsx

@@ -28,6 +28,7 @@ export function SelectContent({
   sideOffset = 4,
   side = 'bottom',
   align = 'start',
+  alignItemWithTrigger = false,
   radius,
   ...props
 }: SelectContentProps) {
@@ -80,7 +81,7 @@ export function SelectContent({
       side={side}
       align={align}
       className={styles.positioner}
-      alignItemWithTrigger={false}
+      alignItemWithTrigger={alignItemWithTrigger}
       data-slot='select-positioner'
     >
       <SelectPrimitive.Popup

packages/react/components/select/select-item.tsx

@@ -6,6 +6,7 @@ import {
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import { ReactNode, useLayoutEffect } from 'react';
+import { CheckIcon } from '~/icons';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
@@ -50,7 +51,19 @@ export function SelectItem({
             {leadingIcon}
           </div>
         )}
-        <Text data-slot='select-item-text'>{children}</Text>
+        {autocomplete ? (
+          <Text className={styles.itemText} data-slot='select-item-text'>
+            {children}
+          </Text>
+        ) : (
+          <SelectPrimitive.ItemText
+            render={<Text />}
+            className={styles.itemText}
+            data-slot='select-item-text'
+          >
+            {children}
+          </SelectPrimitive.ItemText>
+        )}
       </>
     ) : (
       children
@@ -70,6 +83,9 @@ export function SelectItem({
   const ItemPrimitive = autocomplete
     ? ComboboxPrimitive.Item
     : SelectPrimitive.Item;
+  const IndicatorPrimitive = autocomplete
+    ? ComboboxPrimitive.ItemIndicator
+    : SelectPrimitive.ItemIndicator;
 
   return (
     <ItemPrimitive
@@ -83,6 +99,14 @@ export function SelectItem({
         <div {...renderProps}>
           {multiple && <Checkbox checked={state.selected} />}
           {element}
+          {!multiple && (
+            <IndicatorPrimitive
+              className={styles.itemIndicator}
+              data-slot='select-item-indicator'
+            >
+              <CheckIcon aria-hidden='true' />
+            </IndicatorPrimitive>
+          )}
         </div>
       )}
     />

packages/react/components/select/select.module.css

@@ -286,3 +286,21 @@
 .hidden {
   display: none;
 }
+
+.itemText {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemIndicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.itemIndicator svg {
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
+}