diff --git a/apps/www/src/content/docs/components/select/index.mdx b/apps/www/src/content/docs/components/select/index.mdx
index 2c2925bff..ef6f79097 100644
--- a/apps/www/src/content/docs/components/select/index.mdx
+++ b/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.
@@ -117,6 +117,8 @@ The container that holds the Select items.
+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
diff --git a/apps/www/src/content/docs/components/select/props.ts b/apps/www/src/content/docs/components/select/props.ts
index 80ddce754..14924698a 100644
--- a/apps/www/src/content/docs/components/select/props.ts
+++ b/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;
diff --git a/packages/react/components/select/__tests__/data-slots.test.tsx b/packages/react/components/select/__tests__/data-slots.test.tsx
index d26d23883..9d3cbf254 100644
--- a/packages/react/components/select/__tests__/data-slots.test.tsx
+++ b/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(
-