diff --git a/packages/web-react/src/components/Checkbox/Checkbox.tsx b/packages/web-react/src/components/Checkbox/Checkbox.tsx
index 276fe16bb1..2023c4843a 100644
--- a/packages/web-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/web-react/src/components/Checkbox/Checkbox.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritCheckboxProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { useCheckboxStyleProps } from './useCheckboxStyleProps';
 
@@ -33,7 +33,11 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
   });
 
   return (
-    <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <input
         {...otherProps}
         aria-describedby={ids.join(' ')}
@@ -47,7 +51,9 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
         ref={ref}
       />
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -66,7 +72,7 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
           />
         )}
       </span>
-    </label>
+    </Label>
   );
 };
 
diff --git a/packages/web-react/src/components/Field/Label.tsx b/packages/web-react/src/components/Field/Label.tsx
new file mode 100644
index 0000000000..18b7328267
--- /dev/null
+++ b/packages/web-react/src/components/Field/Label.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import React, { ElementType } from 'react';
+import { useStyleProps } from '../../hooks';
+import { SpiritLabelProps } from '../../types';
+
+const Label = <T extends ElementType = 'label'>(props: SpiritLabelProps<T>): JSX.Element => {
+  const { elementType: ElementTag = 'label', children, htmlFor, for: labelFor, ...restProps } = props;
+  const { styleProps, props: otherProps } = useStyleProps(restProps);
+
+  return (
+    <ElementTag {...otherProps} {...styleProps} htmlFor={ElementTag === 'label' ? labelFor || htmlFor : undefined}>
+      {children}
+    </ElementTag>
+  );
+};
+
+export default Label;
diff --git a/packages/web-react/src/components/Field/README.md b/packages/web-react/src/components/Field/README.md
index ce6eb22e9f..af16dd6215 100644
--- a/packages/web-react/src/components/Field/README.md
+++ b/packages/web-react/src/components/Field/README.md
@@ -63,4 +63,38 @@ Advanced example:
 | `helperText`  | \[`ReactNode` \| `ReactNode[]`] | —       | ✕        | Validation text, only visible if validationState is                                            |
 | `id`          | `string`                        | —       | ✕        | Component id                                                                                   |
 
+## Label
+
+The `Label` component is used to associate text with a form control, such as an input, checkbox, or radio button.
+It improves accessibility by allowing users to click the label to interact with the corresponding input.
+This component can be customized using various props to fit different use cases.
+
+Simple Label example:
+
+```jsx
+<Label>Label content</Label>
+```
+
+### Full Example
+
+```jsx
+<Label elementType="span" htmlFor="input-id">
+  Label content
+</Label>
+```
+
+### API
+
+| Name          | Type          | Default | Required | Description                                     |
+| ------------- | ------------- | ------- | -------- | ----------------------------------------------- |
+| `elementType` | `ElementType` | `label` | ✕        | Type of element used as wrapper                 |
+| `htmlFor`     | `string`      | —       | ✕        | ID of the associated form element (e.g., input) |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
 [aria-alert-role]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
diff --git a/packages/web-react/src/components/Field/__tests__/Label.test.tsx b/packages/web-react/src/components/Field/__tests__/Label.test.tsx
new file mode 100644
index 0000000000..b197d70606
--- /dev/null
+++ b/packages/web-react/src/components/Field/__tests__/Label.test.tsx
@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { restPropsTest, stylePropsTest } from '@local/tests';
+import { SpiritLabelProps } from '../../../types';
+import Label from '../Label';
+
+describe('Label', () => {
+  stylePropsTest(Label);
+
+  restPropsTest((props: SpiritLabelProps) => <Label {...props} />, 'label');
+
+  it('should render children', () => {
+    const label = 'Label';
+    render(<Label data-testid="test">{label}</Label>);
+
+    expect(screen.getByTestId('test')).toHaveTextContent(label);
+  });
+
+  it('should render as span', () => {
+    render(<Label data-testid="test" elementType="span" />);
+
+    expect(screen.getByTestId('test')).toContainHTML('span');
+  });
+});
diff --git a/packages/web-react/src/components/Field/index.ts b/packages/web-react/src/components/Field/index.ts
index b455646ca4..fbbb485336 100644
--- a/packages/web-react/src/components/Field/index.ts
+++ b/packages/web-react/src/components/Field/index.ts
@@ -1,6 +1,7 @@
 'use client';
 
 export { default as HelperText } from './HelperText';
+export { default as Label } from './Label';
 export { default as useAriaIds } from './useAriaIds';
 export { default as ValidationText } from './ValidationText';
 export * from './useAriaIds';
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
index 31575d051f..033eae3607 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritFileUploaderInputProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { Icon } from '../Icon';
 import { DEFAULT_FILE_QUEUE_LIMIT, DEFAULT_FILE_SIZE_LIMIT } from './constants';
@@ -85,9 +85,9 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
       onDrop={!isDisabled && isDragAndDropSupported ? onDrop : undefined}
       className={classNames(classProps.input.root, styleProps.className)}
     >
-      <label htmlFor={id} className={classProps.input.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.input.label}>
         {label}
-      </label>
+      </Label>
       <input
         aria-describedby={ids.join(' ')}
         type="file"
@@ -102,11 +102,11 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
       />
       <div ref={dropZoneRef} className={classProps.input.dropZone.root}>
         <Icon name={iconName} aria-hidden="true" />
-        <label htmlFor={id} className={classProps.input.dropZone.label}>
+        <Label htmlFor={id} UNSAFE_className={classProps.input.dropZone.label}>
           <span className={classProps.input.link}>{linkText}</span>
           &nbsp;
           <span className={classProps.input.dropLabel}>{labelText}</span>
-        </label>
+        </Label>
         <HelperText
           className={classProps.input.helper}
           id={`${id}__helperText`}
diff --git a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
index 285e0bd99f..4bae748f5f 100644
--- a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
@@ -4,6 +4,7 @@ import {
   Checkbox,
   Grid,
   GridItem,
+  Label,
   Modal,
   ModalBody,
   ModalDialog,
@@ -237,17 +238,17 @@ const ModalScrollingLongContent = () => {
                     }
                   />
                   <Grid UNSAFE_style={{ columnGap: 'var(--spirit-space-600)' }}>
-                    <label
-                      className="GridItem"
+                    <Label
+                      UNSAFE_className="GridItem"
                       htmlFor={`custom-height-${breakpoint}`}
-                      style={{
+                      UNSAFE_style={{
                         ['--grid-item-column-start' as string]: 1,
                         ['--grid-item-column-end' as string]: 6,
                         ['--grid-item-column-end-tablet' as string]: 4,
                       }}
                     >
                       Height
-                    </label>
+                    </Label>
                     <GridItem
                       columnStart={{ mobile: 6, tablet: 4 }}
                       columnEnd={{ mobile: 13, tablet: 7 }}
@@ -274,17 +275,17 @@ const ModalScrollingLongContent = () => {
                     />
                   </Grid>
                   <Grid UNSAFE_style={{ columnGap: 'var(--spirit-space-600)' }}>
-                    <label
-                      className="GridItem"
+                    <Label
+                      UNSAFE_className="GridItem"
                       htmlFor={`custom-max-height-${breakpoint}`}
-                      style={{
+                      UNSAFE_style={{
                         ['--grid-item-column-start' as string]: 1,
                         ['--grid-item-column-end' as string]: 6,
                         ['--grid-item-column-end-tablet' as string]: 4,
                       }}
                     >
                       Max height
-                    </label>
+                    </Label>
                     <GridItem
                       columnStart={{ mobile: 6, tablet: 4 }}
                       columnEnd={{ mobile: 13, tablet: 7 }}
diff --git a/packages/web-react/src/components/Radio/Radio.tsx b/packages/web-react/src/components/Radio/Radio.tsx
index 357b3e2ee3..59aca71671 100644
--- a/packages/web-react/src/components/Radio/Radio.tsx
+++ b/packages/web-react/src/components/Radio/Radio.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import classNames from 'classnames';
-import React, { forwardRef, ForwardedRef } from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritRadioProps } from '../../types';
-import { HelperText, useAriaIds } from '../Field';
+import { HelperText, Label, useAriaIds } from '../Field';
 import { useRadioStyleProps } from './useRadioStyleProps';
 
 /* We need an exception for components exported with forwardRef */
@@ -27,7 +27,11 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
   const [ids, register] = useAriaIds(ariaDescribedBy);
 
   return (
-    <label htmlFor={id} {...styleProps} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <input
         {...otherProps}
         aria-describedby={ids.join(' ')}
@@ -41,7 +45,9 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
         ref={ref}
       />
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -50,7 +56,7 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
           helperText={helperText}
         />
       </span>
-    </label>
+    </Label>
   );
 };
 
diff --git a/packages/web-react/src/components/Select/Select.tsx b/packages/web-react/src/components/Select/Select.tsx
index 1717c33667..2b803e35f5 100644
--- a/packages/web-react/src/components/Select/Select.tsx
+++ b/packages/web-react/src/components/Select/Select.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritSelectProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { Icon } from '../Icon';
 import { useSelectStyleProps } from './useSelectStyleProps';
@@ -37,9 +37,9 @@ const _Select = (props: SpiritSelectProps, ref: ForwardedRef<HTMLSelectElement>)
 
   return (
     <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <div className={classProps.container}>
         <select
           {...transferProps}
diff --git a/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx b/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
index ecfd6599bb..8d993d6e25 100644
--- a/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
+++ b/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritTextFieldBaseProps, TextFieldBasePasswordToggleProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import TextFieldBaseInput from './TextFieldBaseInput';
 import { useTextFieldBaseStyleProps } from './useTextFieldBaseStyleProps';
@@ -36,9 +36,9 @@ const _TextFieldBase = (props: SpiritTextFieldBaseProps, ref: ForwardedRef<HTMLI
 
   return (
     <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <TextFieldBaseInputWithPasswordToggle id={id} ref={ref} aria-describedby={ids.join(' ')} {...otherProps} />
       <HelperText
         className={classProps.helperText}
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
index 4707d666de..0b72e038c1 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { CSSProperties, ChangeEvent, FormEvent, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritSliderProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { SLIDER_DEFAULT_PROPS } from './constants';
 import { useSliderStyleProps } from './useSliderStyleProps';
@@ -53,9 +53,9 @@ const _UnstableSlider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputEl
 
   return (
     <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <input
         aria-describedby={ids.join(' ')}
         className={classProps.input}
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
index d34827a578..fd19f479f3 100644
--- a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef, useState } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritToggleProps } from '../../types';
-import { HelperText, useAriaIds, ValidationText } from '../Field';
+import { HelperText, Label, useAriaIds, ValidationText } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { useToggleStyleProps } from './useToggleStyleProps';
 
@@ -40,9 +40,15 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
   };
 
   return (
-    <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -72,7 +78,7 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
         onChange={handleOnChange}
         ref={ref}
       />
-    </label>
+    </Label>
   );
 };
 
diff --git a/packages/web-react/src/types/label.ts b/packages/web-react/src/types/label.ts
index 47fcd30ebc..078ad7bb36 100644
--- a/packages/web-react/src/types/label.ts
+++ b/packages/web-react/src/types/label.ts
@@ -1,7 +1,23 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
+import { StyleProps, TransferProps } from './shared';
+
+export type LabelElementProps<E extends ElementType> = {
+  /**
+   * The HTML element or React element used to render the label, e.g. 'label'.
+   *
+   * @default 'label'
+   */
+  elementType?: E;
+};
 
 export interface LabelProps {
   children?: ReactNode;
   htmlFor?: string; // for compatibility with React
   for?: string;
 }
+
+export interface SpiritLabelProps<T extends ElementType = 'label'>
+  extends LabelElementProps<T>,
+    LabelProps,
+    StyleProps,
+    TransferProps {}