diff --git a/docs/reference/generated/label.json b/docs/reference/generated/label.json
new file mode 100644
index 00000000000..3b261b3d5e5
--- /dev/null
+++ b/docs/reference/generated/label.json
@@ -0,0 +1,27 @@
+{
+  "name": "Label",
+  "props": {
+    "nativeLabel": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the component renders a native `<label>` element when replacing it via the `render` prop.\nSet to `false` if the rendered element is not a label (e.g. `<div>`).\n\nThis is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.",
+      "detailedType": "boolean | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Label.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Label.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Label.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((state: Label.State) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Label.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((props: HTMLProps, state: Label.State) => ReactElement)"
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/page.mdx b/docs/src/app/(docs)/react/components/autocomplete/page.mdx
index c8e48cb5dba..5c98602784c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/page.mdx
+++ b/docs/src/app/(docs)/react/components/autocomplete/page.mdx
@@ -14,7 +14,7 @@ import { DemoAutocompleteHero } from './demos/hero';
 
 - **Avoid when selection state is needed**: Use [Combobox](/react/components/combobox) instead of Autocomplete if the selection should be remembered and the input value cannot be custom. Unlike Combobox, Autocomplete's input can contain free-form text, as its suggestions only _optionally_ autocomplete the text.
 - **Can be used for filterable command pickers**: The input can be used as a filter for command items that perform an action when clicked when rendered inside the popup.
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 1b440efa951..70322bba06a 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 export default function ExampleCheckboxGroup() {
@@ -16,32 +17,32 @@ export default function ExampleCheckboxGroup() {
         Apples
       </div>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root name="apple" value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root name="apple" value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root name="apple" value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
-      </label>
+      </Label>
     </CheckboxGroup>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 5d1cd4195e4..ba3732b8848 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Label } from '@base-ui/react/label';
 
 export default function ExampleCheckboxGroup() {
   const id = React.useId();
@@ -15,7 +16,7 @@ export default function ExampleCheckboxGroup() {
         Apples
       </div>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
@@ -26,9 +27,9 @@ export default function ExampleCheckboxGroup() {
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
-      </label>
+      </Label>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
@@ -39,9 +40,9 @@ export default function ExampleCheckboxGroup() {
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
-      </label>
+      </Label>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
@@ -52,7 +53,7 @@ export default function ExampleCheckboxGroup() {
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
-      </label>
+      </Label>
     </CheckboxGroup>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 99819e3f323..e2bf2638308 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 const mainPermissions = ['view-dashboard', 'manage-users', 'access-reports'];
@@ -28,7 +29,7 @@ export default function PermissionsForm() {
       className={styles.CheckboxGroup}
       style={{ marginLeft: '1rem' }}
     >
-      <label className={styles.Item} id={id} style={{ marginLeft: '-1rem' }}>
+      <Label className={styles.Item} id={id} style={{ marginLeft: '-1rem' }}>
         <Checkbox.Root
           className={styles.Checkbox}
           parent
@@ -51,25 +52,25 @@ export default function PermissionsForm() {
           />
         </Checkbox.Root>
         User Permissions
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root value="view-dashboard" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         View Dashboard
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root value="access-reports" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Access Reports
-      </label>
+      </Label>
 
       <CheckboxGroup
         aria-labelledby="manage-users-caption"
@@ -86,7 +87,7 @@ export default function PermissionsForm() {
         allValues={userManagementPermissions}
         style={{ marginLeft: '1rem' }}
       >
-        <label className={styles.Item} id="manage-users-caption" style={{ marginLeft: '-1rem' }}>
+        <Label className={styles.Item} id="manage-users-caption" style={{ marginLeft: '-1rem' }}>
           <Checkbox.Root className={styles.Checkbox} parent>
             <Checkbox.Indicator
               className={styles.Indicator}
@@ -102,43 +103,43 @@ export default function PermissionsForm() {
             />
           </Checkbox.Root>
           Manage Users
-        </label>
+        </Label>
 
-        <label className={styles.Item}>
+        <Label className={styles.Item}>
           <Checkbox.Root value="create-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
               <CheckIcon className={styles.Icon} />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Create User
-        </label>
+        </Label>
 
-        <label className={styles.Item}>
+        <Label className={styles.Item}>
           <Checkbox.Root value="edit-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
               <CheckIcon className={styles.Icon} />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Edit User
-        </label>
+        </Label>
 
-        <label className={styles.Item}>
+        <Label className={styles.Item}>
           <Checkbox.Root value="delete-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
               <CheckIcon className={styles.Icon} />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Delete User
-        </label>
+        </Label>
 
-        <label className={styles.Item}>
+        <Label className={styles.Item}>
           <Checkbox.Root value="assign-roles" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
               <CheckIcon className={styles.Icon} />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Assign Roles
-        </label>
+        </Label>
       </CheckboxGroup>
     </CheckboxGroup>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index aadabcbfb1d..5e4e03e6d2f 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 const fruits = ['fuji-apple', 'gala-apple', 'granny-smith-apple'];
@@ -19,7 +20,7 @@ export default function ExampleCheckboxGroup() {
       className={styles.CheckboxGroup}
       style={{ marginLeft: '1rem' }}
     >
-      <label className={styles.Item} id={id} style={{ marginLeft: '-1rem' }}>
+      <Label className={styles.Item} id={id} style={{ marginLeft: '-1rem' }}>
         <Checkbox.Root className={styles.Checkbox} parent>
           <Checkbox.Indicator
             className={styles.Indicator}
@@ -35,34 +36,34 @@ export default function ExampleCheckboxGroup() {
           />
         </Checkbox.Root>
         Apples
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Checkbox.Root value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
             <CheckIcon className={styles.Icon} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
-      </label>
+      </Label>
     </CheckboxGroup>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/page.mdx b/docs/src/app/(docs)/react/components/checkbox-group/page.mdx
index 4f72d806e76..3200da266bc 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/page.mdx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/page.mdx
@@ -12,7 +12,7 @@ import { DemoCheckboxGroupHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using `<label>` elements, or the `Field` and `Fieldset` components. See [Labeling a checkbox group](#labeling-a-checkbox-group) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using native label elements, the [Label](/react/components/label) component, or the `Field` and `Fieldset` components. See [Labeling a checkbox group](#labeling-a-checkbox-group) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -38,16 +38,16 @@ A visible label for the group is created by specifying `aria-labelledby` on `<Ch
 <CheckboxGroup aria-labelledby="protocols-label">{/* ... */}</CheckboxGroup>
 ```
 
-For individual checkboxes, use an enclosing `<label>` element that wraps each `<Checkbox.Root>`. An enclosing label is announced to screen readers when focus is on the control, and ensures that clicking on any gaps between the label and checkbox still toggles it.
+For individual checkboxes, use the [Label](/react/components/label) component. It supports the same enclosing labeling pattern as a native label element, so clicking on any gaps between the label text and checkbox still toggles it.
 
-```tsx title="Using an enclosing label to label a checkbox" {1,4}
-<label>
+```tsx title="Using Label to label a checkbox" {1,4}
+<Label>
   <Checkbox.Root value="http" />
   HTTP
-</label>
+</Label>
 ```
 
-The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components eliminate the need to track `id` or `aria-labelledby` associations manually. They support both enclosing and sibling labeling patterns, along with a UX improvement to prevent double clicks from selecting the label text.
+The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components are alternatives that add validation and group labeling support.
 
 1. **Group label**: Since the group contains multiple controls, it can be labeled as a fieldset. Use [Fieldset](/react/components/fieldset) by replacing the `<Fieldset.Root>` element with `<CheckboxGroup>` via the `render` prop. `<Fieldset.Legend>` provides the visible label for the group.
 2. **Individual label**: Place each individual checkbox in `<Field.Item>`, then label it using an enclosing `<Field.Label>`. Enclosing labels ensure that clicking on any gaps between the label and checkbox still toggles it.
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index b701cd88c45..94c41411444 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 export default function ExampleCheckbox() {
   return (
-    <label className={styles.Label}>
+    <Label className={styles.Label}>
       <Checkbox.Root defaultChecked className={styles.Checkbox}>
         <Checkbox.Indicator className={styles.Indicator}>
           <CheckIcon className={styles.Icon} />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
-    </label>
+    </Label>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 84dcaaa1934..cca13c21d19 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Checkbox } from '@base-ui/react/checkbox';
+import { Label } from '@base-ui/react/label';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900">
+    <Label className="flex items-center gap-2 text-base text-gray-900">
       <Checkbox.Root
         defaultChecked
         className="flex size-5 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
@@ -13,7 +14,7 @@ export default function ExampleCheckbox() {
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
-    </label>
+    </Label>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/checkbox/page.mdx b/docs/src/app/(docs)/react/components/checkbox/page.mdx
index 3c077cf8616..899ae4bfdbc 100644
--- a/docs/src/app/(docs)/react/components/checkbox/page.mdx
+++ b/docs/src/app/(docs)/react/components/checkbox/page.mdx
@@ -12,7 +12,7 @@ import { DemoCheckboxBasic } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See [Labeling a checkbox](#labeling-a-checkbox) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See [Labeling a checkbox](#labeling-a-checkbox) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -30,16 +30,16 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 ### Labeling a checkbox
 
-Label a checkbox using an enclosing `<label>` element that wraps `<Checkbox.Root>`. An enclosing label is announced to screen readers when focus is on the control, and ensures that clicking on any gaps between the label and checkbox still toggles the control.
+Label a checkbox using the [Label](/react/components/label) component. It supports the same enclosing labeling pattern as a native `<label>`, so clicking on any gaps between the label text and checkbox still toggles the control.
 
-```tsx title="Using an enclosing label to label a checkbox" {1,4}
-<label>
+```tsx title="Using Label to label a checkbox" {1,4}
+<Label>
   <Checkbox.Root />
   Accept terms and conditions
-</label>
+</Label>
 ```
 
-The [Field](/react/components/field) component eliminates the need to track `id` or `aria-label` associations manually. It supports both enclosing and sibling labeling patterns, along with a UX improvement to prevent double clicks from selecting the label text.
+The [Field](/react/components/field) component is an alternative that adds validation and description support.
 
 ```tsx title="Using the Field component to label a checkbox" {2,5}
 <Field.Root>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 3897a4a7b6f..3ef8225544c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -82,6 +82,10 @@
 }
 
 .Label {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index a12cc81b8e4..0b4240ae345 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -1,24 +1,24 @@
 'use client';
 import * as React from 'react';
 import { Combobox } from '@base-ui/react/combobox';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 export default function ExamplePopoverCombobox() {
   return (
-    <Field.Root className={styles.Field}>
-      <Field.Label className={styles.Label} nativeLabel={false} render={<div />}>
-        Country
-      </Field.Label>
+    <div className={styles.Field}>
       <Combobox.Root items={countries}>
-        <Combobox.Trigger className={styles.Trigger}>
-          <Combobox.Value
-            placeholder={<span className={styles.Placeholder}>Select country</span>}
-          />
-          <Combobox.Icon className={styles.TriggerIcon}>
-            <ChevronUpDownIcon />
-          </Combobox.Icon>
-        </Combobox.Trigger>
+        <Label className={styles.Label} nativeLabel={false} render={<div />}>
+          Country
+          <Combobox.Trigger className={styles.Trigger}>
+            <Combobox.Value
+              placeholder={<span className={styles.Placeholder}>Select country</span>}
+            />
+            <Combobox.Icon className={styles.TriggerIcon}>
+              <ChevronUpDownIcon />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Label>
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup className={styles.Popup} aria-label="Select country">
@@ -40,7 +40,7 @@ export default function ExamplePopoverCombobox() {
           </Combobox.Positioner>
         </Combobox.Portal>
       </Combobox.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index d2ff8987316..6aaa9affb65 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -1,25 +1,25 @@
 'use client';
 import * as React from 'react';
 import { Combobox } from '@base-ui/react/combobox';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 
 export default function ExamplePopoverCombobox() {
   return (
-    <Field.Root className="flex flex-col gap-1">
-      <Field.Label
-        className="cursor-default text-sm leading-5 font-medium text-gray-900"
-        nativeLabel={false}
-        render={<div />}
-      >
-        Country
-      </Field.Label>
+    <div className="flex flex-col gap-1">
       <Combobox.Root items={countries}>
-        <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default">
-          <Combobox.Value placeholder={<span className="opacity-60">Select country</span>} />
-          <Combobox.Icon className="flex">
-            <ChevronUpDownIcon />
-          </Combobox.Icon>
-        </Combobox.Trigger>
+        <Label
+          className="flex flex-col items-start gap-1 cursor-default text-sm leading-5 font-medium text-gray-900"
+          nativeLabel={false}
+          render={<div />}
+        >
+          Country
+          <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default">
+            <Combobox.Value placeholder={<span className="opacity-60">Select country</span>} />
+            <Combobox.Icon className="flex">
+              <ChevronUpDownIcon />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Label>
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
@@ -53,7 +53,7 @@ export default function ExamplePopoverCombobox() {
           </Combobox.Positioner>
         </Combobox.Portal>
       </Combobox.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/page.mdx b/docs/src/app/(docs)/react/components/combobox/page.mdx
index d1ce96f4fb9..8920c7b1e66 100644
--- a/docs/src/app/(docs)/react/components/combobox/page.mdx
+++ b/docs/src/app/(docs)/react/components/combobox/page.mdx
@@ -15,7 +15,7 @@ import { DemoComboboxHero } from './demos/hero';
 - **Combobox is a filterable Select**: Use Combobox when the input is restricted to a set of predefined selectable items, similar to [Select](/react/components/select) but whose items are filterable using an input. Prefer using Combobox over Select when the number of items is sufficiently large to warrant filtering.
 - **Avoid for simple search widgets**: Combobox does not allow free-form text input. For search widgets, consider using [Autocomplete](/react/components/autocomplete) instead.
 - **Avoid when not rendering an input**: Use [Select](/react/components/select) instead of Combobox if no input is being rendered, which includes accessibility features specific to a listbox without an input.
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See [Labeling a combobox](#input-inside-popup) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See [Labeling a combobox](#labeling-a-combobox) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -98,17 +98,33 @@ import { DemoComboboxMultiple } from './demos/multiple';
 
 <DemoComboboxMultiple compact />
 
-### Input inside popup
+### Labeling a combobox
 
-`<Combobox.Input>` can be rendered inside `<Combobox.Popup>` to create a searchable select popup.
+Use the [Label](/react/components/label) component for a visible combobox label:
 
-import { DemoComboboxInputInsidePopup } from './demos/input-inside-popup';
+```tsx title="Using Label to label a combobox" {2}
+<Combobox.Root>
+  <Label>Favorite fruit</Label>
+  <Combobox.Input />
+  <Combobox.Portal>{/* ... */}</Combobox.Portal>
+</Combobox.Root>
+```
 
-<DemoComboboxInputInsidePopup compact />
+When the combobox input is rendered inside the popup and the trigger is labeled instead, replace the rendered `<label>` with a `<div>` and add `nativeLabel={false}`:
+
+```tsx title="Labeling a combobox trigger when input is in popup" {2,5}
+<Combobox.Root>
+  <Label nativeLabel={false} render={<div />}>
+    Favorite fruit
+    <Combobox.Trigger />
+  </Label>
+  <Combobox.Portal>{/* ... */}</Combobox.Portal>
+</Combobox.Root>
+```
 
-Use the [Field](/react/components/field) component to provide a visible label for the combobox trigger:
+The [Field](/react/components/field) component is an alternative that additionally supports validation and description text:
 
-```tsx title="Using Field to label a combobox" {2,4}
+```tsx title="Using Field to label a combobox trigger" {2,4}
 <Field.Root>
   <Field.Label nativeLabel={false} render={<div />}>
     Favorite fruit
@@ -117,7 +133,13 @@ Use the [Field](/react/components/field) component to provide a visible label fo
 </Field.Root>
 ```
 
-Replace the rendered `<label>` element with a `<div>` element and add `nativeLabel={false}` so it does not inherit native label behaviors. This ensures clicking on the label will focus the combobox trigger without opening the associated popup to match native `<select>` behavior, and prevents CSS `:hover` from activating on the trigger when hovering over the label.
+### Input inside popup
+
+`<Combobox.Input>` can be rendered inside `<Combobox.Popup>` to create a searchable select popup.
+
+import { DemoComboboxInputInsidePopup } from './demos/input-inside-popup';
+
+<DemoComboboxInputInsidePopup compact />
 
 ### Grouped
 
diff --git a/docs/src/app/(docs)/react/components/input/page.mdx b/docs/src/app/(docs)/react/components/input/page.mdx
index 3832a1a1b6a..2832a7f8262 100644
--- a/docs/src/app/(docs)/react/components/input/page.mdx
+++ b/docs/src/app/(docs)/react/components/input/page.mdx
@@ -12,7 +12,7 @@ import { DemoInputHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
diff --git a/docs/src/app/(docs)/react/components/label/page.mdx b/docs/src/app/(docs)/react/components/label/page.mdx
new file mode 100644
index 00000000000..779fb358fbd
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/label/page.mdx
@@ -0,0 +1,85 @@
+# Label
+
+<Subtitle>An accessible label component for Base UI form controls.</Subtitle>
+<Meta
+  name="description"
+  content="A high-quality, unstyled React label component for naming Base UI form controls."
+/>
+
+## Usage guidelines
+
+- **Use when standalone**: `Label` is a lightweight version of [Field.Label](/react/components/field) that does not include Field validation state attributes. Use [Field.Label](/react/components/field) when the control is wrapped in [Field.Root](/react/components/field).
+- **Use non-native labeling for trigger controls**: For controls like `<Select.Trigger>` and `<Combobox.Trigger>`, set `nativeLabel={false}` and `render={<div />}` so clicks focus the trigger without inheriting native `<label>` behavior.
+
+## Anatomy
+
+Import the component and use it as a single part:
+
+```jsx title="Anatomy"
+import { Label } from '@base-ui/react/label';
+
+<Label>Label</Label>;
+```
+
+## Labeling patterns
+
+For `<Checkbox.Root>`, `<Switch.Root>`, and `<Radio.Root>`, prefer wrapping the control with `Label` instead of using a sibling label. Wrapping avoids tracking IDs manually and keeps CSS gaps between the control and text clickable.
+
+```tsx title="Recommended wrapping pattern" {1,4}
+<Label>
+  <Checkbox.Root />
+  Enable notifications
+</Label>
+```
+
+Sibling `htmlFor`/`id` labeling is supported as a fallback. For non-`nativeButton` controls, `aria-labelledby` is attached after hydration. If you need sibling labeling behavior during SSR, use `nativeButton` with `render={<button />}` on the control.
+
+```tsx title="SSR-first sibling fallback pattern" {3,4}
+const id = React.useId();
+
+<Label htmlFor={id}>Enable notifications</Label>
+<Checkbox.Root id={id} nativeButton render={<button />} />;
+```
+
+`Label` also prevents accidental text selection from double clicks on the label.
+
+## Examples
+
+### Labeling a checkbox
+
+```tsx title="Using Label with Checkbox" {1,4}
+<Label>
+  <Checkbox.Root />
+  Enable notifications
+</Label>
+```
+
+### Labeling a select trigger
+
+```tsx title="Using Label with Select.Trigger" {2,5}
+<Select.Root>
+  <Label nativeLabel={false} render={<div />}>
+    Theme
+    <Select.Trigger>{/* ... */}</Select.Trigger>
+  </Label>
+  <Select.Portal>{/* ... */}</Select.Portal>
+</Select.Root>
+```
+
+## API reference
+
+<Reference component="Label" />
+
+export const metadata = {
+  keywords: [
+    'React Label',
+    'Label Component',
+    'Accessible Label',
+    'Form Control Label',
+    'Custom Label',
+    'Standalone Label',
+    'Label Trigger',
+    'Headless React Components',
+    'Base UI',
+  ],
+};
diff --git a/docs/src/app/(docs)/react/components/number-field/page.mdx b/docs/src/app/(docs)/react/components/number-field/page.mdx
index 64551787654..d2dfe83dd84 100644
--- a/docs/src/app/(docs)/react/components/number-field/page.mdx
+++ b/docs/src/app/(docs)/react/components/number-field/page.mdx
@@ -13,7 +13,7 @@ import { DemoNumberFieldHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
diff --git a/docs/src/app/(docs)/react/components/page.mdx b/docs/src/app/(docs)/react/components/page.mdx
index 7bcdfec3063..5c1f1b29bc8 100644
--- a/docs/src/app/(docs)/react/components/page.mdx
+++ b/docs/src/app/(docs)/react/components/page.mdx
@@ -18,6 +18,7 @@
 - [Fieldset](#fieldset) - [Full Docs](./fieldset/page.mdx)
 - [Form](#form) - [Full Docs](./form/page.mdx)
 - [Input](#input) - [Full Docs](./input/page.mdx)
+- [Label](#label) [New] - [Full Docs](./label/page.mdx)
 - [Menu](#menu) - [Full Docs](./menu/page.mdx)
 - [Menubar](#menubar) - [Full Docs](./menubar/page.mdx)
 - [Meter](#meter) - [Full Docs](./meter/page.mdx)
@@ -312,6 +313,7 @@ An input combined with a list of predefined items to select.
   - Examples
     - Typed wrapper component
     - Multiple select
+    - Labeling a combobox
     - Input inside popup
     - Grouped
     - Async search (single)
@@ -633,6 +635,31 @@ A native input element that automatically works with [Field](/react/components/f
 
 [Read more](./input/page.mdx)
 
+## Label
+
+An accessible label component for Base UI form controls.
+
+<details>
+
+<summary>Outline</summary>
+
+- Keywords: React Label, Label Component, Accessible Label, Form Control Label, Custom Label, Standalone Label, Label Trigger, Headless React Components, Base UI
+- Sections:
+  - Usage guidelines
+  - Anatomy
+  - Labeling patterns
+  - Examples
+    - Labeling a checkbox
+    - Labeling a select trigger
+  - API reference
+- Exports:
+  - Label
+    - Props: className, nativeLabel, render, style
+
+</details>
+
+[Read more](./label/page.mdx)
+
 ## Menu
 
 A list of actions in a dropdown, enhanced with keyboard navigation.
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.tsx
index d5991762c81..7e3d290fc97 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { Label } from '@base-ui/react/label';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import styles from './index.module.css';
@@ -12,26 +13,26 @@ export default function ExampleRadioGroup() {
         Best apple
       </div>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Radio.Root value="fuji-apple" className={styles.Radio}>
           <Radio.Indicator className={styles.Indicator} />
         </Radio.Root>
         Fuji
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Radio.Root value="gala-apple" className={styles.Radio}>
           <Radio.Indicator className={styles.Indicator} />
         </Radio.Root>
         Gala
-      </label>
+      </Label>
 
-      <label className={styles.Item}>
+      <Label className={styles.Item}>
         <Radio.Root value="granny-smith-apple" className={styles.Radio}>
           <Radio.Indicator className={styles.Indicator} />
         </Radio.Root>
         Granny Smith
-      </label>
+      </Label>
     </RadioGroup>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index d2edf891250..35ab16ace1b 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { Label } from '@base-ui/react/label';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 
@@ -15,7 +16,7 @@ export default function ExampleRadioGroup() {
         Best apple
       </div>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Radio.Root
           value="fuji-apple"
           className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
@@ -23,9 +24,9 @@ export default function ExampleRadioGroup() {
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
         Fuji
-      </label>
+      </Label>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Radio.Root
           value="gala-apple"
           className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
@@ -33,9 +34,9 @@ export default function ExampleRadioGroup() {
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
         Gala
-      </label>
+      </Label>
 
-      <label className="flex items-center gap-2">
+      <Label className="flex items-center gap-2">
         <Radio.Root
           value="granny-smith-apple"
           className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
@@ -43,7 +44,7 @@ export default function ExampleRadioGroup() {
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
         Granny Smith
-      </label>
+      </Label>
     </RadioGroup>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/radio/page.mdx b/docs/src/app/(docs)/react/components/radio/page.mdx
index 4ac2398aeee..a94e7e7fccf 100644
--- a/docs/src/app/(docs)/react/components/radio/page.mdx
+++ b/docs/src/app/(docs)/react/components/radio/page.mdx
@@ -12,7 +12,7 @@ import { DemoRadioHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using `<label>` elements, or the `Field` and `Fieldset` components. See [Labeling a radio group](#labeling-a-radio-group) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using `<label>` elements, the [Label](/react/components/label) component, or the `Field` and `Fieldset` components. See [Labeling a radio group](#labeling-a-radio-group) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -40,16 +40,16 @@ A visible label for the group is created by specifying `aria-labelledby` on `<Ra
 <RadioGroup aria-labelledby="storage-type-label">{/* ... */}</RadioGroup>
 ```
 
-For individual radio buttons, use an enclosing `<label>` element that wraps each `<Radio.Root>`. An enclosing label is announced to screen readers when focus is on the control, and ensures that clicking on any gaps between the label and radio still toggles it.
+For individual radio buttons, use the [Label](/react/components/label) component. It supports the same enclosing labeling pattern as a native `<label>`, so clicking on any gaps between the label text and radio still toggles it.
 
-```tsx title="Using an enclosing label to label a radio button" {1,4}
-<label>
+```tsx title="Using Label to label a radio button" {1,4}
+<Label>
   <Radio.Root value="ssd" />
   SSD
-</label>
+</Label>
 ```
 
-The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components eliminate the need to track `id` or `aria-labelledby` associations manually. They support both enclosing and sibling labeling patterns, along with a UX improvement to prevent double clicks from selecting the label text.
+The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components are alternatives that add validation and group labeling support.
 
 1. **Group label**: Since the group contains multiple controls, it can be labeled as a fieldset. Use [Fieldset](/react/components/fieldset) by replacing the `<Fieldset.Root>` element with `<RadioGroup>` via the `render` prop. `<Fieldset.Legend>` provides the visible label for the group.
 2. **Individual label**: Place each individual radio in `<Field.Item>`, then label it using an enclosing `<Field.Label>`. Enclosing labels ensure that clicking on any gaps between the label and radio still toggles it.
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index ce2d205b62e..95cc1b5c3f4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -6,6 +6,10 @@
 }
 
 .Label {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 4a3196ea577..abeddaea988 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 const apples = [
@@ -13,17 +13,17 @@ const apples = [
 
 export default function ExampleSelect() {
   return (
-    <Field.Root className={styles.Field}>
-      <Field.Label className={styles.Label} nativeLabel={false} render={<div />}>
-        Apple
-      </Field.Label>
+    <div className={styles.Field}>
       <Select.Root items={apples}>
-        <Select.Trigger className={styles.Select}>
-          <Select.Value className={styles.Value} placeholder="Select apple" />
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+        <Label className={styles.Label} nativeLabel={false} render={<div />}>
+          Apple
+          <Select.Trigger className={styles.Select}>
+            <Select.Value className={styles.Value} placeholder="Select apple" />
+            <Select.Icon className={styles.SelectIcon}>
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
@@ -43,7 +43,7 @@ export default function ExampleSelect() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 618bcedb1a3..251e78956da 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 
 const apples = [
   { label: 'Gala', value: 'gala' },
@@ -12,21 +12,21 @@ const apples = [
 
 export default function ExampleSelect() {
   return (
-    <Field.Root className="flex flex-col gap-1">
-      <Field.Label
-        className="cursor-default text-sm leading-5 font-medium text-gray-900"
-        nativeLabel={false}
-        render={<div />}
-      >
-        Apple
-      </Field.Label>
+    <div className="flex flex-col gap-1">
       <Select.Root items={apples}>
-        <Select.Trigger className="flex h-10 min-w-40 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
-          <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select apple" />
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+        <Label
+          className="flex flex-col items-start gap-1 cursor-default text-sm leading-5 font-medium text-gray-900"
+          nativeLabel={false}
+          render={<div />}
+        >
+          Apple
+          <Select.Trigger className="flex h-10 min-w-40 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
+            <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select apple" />
+            <Select.Icon className="flex">
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:outline-gray-300">
@@ -50,7 +50,7 @@ export default function ExampleSelect() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 819b93fa6bb..b07902b0ef8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -6,6 +6,10 @@
 }
 
 .Label {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 8b466236a20..d295f8eccb5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 const languages = {
@@ -33,17 +33,17 @@ function renderValue(value: Language[]) {
 
 export default function MultiSelectExample() {
   return (
-    <Field.Root className={styles.Field}>
-      <Field.Label className={styles.Label} nativeLabel={false} render={<div />}>
-        Languages
-      </Field.Label>
+    <div className={styles.Field}>
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Trigger className={styles.Select}>
-          <Select.Value className={styles.Value}>{renderValue}</Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+        <Label className={styles.Label} nativeLabel={false} render={<div />}>
+          Languages
+          <Select.Trigger className={styles.Select}>
+            <Select.Value className={styles.Value}>{renderValue}</Select.Value>
+            <Select.Icon className={styles.SelectIcon}>
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner
             className={styles.Positioner}
@@ -63,7 +63,7 @@ export default function MultiSelectExample() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 9d4e4ddb998..90c5e513b49 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 
 const languages = {
   javascript: 'JavaScript',
@@ -32,21 +32,21 @@ function renderValue(value: Language[]) {
 
 export default function MultiSelectExample() {
   return (
-    <Field.Root className="flex flex-col gap-1">
-      <Field.Label
-        className="cursor-default text-sm leading-5 font-medium text-gray-900"
-        nativeLabel={false}
-        render={<div />}
-      >
-        Languages
-      </Field.Label>
+    <div className="flex flex-col gap-1">
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Trigger className="flex h-10 min-w-[14rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
-          <Select.Value className="data-[placeholder]:opacity-60">{renderValue}</Select.Value>
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+        <Label
+          className="flex flex-col items-start gap-1 cursor-default text-sm leading-5 font-medium text-gray-900"
+          nativeLabel={false}
+          render={<div />}
+        >
+          Languages
+          <Select.Trigger className="flex h-10 min-w-[14rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
+            <Select.Value className="data-[placeholder]:opacity-60">{renderValue}</Select.Value>
+            <Select.Icon className="flex">
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner
             className="outline-hidden z-10"
@@ -70,7 +70,7 @@ export default function MultiSelectExample() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index ba9e05ccbfc..9e20e2002b8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -6,6 +6,10 @@
 }
 
 .Label {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 8f859bd3221..9b5141e7669 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -1,31 +1,31 @@
 'use client';
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 import styles from './index.module.css';
 
 export default function ObjectValueSelect() {
   return (
-    <Field.Root className={styles.Field}>
-      <Field.Label className={styles.Label} nativeLabel={false} render={<div />}>
-        Shipping method
-      </Field.Label>
+    <div className={styles.Field}>
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Trigger className={styles.Select}>
-          <Select.Value>
-            {(method: ShippingMethod) => (
-              <span className={styles.ValueText}>
-                <span className={styles.ValuePrimary}>{method.name}</span>
-                <span className={styles.ValueSecondary}>
-                  {method.duration} ({method.price})
+        <Label className={styles.Label} nativeLabel={false} render={<div />}>
+          Shipping method
+          <Select.Trigger className={styles.Select}>
+            <Select.Value>
+              {(method: ShippingMethod) => (
+                <span className={styles.ValueText}>
+                  <span className={styles.ValuePrimary}>{method.name}</span>
+                  <span className={styles.ValueSecondary}>
+                    {method.duration} ({method.price})
+                  </span>
                 </span>
-              </span>
-            )}
-          </Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+              )}
+            </Select.Value>
+            <Select.Icon className={styles.SelectIcon}>
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
@@ -50,7 +50,7 @@ export default function ObjectValueSelect() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index be7245f5447..9d30d9f9f5e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -1,34 +1,34 @@
 'use client';
 import * as React from 'react';
 import { Select } from '@base-ui/react/select';
-import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
 
 export default function ObjectValueSelect() {
   return (
-    <Field.Root className="flex flex-col gap-1">
-      <Field.Label
-        className="cursor-default text-sm leading-5 font-medium text-gray-900"
-        nativeLabel={false}
-        render={<div />}
-      >
-        Shipping method
-      </Field.Label>
+    <div className="flex flex-col gap-1">
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Trigger className="flex min-h-10 min-w-[16rem] items-start justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 py-2 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
-          <Select.Value>
-            {(method: ShippingMethod) => (
-              <span className="flex flex-col items-start gap-0.5">
-                <span className="text-base leading-6">{method.name}</span>
-                <span className="text-xs leading-4 text-gray-600">
-                  {method.duration} ({method.price})
+        <Label
+          className="flex flex-col items-start gap-1 cursor-default text-sm leading-5 font-medium text-gray-900"
+          nativeLabel={false}
+          render={<div />}
+        >
+          Shipping method
+          <Select.Trigger className="flex min-h-10 min-w-[16rem] items-start justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 py-2 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
+            <Select.Value>
+              {(method: ShippingMethod) => (
+                <span className="flex flex-col items-start gap-0.5">
+                  <span className="text-base leading-6">{method.name}</span>
+                  <span className="text-xs leading-4 text-gray-600">
+                    {method.duration} ({method.price})
+                  </span>
                 </span>
-              </span>
-            )}
-          </Select.Value>
-          <Select.Icon className="flex items-center self-center">
-            <ChevronUpDownIcon />
-          </Select.Icon>
-        </Select.Trigger>
+              )}
+            </Select.Value>
+            <Select.Icon className="flex items-center self-center">
+              <ChevronUpDownIcon />
+            </Select.Icon>
+          </Select.Trigger>
+        </Label>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style] :transition-none dark:shadow-none dark:outline-gray-300">
@@ -57,7 +57,7 @@ export default function ObjectValueSelect() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-    </Field.Root>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/page.mdx b/docs/src/app/(docs)/react/components/select/page.mdx
index 3d5442f4e94..f36c63a3522 100644
--- a/docs/src/app/(docs)/react/components/select/page.mdx
+++ b/docs/src/app/(docs)/react/components/select/page.mdx
@@ -14,7 +14,7 @@ import { DemoSelectHero } from './demos/hero';
 
 - **Prefer Combobox for large lists**: Select is not filterable, aside from basic keyboard typeahead functionality to find items by focusing and highlighting them. Prefer [Combobox](/react/components/combobox) instead of Select when the number of items is sufficiently large to warrant filtering.
 - **Special positioning behavior**: The select popup by default overlaps its trigger so the selected item's text is aligned with the trigger's value text. This behavior [can be disabled or customized](/react/components/select#positioning).
-- **Form controls must have an accessible name**: It can be created using the `Field` component. See [Labeling a select](#labeling-a-select) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using the [Label](/react/components/label) or `Field` component. See [Labeling a select](#labeling-a-select) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -126,9 +126,22 @@ To avoid lookup, [object values](#object-values) for each item can also be used.
 
 ### Labeling a select
 
-Use the [Field](/react/components/field) component to provide a visible label for the select trigger:
+Use the [Label](/react/components/label) component to provide a visible label for the select trigger:
 
-```tsx title="Using Field to label a select" {2,4}
+```tsx title="Using Label to label a select trigger" {2,5}
+<Select.Root>
+  <Label nativeLabel={false} render={<div />}>
+    Theme
+    <Select.Trigger>{/* ... */}</Select.Trigger>
+  </Label>
+</Select.Root>
+```
+
+Replace the rendered `<label>` element with a `<div>` element and add `nativeLabel={false}` so it does not inherit native label behaviors. This ensures clicking on the label will focus the select trigger without opening the associated popup to match native `<select>` behavior, and prevents CSS `:hover` from activating on the trigger when hovering over the label.
+
+The [Field](/react/components/field) component is an alternative that additionally supports validation and description text:
+
+```tsx title="Using Field to label a select trigger" {2,4}
 <Field.Root>
   <Field.Label nativeLabel={false} render={<div />}>
     Theme
@@ -137,8 +150,6 @@ Use the [Field](/react/components/field) component to provide a visible label fo
 </Field.Root>
 ```
 
-Replace the rendered `<label>` element with a `<div>` element and add `nativeLabel={false}` so it does not inherit native label behaviors. This ensures clicking on the label will focus the select trigger without opening the associated popup to match native `<select>` behavior, and prevents CSS `:hover` from activating on the trigger when hovering over the label.
-
 ### Placeholder values
 
 To show a placeholder value, use the `placeholder` prop on `<Select.Value>`:
diff --git a/docs/src/app/(docs)/react/components/slider/page.mdx b/docs/src/app/(docs)/react/components/slider/page.mdx
index f071f285d5c..5c0835e2adc 100644
--- a/docs/src/app/(docs)/react/components/slider/page.mdx
+++ b/docs/src/app/(docs)/react/components/slider/page.mdx
@@ -12,7 +12,7 @@ import { DemoSliderHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: See [Labeling a slider](#labeling-a-slider) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using the [Label](/react/components/label), `Field`, and `Fieldset` components, or explicit ARIA labeling. See [Labeling a slider](#labeling-a-slider) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -72,7 +72,23 @@ A single-thumb slider without a visible label (such as a volume control) can be
 </Slider.Root>
 ```
 
-A visible label can be created using `aria-labelledby` on `<Slider.Root>` that references the `id` of a sibling element, such as a `<div>`:
+A visible label can be created using the [Label](/react/components/label) component:
+
+```tsx title="Using Label to label a slider" {1,11}
+<Label nativeLabel={false} render={<div />}>
+  Volume
+  <Slider.Root>
+    <Slider.Control>
+      <Slider.Track>
+        <Slider.Indicator />
+        <Slider.Thumb />
+      </Slider.Track>
+    </Slider.Control>
+  </Slider.Root>
+</Label>
+```
+
+Alternatively, use `aria-labelledby` on `<Slider.Root>` that references the `id` of a sibling element, such as a `<div>`:
 
 ```tsx title="Slider with visible label" {1,2}
 <div id="volume-label">Volume</div>
@@ -101,7 +117,7 @@ For a multi-thumb range slider with a visible label, add `aria-label` on each `<
 </Slider.Root>
 ```
 
-The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components can also be used to provide accessible labels for sliders, eliminating the need to track `id` or `aria-labelledby` associations manually. Field comes with a UX improvement to prevent double clicks from selecting the label text.
+The [Field](/react/components/field) and [Fieldset](/react/components/fieldset) components can also be used to provide accessible labels for sliders while adding validation and group-labeling support.
 
 For a single-thumb slider, use [Field](/react/components/field) to provide a visible label:
 
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.tsx
index 221c25ba82f..4c657d22eae 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.tsx
@@ -1,13 +1,14 @@
+import { Label } from '@base-ui/react/label';
 import { Switch } from '@base-ui/react/switch';
 import styles from './index.module.css';
 
 export default function ExampleSwitch() {
   return (
-    <label className={styles.Label}>
+    <Label className={styles.Label}>
       <Switch.Root defaultChecked className={styles.Switch}>
         <Switch.Thumb className={styles.Thumb} />
       </Switch.Root>
       Notifications
-    </label>
+    </Label>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 082a68f2999..b1712c1dcfa 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -1,8 +1,9 @@
+import { Label } from '@base-ui/react/label';
 import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900">
+    <Label className="flex items-center gap-2 text-base text-gray-900">
       <Switch.Root
         defaultChecked
         className="relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline-1 -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
@@ -10,6 +11,6 @@ export default function ExampleSwitch() {
         <Switch.Thumb className="aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-gray-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25" />
       </Switch.Root>
       Notifications
-    </label>
+    </Label>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/switch/page.mdx b/docs/src/app/(docs)/react/components/switch/page.mdx
index 458e2345004..d44bc01e0c7 100644
--- a/docs/src/app/(docs)/react/components/switch/page.mdx
+++ b/docs/src/app/(docs)/react/components/switch/page.mdx
@@ -12,7 +12,7 @@ import { DemoSwitchHero } from './demos/hero';
 
 ## Usage guidelines
 
-- **Form controls must have an accessible name**: It can be created using a `<label>` element or the `Field` component. See [Labeling a switch](#labeling-a-switch) and the [forms guide](/react/handbook/forms).
+- **Form controls must have an accessible name**: It can be created using a `<label>` element, the [Label](/react/components/label) component, or the `Field` component. See [Labeling a switch](#labeling-a-switch) and the [forms guide](/react/handbook/forms).
 
 ## Anatomy
 
@@ -30,16 +30,16 @@ import { Switch } from '@base-ui/react/switch';
 
 ### Labeling a switch
 
-Label a switch using an enclosing `<label>` element that wraps `<Switch.Root>`. An enclosing label is announced to screen readers when focus is on the control, and ensures that clicking on any gaps between the label and switch still toggles the control.
+Label a switch using the [Label](/react/components/label) component. It supports the same enclosing labeling pattern as a native `<label>`, so clicking on any gaps between the label text and switch still toggles the control.
 
-```tsx title="Using an enclosing label to label a switch" {1,4}
-<label>
+```tsx title="Using Label to label a switch" {1,4}
+<Label>
   <Switch.Root />
   Notifications
-</label>
+</Label>
 ```
 
-The [Field](/react/components/field) component eliminates the need to track `id` or `aria-label` associations manually. It supports both enclosing and sibling labeling patterns, along with a UX improvement to prevent double clicks from selecting the label text.
+The [Field](/react/components/field) component is an alternative that adds validation and description support.
 
 ```tsx title="Using the Field component to label a switch" {2,5}
 <Field.Root>
diff --git a/docs/src/app/(docs)/react/page.mdx b/docs/src/app/(docs)/react/page.mdx
index ee2c134cecb..13dc8245bcf 100644
--- a/docs/src/app/(docs)/react/page.mdx
+++ b/docs/src/app/(docs)/react/page.mdx
@@ -72,6 +72,7 @@ No description available
   - Fieldset
   - Form
   - Input
+  - Label
   - Menu
   - Menubar
   - Meter
diff --git a/packages/react/package.json b/packages/react/package.json
index 967a9768b42..121f2c9261d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -44,6 +44,7 @@
     "./fieldset": "./src/fieldset/index.ts",
     "./form": "./src/form/index.ts",
     "./input": "./src/input/index.ts",
+    "./label": "./src/label/index.ts",
     "./menu": "./src/menu/index.ts",
     "./menubar": "./src/menubar/index.ts",
     "./merge-props": "./src/merge-props/index.ts",
diff --git a/packages/react/src/checkbox/root/CheckboxRoot.test.tsx b/packages/react/src/checkbox/root/CheckboxRoot.test.tsx
index d975a7bca17..9fd040e4cbc 100644
--- a/packages/react/src/checkbox/root/CheckboxRoot.test.tsx
+++ b/packages/react/src/checkbox/root/CheckboxRoot.test.tsx
@@ -1000,6 +1000,19 @@ describe('<Checkbox.Root />', () => {
     expect(checkbox).to.have.attribute('aria-checked', 'false');
   });
 
+  it('sets `aria-labelledby` from a sibling label associated with the hidden input', async () => {
+    await render(
+      <div>
+        <label htmlFor="checkbox-input">Label</label>
+        <Checkbox.Root id="checkbox-input" />
+      </div>,
+    );
+
+    const label = screen.getByText('Label');
+    expect(label.id).not.to.equal('');
+    expect(screen.getByRole('checkbox')).to.have.attribute('aria-labelledby', label.id);
+  });
+
   it('can render a native button', async () => {
     const { container, user } = await render(<Checkbox.Root render={<button />} nativeButton />);
 
diff --git a/packages/react/src/checkbox/root/CheckboxRoot.tsx b/packages/react/src/checkbox/root/CheckboxRoot.tsx
index 52fce82b5ec..c892d71ea6b 100644
--- a/packages/react/src/checkbox/root/CheckboxRoot.tsx
+++ b/packages/react/src/checkbox/root/CheckboxRoot.tsx
@@ -20,6 +20,7 @@ import { useFieldItemContext } from '../../field/item/FieldItemContext';
 import { useField } from '../../field/useField';
 import { useFormContext } from '../../form/FormContext';
 import { useLabelableContext } from '../../labelable-provider/LabelableContext';
+import { useAriaLabelledBy } from '../../labelable-provider/useAriaLabelledBy';
 import { useCheckboxGroupContext } from '../../checkbox-group/CheckboxGroupContext';
 import { CheckboxRootContext } from './CheckboxRootContext';
 import {
@@ -45,6 +46,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
     checked: checkedProp,
     className,
     defaultChecked = false,
+    'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
     id: idProp,
     indeterminate = false,
@@ -176,6 +178,8 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
   const inputRef = React.useRef<HTMLInputElement>(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
 
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton);
+
   useIsoLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = groupIndeterminate;
@@ -297,7 +301,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
         'aria-checked': groupIndeterminate ? 'mixed' : checked,
         'aria-readonly': readOnly || undefined,
         'aria-required': required || undefined,
-        'aria-labelledby': labelId,
+        'aria-labelledby': ariaLabelledBy,
         [PARENT_CHECKBOX as string]: parent ? '' : undefined,
         onFocus() {
           setFocused(true);
diff --git a/packages/react/src/field/control/FieldControl.test.tsx b/packages/react/src/field/control/FieldControl.test.tsx
index 3ff4a1c3da4..9835e0bef14 100644
--- a/packages/react/src/field/control/FieldControl.test.tsx
+++ b/packages/react/src/field/control/FieldControl.test.tsx
@@ -70,4 +70,22 @@ describe('<Field.Control />', () => {
     expect(control).to.have.attribute('data-focused', '');
     expect(screen.getByText('Name')).to.have.attribute('data-focused', '');
   });
+
+  it.skipIf(isJSDOM)(
+    'sets `aria-labelledby` when sibling Field.Label is present during SSR',
+    async () => {
+      await renderToString(
+        <Field.Root>
+          <Field.Control data-testid="control" />
+          <Field.Label data-testid="label">Name</Field.Label>
+        </Field.Root>,
+      );
+
+      const control = screen.getByTestId('control');
+      const label = screen.getByTestId('label');
+
+      expect(label.id).to.not.equal('');
+      expect(control).to.have.attribute('aria-labelledby', label.id);
+    },
+  );
 });
diff --git a/packages/react/src/field/item/FieldItem.tsx b/packages/react/src/field/item/FieldItem.tsx
index a5618555958..9a6f83e103c 100644
--- a/packages/react/src/field/item/FieldItem.tsx
+++ b/packages/react/src/field/item/FieldItem.tsx
@@ -8,6 +8,7 @@ import { useRenderElement } from '../../utils/useRenderElement';
 import { FieldItemContext } from './FieldItemContext';
 import { LabelableProvider } from '../../labelable-provider';
 import { useCheckboxGroupContext } from '../../checkbox-group/CheckboxGroupContext';
+import { useBaseUiId } from '../../utils/useBaseUiId';
 
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -32,6 +33,8 @@ export const FieldItem = React.forwardRef(function FieldItem(
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
 
   const initialControlId = hasParentCheckbox ? parentId : undefined;
+  const defaultControlId = useBaseUiId();
+  const controlId = initialControlId ?? defaultControlId;
 
   const fieldItemContext: FieldItemContext = React.useMemo(() => ({ disabled }), [disabled]);
 
@@ -43,7 +46,7 @@ export const FieldItem = React.forwardRef(function FieldItem(
   });
 
   return (
-    <LabelableProvider initialControlId={initialControlId}>
+    <LabelableProvider initialControlId={controlId} generateLabelIdFromControlId={true}>
       <FieldItemContext.Provider value={fieldItemContext}>{element}</FieldItemContext.Provider>
     </LabelableProvider>
   );
diff --git a/packages/react/src/field/label/FieldLabel.test.tsx b/packages/react/src/field/label/FieldLabel.test.tsx
index 3202295c955..7da2a00493e 100644
--- a/packages/react/src/field/label/FieldLabel.test.tsx
+++ b/packages/react/src/field/label/FieldLabel.test.tsx
@@ -80,7 +80,7 @@ describe('<Field.Label />', () => {
       expect(errorSpy).toHaveBeenCalledTimes(1);
       expect(errorSpy).toHaveBeenCalledWith(
         expect.stringContaining(
-          'Base UI: <Field.Label> expected a <label> element because the `nativeLabel` prop is true. ' +
+          'Base UI: Expected a <label> element because the `nativeLabel` prop is true. ' +
             'Rendering a non-<label> disables native label association, so `htmlFor` will not ' +
             'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.',
         ),
@@ -104,7 +104,7 @@ describe('<Field.Label />', () => {
       expect(errorSpy).toHaveBeenCalledTimes(1);
       expect(errorSpy).toHaveBeenCalledWith(
         expect.stringContaining(
-          'Base UI: <Field.Label> expected a non-<label> element because the `nativeLabel` prop is false. ' +
+          'Base UI: Expected a non-<label> element because the `nativeLabel` prop is false. ' +
             'Rendering a <label> assumes native label behavior while Base UI treats it as ' +
             'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' +
             '`render` prop, or set `nativeLabel` to `true`.',
diff --git a/packages/react/src/field/label/FieldLabel.tsx b/packages/react/src/field/label/FieldLabel.tsx
index ac0de40fbc9..bfa98944ae3 100644
--- a/packages/react/src/field/label/FieldLabel.tsx
+++ b/packages/react/src/field/label/FieldLabel.tsx
@@ -1,19 +1,11 @@
 'use client';
 import * as React from 'react';
-import { error } from '@base-ui/utils/error';
-import { SafeReact } from '@base-ui/utils/safeReact';
-import { isHTMLElement } from '@floating-ui/utils/dom';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getTarget } from '../../floating-ui-react/utils';
-import { FieldRoot } from '../root/FieldRoot';
 import { useFieldRootContext } from '../root/FieldRootContext';
-import { useLabelableContext } from '../../labelable-provider/LabelableContext';
 import { fieldValidityMapping } from '../utils/constants';
-import { useBaseUiId } from '../../utils/useBaseUiId';
 import type { BaseUIComponentProps } from '../../utils/types';
+import type { FieldRoot } from '../root/FieldRoot';
 import { useRenderElement } from '../../utils/useRenderElement';
+import { useLabel } from '../../label/useLabel';
 
 /**
  * An accessible label that is automatically associated with the field control.
@@ -29,96 +21,15 @@ export const FieldLabel = React.forwardRef(function FieldLabel(
 
   const fieldRootContext = useFieldRootContext(false);
 
-  const { controlId, setLabelId, labelId } = useLabelableContext();
-
-  const id = useBaseUiId(idProp);
-
-  const labelRef = React.useRef<HTMLElement | null>(null);
-
-  const handleInteraction = useStableCallback((event: React.MouseEvent) => {
-    const target = getTarget(event.nativeEvent) as HTMLElement | null;
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-
-    if (nativeLabel || !controlId) {
-      return;
-    }
-
-    const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
-    if (isHTMLElement(controlElement)) {
-      controlElement.focus({
-        // Available from Chrome 144+ (January 2026).
-        // Safari and Firefox already support it.
-        // @ts-expect-error not available in types yet
-        focusVisible: true,
-      });
-    }
+  const { labelRef, labelId, interactionProps } = useLabel({
+    id: idProp,
+    nativeLabel,
   });
 
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!labelRef.current) {
-        return;
-      }
-
-      const isLabelTag = labelRef.current.tagName === 'LABEL';
-
-      if (nativeLabel) {
-        if (!isLabelTag) {
-          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
-          const message =
-            '<Field.Label> expected a <label> element because the `nativeLabel` prop is true. ' +
-            'Rendering a non-<label> disables native label association, so `htmlFor` will not ' +
-            'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.';
-          error(`${message}${ownerStackMessage}`);
-        }
-      } else if (isLabelTag) {
-        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
-        const message =
-          '<Field.Label> expected a non-<label> element because the `nativeLabel` prop is false. ' +
-          'Rendering a <label> assumes native label behavior while Base UI treats it as ' +
-          'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' +
-          '`render` prop, or set `nativeLabel` to `true`.';
-        error(`${message}${ownerStackMessage}`);
-      }
-    }, [nativeLabel]);
-  }
-
-  useIsoLayoutEffect(() => {
-    if (id) {
-      setLabelId(id);
-    }
-
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
-
   const element = useRenderElement('label', componentProps, {
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
-    props: [
-      { id: labelId },
-      nativeLabel
-        ? {
-            htmlFor: controlId ?? undefined,
-            onMouseDown: handleInteraction,
-          }
-        : {
-            onClick: handleInteraction,
-            onPointerDown(event) {
-              event.preventDefault();
-            },
-          },
-      elementProps,
-    ],
+    props: [{ id: labelId }, interactionProps, elementProps],
     stateAttributesMapping: fieldValidityMapping,
   });
 
diff --git a/packages/react/src/field/root/FieldRoot.tsx b/packages/react/src/field/root/FieldRoot.tsx
index edd6ebcbfd5..697297aa95a 100644
--- a/packages/react/src/field/root/FieldRoot.tsx
+++ b/packages/react/src/field/root/FieldRoot.tsx
@@ -9,6 +9,7 @@ import { useFormContext } from '../../form/FormContext';
 import { LabelableProvider } from '../../labelable-provider';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
+import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useFieldValidation } from './useFieldValidation';
 
 /**
@@ -187,8 +188,10 @@ export const FieldRoot = React.forwardRef(function FieldRoot(
   componentProps: FieldRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
+  const defaultControlId = useBaseUiId();
+
   return (
-    <LabelableProvider>
+    <LabelableProvider initialControlId={defaultControlId} generateLabelIdFromControlId={true}>
       <FieldRootInner {...componentProps} ref={forwardedRef} />
     </LabelableProvider>
   );
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index bb4ac0fb172..4311db28ad5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -16,6 +16,7 @@ export * from './field';
 export * from './fieldset';
 export * from './form';
 export * from './input';
+export * from './label';
 export * from './menu';
 export * from './menubar';
 export * from './merge-props';
diff --git a/packages/react/src/label/Label.test.tsx b/packages/react/src/label/Label.test.tsx
new file mode 100644
index 00000000000..3d1bf3addae
--- /dev/null
+++ b/packages/react/src/label/Label.test.tsx
@@ -0,0 +1,169 @@
+import { Checkbox } from '@base-ui/react/checkbox';
+import { Field } from '@base-ui/react/field';
+import { Label } from '@base-ui/react/label';
+import { screen } from '@mui/internal-test-utils';
+import { expect } from 'vitest';
+import { createRenderer, describeConformance, isJSDOM } from '#test-utils';
+
+describe('<Label />', () => {
+  const { render, renderToString } = createRenderer();
+
+  describeConformance(<Label />, () => ({
+    render,
+    refInstanceof: window.HTMLLabelElement,
+    testRenderPropWith: 'label',
+  }));
+
+  it('sets `aria-labelledby` on the associated control automatically', async () => {
+    await render(
+      <Field.Root>
+        <Field.Control data-testid="control" />
+        <Label data-testid="label">Label</Label>
+      </Field.Root>,
+    );
+
+    const label = screen.getByTestId('label');
+    const control = screen.getByTestId('control');
+
+    expect(label.id).not.to.equal('');
+    expect(control).to.have.attribute('aria-labelledby', label.id);
+  });
+
+  it('sets id on the label and `aria-labelledby` on a wrapped control', async () => {
+    await render(
+      <Label data-testid="label">
+        <Checkbox.Root data-testid="control" />
+        Label
+      </Label>,
+    );
+
+    const label = screen.getByTestId('label');
+    const control = screen.getByTestId('control');
+
+    expect(label.id).not.to.equal('');
+    expect(control).to.have.attribute('aria-labelledby', label.id);
+  });
+
+  it.skipIf(isJSDOM)('sets `aria-labelledby` on a wrapped control during SSR', async () => {
+    await renderToString(
+      <Label data-testid="label">
+        <Checkbox.Root data-testid="control" />
+        Label
+      </Label>,
+    );
+
+    const label = screen.getByTestId('label');
+    const control = screen.getByTestId('control');
+
+    expect(label.id).not.to.equal('');
+    expect(control).to.have.attribute('aria-labelledby', label.id);
+  });
+
+  it('sets htmlFor and id from the associated control id and the explicit id prop', async () => {
+    await render(
+      <Field.Root>
+        <Field.Control id="control" />
+        <Label data-testid="label" id="label-id">
+          Label
+        </Label>
+      </Field.Root>,
+    );
+
+    const label = screen.getByTestId('label');
+
+    expect(label).to.have.attribute('id', 'label-id');
+    expect(label).to.have.attribute('for', 'control');
+  });
+
+  it('when nativeLabel={false}, clicking focuses the associated control', async () => {
+    const { user } = await render(
+      <Field.Root>
+        <Field.Control data-testid="control" />
+        <Label nativeLabel={false} render={<div />} data-testid="label">
+          Label
+        </Label>
+      </Field.Root>,
+    );
+
+    const label = screen.getByTestId('label');
+    const control = screen.getByTestId('control');
+
+    expect(label).to.not.have.attribute('for');
+
+    await user.click(label);
+    expect(control).toHaveFocus();
+  });
+
+  it('when nativeLabel={false}, does not prevent interactions on interactive descendants', async () => {
+    const handleClick = vi.fn();
+
+    const { user } = await render(
+      <Label nativeLabel={false} render={<div />}>
+        <button data-testid="button" type="button" onClick={handleClick}>
+          Open
+        </button>
+      </Label>,
+    );
+
+    await user.click(screen.getByTestId('button'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  describe('dev warnings', () => {
+    it('does not warn by default', async () => {
+      const errorSpy = vi
+        .spyOn(console, 'error')
+        .mockName('console.error')
+        .mockImplementation(() => {});
+
+      await render(<Label>Label</Label>);
+
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    });
+
+    it('errors if nativeLabel=true but ref is not a label', async () => {
+      const errorSpy = vi
+        .spyOn(console, 'error')
+        .mockName('console.error')
+        .mockImplementation(() => {});
+
+      await render(
+        <Label nativeLabel render={<div />}>
+          Label
+        </Label>,
+      );
+
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'Base UI: Expected a <label> element because the `nativeLabel` prop is true. ' +
+            'Rendering a non-<label> disables native label association, so `htmlFor` will not ' +
+            'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.',
+        ),
+      );
+      errorSpy.mockRestore();
+    });
+
+    it('errors if nativeLabel=false but ref is a label', async () => {
+      const errorSpy = vi
+        .spyOn(console, 'error')
+        .mockName('console.error')
+        .mockImplementation(() => {});
+
+      await render(<Label nativeLabel={false}>Label</Label>);
+
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'Base UI: Expected a non-<label> element because the `nativeLabel` prop is false. ' +
+            'Rendering a <label> assumes native label behavior while Base UI treats it as ' +
+            'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' +
+            '`render` prop, or set `nativeLabel` to `true`.',
+        ),
+      );
+      errorSpy.mockRestore();
+    });
+  });
+});
diff --git a/packages/react/src/label/Label.tsx b/packages/react/src/label/Label.tsx
new file mode 100644
index 00000000000..42f8b511dd2
--- /dev/null
+++ b/packages/react/src/label/Label.tsx
@@ -0,0 +1,70 @@
+'use client';
+import * as React from 'react';
+import { LabelableProvider } from '../labelable-provider/LabelableProvider';
+import { useLabelableContext } from '../labelable-provider/LabelableContext';
+import { NOOP } from '../utils/noop';
+import type { BaseUIComponentProps } from '../utils/types';
+import { useRenderElement } from '../utils/useRenderElement';
+import { useLabel } from './useLabel';
+
+/**
+ * An accessible label that can be associated with labelable controls.
+ * Renders a `<label>` element.
+ *
+ * Documentation: [Base UI Label](https://base-ui.com/react/components/label)
+ */
+const LabelInner = React.forwardRef(function LabelInner(
+  componentProps: Label.Props,
+  forwardedRef: React.ForwardedRef<HTMLElement>,
+) {
+  const { render, className, id: idProp, nativeLabel = true, ...elementProps } = componentProps;
+
+  const { labelRef, labelId, interactionProps } = useLabel({
+    id: idProp,
+    nativeLabel,
+  });
+
+  const element = useRenderElement('label', componentProps, {
+    ref: [forwardedRef, labelRef],
+    props: [{ id: labelId ?? idProp }, interactionProps, elementProps],
+  });
+
+  return element;
+});
+
+export const Label = React.forwardRef(function Label(
+  componentProps: Label.Props,
+  forwardedRef: React.ForwardedRef<HTMLElement>,
+) {
+  const { id: idProp } = componentProps;
+  const labelableContext = useLabelableContext();
+  const hasLabelableContext = labelableContext.registerControlId !== NOOP;
+
+  if (hasLabelableContext) {
+    return <LabelInner {...componentProps} ref={forwardedRef} />;
+  }
+
+  return (
+    <LabelableProvider initialLabelId={idProp} generateLabelIdFromControlId={idProp == null}>
+      <LabelInner {...componentProps} ref={forwardedRef} />
+    </LabelableProvider>
+  );
+});
+
+export interface LabelState {}
+
+export interface LabelProps extends BaseUIComponentProps<'label', Label.State> {
+  /**
+   * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
+   * Set to `false` if the rendered element is not a label (e.g. `<div>`).
+   *
+   * This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
+   * @default true
+   */
+  nativeLabel?: boolean | undefined;
+}
+
+export namespace Label {
+  export type State = LabelState;
+  export type Props = LabelProps;
+}
diff --git a/packages/react/src/label/index.ts b/packages/react/src/label/index.ts
new file mode 100644
index 00000000000..eab6f0e6ef6
--- /dev/null
+++ b/packages/react/src/label/index.ts
@@ -0,0 +1,3 @@
+export { Label } from './Label';
+
+export type * from './Label';
diff --git a/packages/react/src/label/useLabel.ts b/packages/react/src/label/useLabel.ts
new file mode 100644
index 00000000000..842108711d9
--- /dev/null
+++ b/packages/react/src/label/useLabel.ts
@@ -0,0 +1,133 @@
+'use client';
+import * as React from 'react';
+import { error } from '@base-ui/utils/error';
+import { SafeReact } from '@base-ui/utils/safeReact';
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { getTarget } from '../floating-ui-react/utils';
+import { useLabelableContext } from '../labelable-provider/LabelableContext';
+import { useBaseUiId } from '../utils/useBaseUiId';
+
+const INTERACTIVE_SELECTOR = 'button,input,select,textarea';
+
+/**
+ * @internal
+ */
+export function useLabel(params: UseLabelParameters): UseLabelReturnValue {
+  const { id: idProp, nativeLabel } = params;
+
+  const { controlId, labelId: contextLabelId, setLabelId } = useLabelableContext();
+
+  const generatedLabelId = useBaseUiId(idProp);
+  const labelId = idProp ?? contextLabelId ?? generatedLabelId;
+
+  const labelRef = React.useRef<HTMLElement | null>(null);
+
+  function handleMouseDown(event: React.MouseEvent) {
+    // Prevent text selection when double clicking label.
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault();
+    }
+  }
+
+  const handleClick = useStableCallback(function handleClick(event: React.MouseEvent) {
+    const target = getTarget(event.nativeEvent) as HTMLElement | null;
+    if (isInteractiveTarget(target)) {
+      return;
+    }
+
+    handleMouseDown(event);
+
+    if (!controlId) {
+      return;
+    }
+
+    const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
+    if (isHTMLElement(controlElement)) {
+      controlElement.focus({
+        // Available from Chrome 144+ (January 2026).
+        // Safari and Firefox already support it.
+        // @ts-expect-error not available in types yet
+        focusVisible: true,
+      });
+    }
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!labelRef.current) {
+        return;
+      }
+
+      const isLabelTag = labelRef.current.tagName === 'LABEL';
+
+      if (nativeLabel) {
+        if (!isLabelTag) {
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+          const message =
+            'Expected a <label> element because the `nativeLabel` prop is true. ' +
+            'Rendering a non-<label> disables native label association, so `htmlFor` will not ' +
+            'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.';
+          error(`${message}${ownerStackMessage}`);
+        }
+      } else if (isLabelTag) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        const message =
+          'Expected a non-<label> element because the `nativeLabel` prop is false. ' +
+          'Rendering a <label> assumes native label behavior while Base UI treats it as ' +
+          'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' +
+          '`render` prop, or set `nativeLabel` to `true`.';
+        error(`${message}${ownerStackMessage}`);
+      }
+    }, [nativeLabel]);
+  }
+
+  useIsoLayoutEffect(() => {
+    setLabelId(labelId);
+
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [labelId, setLabelId]);
+
+  const interactionProps: React.ComponentProps<'label'> = nativeLabel
+    ? {
+        htmlFor: controlId ?? undefined,
+        onMouseDown: handleMouseDown,
+      }
+    : {
+        onClick: handleClick,
+        onPointerDown(event) {
+          const target = getTarget(event.nativeEvent) as HTMLElement | null;
+          if (isInteractiveTarget(target)) {
+            return;
+          }
+
+          event.preventDefault();
+        },
+      };
+
+  return {
+    labelRef,
+    labelId,
+    interactionProps,
+  };
+}
+
+interface UseLabelParameters {
+  id?: string | undefined;
+  nativeLabel: boolean;
+}
+
+interface UseLabelReturnValue {
+  labelRef: React.RefObject<HTMLElement | null>;
+  labelId: string | undefined;
+  interactionProps: React.ComponentProps<'label'>;
+}
+
+function isInteractiveTarget(target: HTMLElement | null): boolean {
+  return target?.closest(INTERACTIVE_SELECTOR) != null;
+}
diff --git a/packages/react/src/labelable-provider/LabelableProvider.tsx b/packages/react/src/labelable-provider/LabelableProvider.tsx
index 9dee01050af..faa4cf8a660 100644
--- a/packages/react/src/labelable-provider/LabelableProvider.tsx
+++ b/packages/react/src/labelable-provider/LabelableProvider.tsx
@@ -14,11 +14,15 @@ export const LabelableProvider: React.FC<LabelableProvider.Props> = function Lab
   props,
 ) {
   const defaultId = useBaseUiId();
+  const defaultLabelId =
+    props.generateLabelIdFromControlId && defaultId ? `${defaultId}-label` : undefined;
 
   const [controlId, setControlIdState] = React.useState<string | null | undefined>(
     props.initialControlId === undefined ? defaultId : props.initialControlId,
   );
-  const [labelId, setLabelId] = React.useState<string | undefined>(undefined);
+  const [labelId, setLabelId] = React.useState<string | undefined>(
+    props.initialLabelId ?? defaultLabelId,
+  );
   const [messageIds, setMessageIds] = React.useState<string[]>([]);
 
   const registrationsRef = useRefWithInit(() => new Map<symbol, string | null>());
@@ -99,6 +103,8 @@ export const LabelableProvider: React.FC<LabelableProvider.Props> = function Lab
 
 export interface LabelableProviderProps {
   initialControlId?: string | null | undefined;
+  initialLabelId?: string | undefined;
+  generateLabelIdFromControlId?: boolean | undefined;
   children?: React.ReactNode;
 }
 
diff --git a/packages/react/src/labelable-provider/useAriaLabelledBy.ts b/packages/react/src/labelable-provider/useAriaLabelledBy.ts
new file mode 100644
index 00000000000..9956bf34c6d
--- /dev/null
+++ b/packages/react/src/labelable-provider/useAriaLabelledBy.ts
@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useBaseUiId } from '../utils/useBaseUiId';
+
+/**
+ * @internal
+ */
+export function useAriaLabelledBy(
+  explicitAriaLabelledBy: string | undefined,
+  labelId: string | undefined,
+  labelSourceRef: React.RefObject<LabelSource | null>,
+  enableFallback: boolean = true,
+) {
+  const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React.useState<string | undefined>();
+  const generatedLabelId = useBaseUiId();
+  const ariaLabelledBy = explicitAriaLabelledBy ?? labelId ?? fallbackAriaLabelledBy;
+
+  // Fallback for custom controls labelled via a sibling native <label htmlFor=...>.
+  // We derive the label id in a layout effect for the non-native control fallback path.
+  useIsoLayoutEffect(() => {
+    if (explicitAriaLabelledBy || labelId || !enableFallback) {
+      if (fallbackAriaLabelledBy !== undefined) {
+        setFallbackAriaLabelledBy(undefined);
+      }
+      return;
+    }
+
+    const nextAriaLabelledBy = getAriaLabelledBy(labelSourceRef.current?.labels, generatedLabelId);
+    if (fallbackAriaLabelledBy !== nextAriaLabelledBy) {
+      setFallbackAriaLabelledBy(nextAriaLabelledBy);
+    }
+  }, [
+    explicitAriaLabelledBy,
+    labelId,
+    labelSourceRef,
+    enableFallback,
+    generatedLabelId,
+    fallbackAriaLabelledBy,
+  ]);
+
+  return ariaLabelledBy;
+}
+
+function getAriaLabelledBy(
+  labels: NodeListOf<HTMLLabelElement> | null | undefined,
+  generatedLabelId: string | undefined,
+) {
+  if (!labels || labels.length === 0) {
+    return undefined;
+  }
+
+  const firstLabel = labels[0];
+  const firstLabelId = firstLabel.id;
+
+  if (firstLabelId.length > 0) {
+    return firstLabelId;
+  }
+
+  if (!generatedLabelId) {
+    return undefined;
+  }
+
+  firstLabel.id = generatedLabelId;
+  return generatedLabelId;
+}
+
+type LabelSource = HTMLElement & { labels?: NodeListOf<HTMLLabelElement> | null | undefined };
diff --git a/packages/react/src/radio/root/RadioRoot.test.tsx b/packages/react/src/radio/root/RadioRoot.test.tsx
index b67dfbeb7b7..04c77da7110 100644
--- a/packages/react/src/radio/root/RadioRoot.test.tsx
+++ b/packages/react/src/radio/root/RadioRoot.test.tsx
@@ -66,6 +66,21 @@ describe('<Radio.Root />', () => {
     expect(radioA).to.have.attribute('aria-checked', 'true');
   });
 
+  it('sets `aria-labelledby` from a sibling label associated with the hidden input', async () => {
+    await render(
+      <div>
+        <label htmlFor="radio-input">Label</label>
+        <RadioGroup>
+          <Radio.Root value="a" id="radio-input" />
+        </RadioGroup>
+      </div>,
+    );
+
+    const label = screen.getByText('Label');
+    expect(label.id).not.to.equal('');
+    expect(screen.getByRole('radio')).to.have.attribute('aria-labelledby', label.id);
+  });
+
   describe('prop: disabled', () => {
     it('uses aria-disabled instead of HTML disabled', async () => {
       await render(
diff --git a/packages/react/src/radio/root/RadioRoot.tsx b/packages/react/src/radio/root/RadioRoot.tsx
index 8083bf89505..0bacadc569a 100644
--- a/packages/react/src/radio/root/RadioRoot.tsx
+++ b/packages/react/src/radio/root/RadioRoot.tsx
@@ -19,6 +19,7 @@ import type { FieldRoot } from '../../field/root/FieldRoot';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
 import { useFieldItemContext } from '../../field/item/FieldItemContext';
 import { useLabelableContext } from '../../labelable-provider/LabelableContext';
+import { useAriaLabelledBy } from '../../labelable-provider/useAriaLabelledBy';
 import { useLabelableId } from '../../labelable-provider/useLabelableId';
 import { useRadioGroupContext } from '../../radio-group/RadioGroupContext';
 import { serializeValue } from '../../utils/serializeValue';
@@ -40,6 +41,7 @@ export const RadioRoot = React.forwardRef(function RadioRoot<Value>(
     disabled: disabledProp = false,
     readOnly: readOnlyProp = false,
     required: requiredProp = false,
+    'aria-labelledby': ariaLabelledByProp,
     value,
     inputRef: inputRefProp,
     nativeButton = false,
@@ -125,12 +127,14 @@ export const RadioRoot = React.forwardRef(function RadioRoot<Value>(
   });
   const hiddenInputId = nativeButton ? undefined : inputId;
 
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton);
+
   const rootProps: React.ComponentPropsWithRef<'span'> = {
     role: 'radio',
     'aria-checked': checked,
     'aria-required': required || undefined,
     'aria-readonly': readOnly || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     [ACTIVE_COMPOSITE_ITEM as string]: checked ? '' : undefined,
     id: nativeButton ? inputId : id,
     onKeyDown(event) {
diff --git a/packages/react/src/switch/root/SwitchRoot.test.tsx b/packages/react/src/switch/root/SwitchRoot.test.tsx
index a53c67afc28..24799ca094e 100644
--- a/packages/react/src/switch/root/SwitchRoot.test.tsx
+++ b/packages/react/src/switch/root/SwitchRoot.test.tsx
@@ -93,6 +93,19 @@ describe('<Switch.Root />', () => {
       await render(<Switch.Root role="checkbox" data-testid="switch" />);
       expect(screen.getByTestId('switch')).to.have.attribute('role', 'checkbox');
     });
+
+    it('sets `aria-labelledby` from a sibling label associated with the hidden input', async () => {
+      await render(
+        <div>
+          <label htmlFor="switch-input">Label</label>
+          <Switch.Root id="switch-input" />
+        </div>,
+      );
+
+      const label = screen.getByText('Label');
+      expect(label.id).not.to.equal('');
+      expect(screen.getByRole('switch')).to.have.attribute('aria-labelledby', label.id);
+    });
   });
 
   describe('prop: onCheckedChange', () => {
diff --git a/packages/react/src/switch/root/SwitchRoot.tsx b/packages/react/src/switch/root/SwitchRoot.tsx
index 57c8b5bccab..41c8765b130 100644
--- a/packages/react/src/switch/root/SwitchRoot.tsx
+++ b/packages/react/src/switch/root/SwitchRoot.tsx
@@ -18,6 +18,7 @@ import type { FieldRoot } from '../../field/root/FieldRoot';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
 import { useFormContext } from '../../form/FormContext';
 import { useLabelableContext } from '../../labelable-provider/LabelableContext';
+import { useAriaLabelledBy } from '../../labelable-provider/useAriaLabelledBy';
 import { useLabelableId } from '../../labelable-provider/useLabelableId';
 import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails';
 import { REASONS } from '../../utils/reasons';
@@ -38,6 +39,7 @@ export const SwitchRoot = React.forwardRef(function SwitchRoot(
     checked: checkedProp,
     className,
     defaultChecked,
+    'aria-labelledby': ariaLabelledByProp,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -126,13 +128,15 @@ export const SwitchRoot = React.forwardRef(function SwitchRoot(
     native: nativeButton,
   });
 
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton);
+
   const rootProps: React.ComponentPropsWithRef<'span'> = {
     id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     onFocus() {
       if (!disabled) {
         setFocused(true);