diff --git a/packages/web-react/src/components/Checkbox/README.md b/packages/web-react/src/components/Checkbox/README.md
index d216e5d2c9..eeceb81c82 100644
--- a/packages/web-react/src/components/Checkbox/README.md
+++ b/packages/web-react/src/components/Checkbox/README.md
@@ -30,18 +30,18 @@ Advanced example usage:
 | Name              | Type                                           | Default | Required | Description                                          |
 | ----------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
 | `autoComplete`    | `string`                                       | -       | ✕        | [Automated assistance in filling][autocomplete-attr] |
-| `helperText`      | `string`                                       | —       | ✕        | Custom helper text                                   |
+| `helperText`      | `ReactNode`                                    | —       | ✕        | Custom helper text                                   |
 | `id`              | `string`                                       | -       | ✓        | Input and label identification                       |
 | `isDisabled`      | `boolean`                                      | -       | ✕        | Whether is field disabled                            |
 | `isChecked`       | `boolean`                                      | -       | ✕        | Whether is field checked                             |
 | `isItem`          | `boolean`                                      | -       | ✕        | To render in [Item][item] mode                       |
 | `isLabelHidden`   | `boolean`                                      | -       | ✕        | Whether is label hidden                              |
 | `isRequired`      | `boolean`                                      | -       | ✕        | Whether is field required                            |
-| `label`           | `string`                                       | -       | ✕        | Label text                                           |
+| `label`           | `ReactNode`                                    | -       | ✕        | Label text                                           |
 | `name`            | `string`                                       | -       | ✕        | Input name                                           |
 | `ref`             | `ForwardedRef<HTMLInputElement>`               | -       | ✕        | Input element reference                              |
 | `validationState` | [Validation dictionary][dictionary-validation] | -       | ✕        | Type of validation state.                            |
-| `validationText`  | `string`, `string[]`                           | -       | ✕        | Validation text                                      |
+| `validationText`  | \[`ReactNode` \| `ReactNode[]`]                    | -       | ✕        | Validation text                                      |
 | `value`           | `string`                                       | -       | ✕        | Input value                                          |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
diff --git a/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
index dfcd15c43a..047d0e4077 100644
--- a/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
+++ b/packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -28,30 +28,34 @@ describe('Checkbox', () => {
   requiredPropsTest(Checkbox, 'checkbox', 'id', 'test-checkbox');
 
   it('should have text classname', () => {
-    const dom = render(<Checkbox id="checkbox" label="Label" />);
+    render(<Checkbox id="checkbox" label="Label" />);
+
+    const element = screen.getByRole('checkbox').nextElementSibling;
 
-    const element = dom.container.querySelector('label > span') as HTMLElement;
     expect(element).toHaveClass('Checkbox__text');
   });
 
   it('should have label classname', () => {
-    const dom = render(<Checkbox id="checkbox" label="Label" isLabelHidden />);
+    render(<Checkbox id="checkbox" label="Label" />);
+
+    const element = screen.getByRole('checkbox').nextElementSibling?.firstChild;
 
-    const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
     expect(element).toHaveClass('Checkbox__label');
   });
 
   it('should have hidden classname', () => {
-    const dom = render(<Checkbox id="checkbox" label="Label" isLabelHidden />);
+    render(<Checkbox id="checkbox" label="Label" isLabelHidden />);
+
+    const element = screen.getByRole('checkbox').nextElementSibling?.firstChild;
 
-    const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
     expect(element).toHaveClass('Checkbox__label--hidden');
   });
 
   it('should have required classname', () => {
-    const dom = render(<Checkbox id="checkbox" label="Label" isRequired />);
+    render(<Checkbox id="checkbox" label="Label" isRequired />);
+
+    const element = screen.getByRole('checkbox').nextElementSibling?.firstChild;
 
-    const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
     expect(element).toHaveClass('Checkbox__label--required');
   });
 
@@ -59,6 +63,7 @@ describe('Checkbox', () => {
     render(<Checkbox id="checkbox" label="Label" />);
 
     const element = screen.getByRole('checkbox');
+
     expect(element).toHaveClass('Checkbox__input');
   });
 
@@ -66,7 +71,26 @@ describe('Checkbox', () => {
     render(<Checkbox id="checkbox" label="Label" helperText="text" />);
 
     const element = screen.getByText('text');
+
     expect(element).toBeInTheDocument();
     expect(element).toHaveClass('Checkbox__helperText');
   });
+
+  it('should render label with html tags', () => {
+    render(
+      <Checkbox
+        id="checkbox"
+        label={
+          <>
+            Label <b>Text</b>
+          </>
+        }
+      />,
+    );
+
+    const element = screen.getByRole('checkbox').nextElementSibling?.firstChild as HTMLElement;
+
+    expect(element).toHaveTextContent('Label Text');
+    expect(element.innerHTML).toBe('Label <b>Text</b>');
+  });
 });
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxWithHtmlFormatting.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxWithHtmlFormatting.tsx
new file mode 100644
index 0000000000..0b677779e2
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxWithHtmlFormatting.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pill } from '../../Pill';
+import Checkbox from '../Checkbox';
+
+const CheckboxWithHtmlFormatting = () => (
+  <Checkbox
+    id="checkbox-with-html-formatting"
+    name="checkboxWithHtmlFormatting"
+    label={
+      <>
+        Label with <b>bold</b> text{' '}
+        <Pill size="small" color="success">
+          Pill
+        </Pill>
+      </>
+    }
+    validationState="success"
+    validationText={
+      <>
+        Validation with <i>italic</i> text
+      </>
+    }
+    helperText={
+      <>
+        Helper text with a <a href="#link">link</a>
+      </>
+    }
+    onChange={() => {}}
+  />
+);
+
+export default CheckboxWithHtmlFormatting;
diff --git a/packages/web-react/src/components/Checkbox/demo/index.tsx b/packages/web-react/src/components/Checkbox/demo/index.tsx
index 9297a6ff3d..d0c212c340 100644
--- a/packages/web-react/src/components/Checkbox/demo/index.tsx
+++ b/packages/web-react/src/components/Checkbox/demo/index.tsx
@@ -9,6 +9,7 @@ import CheckboxIndeterminate from './CheckboxIndeterminate';
 import CheckboxItem from './CheckboxItem';
 import CheckboxRequired from './CheckboxRequired';
 import CheckboxValidation from './CheckboxValidation';
+import CheckboxWithHtmlFormatting from './CheckboxWithHtmlFormatting';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -33,6 +34,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <DocsSection title="Validation State with Validation Text">
       <CheckboxValidation />
     </DocsSection>
+    <DocsSection title="Text with HTML Formatting">
+      <CheckboxWithHtmlFormatting />
+    </DocsSection>
     <DocsSection title="Item">
       <CheckboxItem />
     </DocsSection>
diff --git a/packages/web-react/src/components/Field/__tests__/HelperText.test.tsx b/packages/web-react/src/components/Field/__tests__/HelperText.test.tsx
index da50da3013..b17c92bc2f 100644
--- a/packages/web-react/src/components/Field/__tests__/HelperText.test.tsx
+++ b/packages/web-react/src/components/Field/__tests__/HelperText.test.tsx
@@ -1,33 +1,54 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
 import HelperText from '../HelperText';
 
 describe('HelperText', () => {
+  const helperText = 'Helper Text';
+
   it('should render helper text', () => {
-    const dom = render(<HelperText className="HelperText__helperText" helperText="Helper Text" />);
+    render(<HelperText className="HelperText__helperText" helperText={helperText} />);
+
+    const element = screen.getByText(helperText);
 
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element).not.toBeNull();
-    expect(element.textContent).toBe('Helper Text');
+    expect(element.textContent).toBe(helperText);
   });
 
   it('should render with custom element type', () => {
-    const { container } = render(<HelperText elementType="span" helperText="Helper Text" />);
+    render(<HelperText elementType="span" helperText={helperText} />);
+
+    const element = screen.getByText(helperText);
 
-    const element = container.querySelector('span') as HTMLElement;
-    expect(element).not.toBeNull();
-    expect(element.textContent).toBe('Helper Text');
+    expect(element.tagName).toBe('SPAN');
   });
 
   it('should render with className and id', () => {
-    const { container } = render(
-      <HelperText className="test__helperText" id="test-helper-text-id" helperText="Helper Text" />,
+    const helperTextId = 'test-helper-text-id';
+    const helperTextClass = 'test__helperText';
+
+    render(<HelperText className={helperTextClass} id={helperTextId} helperText={helperText} data-testid="test" />);
+
+    const element = screen.getByText(helperText);
+
+    expect(element.getAttribute('id')).toBe(helperTextId);
+    expect(element).toHaveClass(helperTextClass);
+  });
+
+  it('should render with html tags', () => {
+    render(
+      <HelperText
+        id="test"
+        helperText={
+          <>
+            Helper <b>Text</b>
+          </>
+        }
+      />,
     );
 
-    const element = container.querySelector('.test__helperText') as HTMLElement;
-    expect(element).not.toBeNull();
-    expect(element.getAttribute('id')).toBe('test-helper-text-id');
-    expect(element.textContent).toBe('Helper Text');
+    const element = document.querySelector('#test') as HTMLElement;
+
+    expect(element).toHaveTextContent('Helper Text');
+    expect(element.innerHTML).toBe('Helper <b>Text</b>');
   });
 });
diff --git a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx b/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx
index c13184cf11..274e2fa94a 100644
--- a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx
+++ b/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx
@@ -14,6 +14,7 @@ describe('ValidationText', () => {
     renderValidationText({ validationText: 'validation text' });
 
     const element = screen.getByText('validation text');
+
     expect(element).toHaveClass('ValidationText__validationText');
     expect(element).not.toHaveAttribute('role', A11Y_ALERT_ROLE);
   });
@@ -51,6 +52,24 @@ describe('ValidationText', () => {
     expect(screen.getByRole('list').parentElement).toContainHTML('span');
   });
 
+  it('should render with html tags', () => {
+    render(
+      <ValidationText
+        id="test"
+        validationText={
+          <>
+            validation <b>text</b>
+          </>
+        }
+      />,
+    );
+
+    const element = document.querySelector('#test') as HTMLElement;
+
+    expect(element).toHaveTextContent('validation text');
+    expect(element.innerHTML).toBe('validation <b>text</b>');
+  });
+
   describe('when rendering multiple validation texts', () => {
     beforeEach(() => {
       renderValidationText({ validationText: ['validation text', 'another validation text'] });
@@ -62,6 +81,7 @@ describe('ValidationText', () => {
 
     it('should render correct validation texts for list items', () => {
       const listItems = screen.getAllByRole('listitem');
+
       expect(listItems[0]).toHaveTextContent('validation text');
       expect(listItems[1]).toHaveTextContent('another validation text');
     });
diff --git a/packages/web-react/src/components/FieldGroup/README.md b/packages/web-react/src/components/FieldGroup/README.md
index aacf60502b..f6c1c45687 100644
--- a/packages/web-react/src/components/FieldGroup/README.md
+++ b/packages/web-react/src/components/FieldGroup/README.md
@@ -97,16 +97,16 @@ Validation states can be presented either by adding the `validationState` attrib
 | Name              | Type                                           | Default | Required | Description                                                |
 | ----------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
 | `form`            | `string`                                       | `null`  | ✕        | Parent form ID                                             |
-| `helperText`      | `string`                                       | `null`  | ✕        | Custom helper text                                         |
+| `helperText`      | `ReactNode`                                    | `null`  | ✕        | Custom helper text                                         |
 | `id`              | `string`                                       | —       | ✓        | Group and label identification                             |
 | `isDisabled`      | `bool`                                         | `false` | ✕        | If true, the group is disabled                             |
 | `isFluid`         | `bool`                                         | —       | ✕        | If true, the element spans to the full width of its parent |
 | `isLabelHidden`   | `bool`                                         | `false` | ✕        | If true, label is hidden                                   |
 | `isRequired`      | `bool`                                         | `false` | ✕        | If true, the group is marked as required                   |
-| `label`           | `string`                                       | —       | ✓        | Label text                                                 |
+| `label`           | `ReactNode`                                    | —       | ✓        | Label text                                                 |
 | `name`            | `string`                                       | `null`  | ✕        | Group name                                                 |
 | `validationState` | [Validation dictionary][dictionary-validation] | `null`  | ✕        | Type of validation state                                   |
-| `validationText`  | \[`string` \| `string[]`]                      | `null`  | ✕        | Validation text                                            |
+| `validationText`  | \[`ReactNode` \| `ReactNode[]`]                | `null`  | ✕        | Validation text                                            |
 
 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]
diff --git a/packages/web-react/src/components/FieldGroup/__tests__/FieldGroup.test.tsx b/packages/web-react/src/components/FieldGroup/__tests__/FieldGroup.test.tsx
index 3ca128da89..38d1b51af6 100644
--- a/packages/web-react/src/components/FieldGroup/__tests__/FieldGroup.test.tsx
+++ b/packages/web-react/src/components/FieldGroup/__tests__/FieldGroup.test.tsx
@@ -59,49 +59,49 @@ describe('FieldGroup', () => {
   });
 
   it('should have className isRequired', () => {
-    const dom = render(
+    render(
       <FieldGroup id="example-field-group" label="Label" isRequired>
         {itemList}
       </FieldGroup>,
     );
 
-    const element = dom.container.querySelector('div') as HTMLElement;
+    const element = screen.getAllByText('Label')[1];
 
     expect(element).toHaveClass('FieldGroup__label--required');
   });
 
   it('should have className isDisabled', () => {
-    const dom = render(
+    render(
       <FieldGroup id="example-field-group" label="Label" isDisabled>
         {itemList}
       </FieldGroup>,
     );
 
-    const element = dom.container.querySelector('fieldset') as HTMLElement;
+    const element = screen.getByRole('group');
 
     expect(element).toHaveAttribute('disabled');
   });
 
   it('should not have visible label', () => {
-    const dom = render(
+    render(
       <FieldGroup id="example-field-group" label="Label" isLabelHidden>
         {itemList}
       </FieldGroup>,
     );
 
-    const element = dom.container.querySelector('fieldset div') as HTMLElement;
+    const element = screen.getAllByText('Label')[1];
 
-    expect(element).not.toHaveClass('FieldGroup__label');
+    expect(element).toBeUndefined();
   });
 
   it('should have className isFluid', () => {
-    const dom = render(
+    render(
       <FieldGroup id="example-field-group" label="Label" isFluid>
         {itemList}
       </FieldGroup>,
     );
 
-    const element = dom.container.querySelector('fieldset') as HTMLElement;
+    const element = screen.getByRole('group');
 
     expect(element).toHaveClass('FieldGroup--fluid');
   });
@@ -130,4 +130,24 @@ describe('FieldGroup', () => {
 
     expect(element).toHaveAttribute('id', 'example-field-group__helperText');
   });
+
+  it('should render with html tags', () => {
+    render(
+      <FieldGroup
+        id="test"
+        label={
+          <>
+            Label <b>Text</b>
+          </>
+        }
+      >
+        {itemList}
+      </FieldGroup>,
+    );
+
+    const element = screen.getAllByText('Label')[1];
+
+    expect(element).toHaveTextContent('Label Text');
+    expect(element.innerHTML).toBe('Label <b>Text</b>');
+  });
 });
diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md
index 9743456e15..5a3d62c3be 100644
--- a/packages/web-react/src/components/FileUploader/README.md
+++ b/packages/web-react/src/components/FileUploader/README.md
@@ -370,7 +370,7 @@ and [escape hatches][readme-escape-hatches].
 | -------------------- | ------------------------------------ | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `accept`             | `string`                             | —        | ✕        | The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. |
 | `dropZoneRef`        | `MutableRefObject<HTMLDivElement>`   | —        | ✕        | Drop zone element reference                                                                                                                                     |
-| `helperText`         | `string`                             | —        | ✕        | Custom helper text                                                                                                                                              |
+| `helperText`         | `ReactNode`                          | —        | ✕        | Custom helper text                                                                                                                                              |
 | `iconName`           | `string`                             | `upload` | ✕        | Icon used in the drop zone                                                                                                                                      |
 | `id`                 | `string`                             | —        | ✓        | FileUploaderInput id                                                                                                                                            |
 | `inputRef`           | `MutableRefObject<HTMLInputElement>` | —        | ✕        | Input element reference                                                                                                                                         |
@@ -378,7 +378,7 @@ and [escape hatches][readme-escape-hatches].
 | `isLabelHidden`      | `bool`                               | —        | ✕        | Whether is input label hidden                                                                                                                                   |
 | `isMultiple`         | `bool`                               | —        | ✕        | When multiple files can be selected at once                                                                                                                     |
 | `isRequired`         | `bool`                               | —        | ✕        | Whether is field marked as required                                                                                                                             |
-| `label`              | `string`                             | —        | ✕        | Field label                                                                                                                                                     |
+| `label`              | `ReactNode`                          | —        | ✕        | Field label                                                                                                                                                     |
 | `labelText`          | `string`                             | —        | ✕        | Label for input in Drop zone                                                                                                                                    |
 | `linkText`           | `string`                             | —        | ✕        | Link text in input in Drop zone                                                                                                                                 |
 | `maxFileSize`        | `number`                             | 1000000  | ✕        | The maximum size of the uploaded file in **bytes**. [Learn how file sizes are calculated](#understanding-file-size-in-bytes).                                   |
@@ -387,7 +387,7 @@ and [escape hatches][readme-escape-hatches].
 | `onError`            | `FileUploaderErrorCallbackType`      | —        | ✕        | Callback on error condition                                                                                                                                     |
 | `queueLimitBehavior` | \[`hide` \| `disable` \| `none`]     | `none`   | ✕        | Input behavior when the file queue is filled                                                                                                                    |
 | `validationState`    | `ValidationState`                    | —        | ✕        | Validation state                                                                                                                                                |
-| `validationText`     | \[`string` \| `string[]`]            | —        | ✕        | Validation status text                                                                                                                                          |
+| `validationText`     | \[`ReactNode` \| `ReactNode[]`]      | —        | ✕        | Validation status text                                                                                                                                          |
 
 The rest of the properties are created from the default `<input>` element. [More about the element][input-element-docs]
 
diff --git a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
index 2c65d28591..9e574527c1 100644
--- a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
+++ b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
@@ -29,4 +29,24 @@ describe('FileUploaderInput', () => {
 
     expect(container).not.toContain('has-drag-and-drop');
   });
+
+  it('should render label with html tags', () => {
+    render(
+      <FileUploaderInput
+        id="test-uploader"
+        name="test-uploader"
+        label={
+          <>
+            Upload <b>File</b>
+          </>
+        }
+        data-testid="test"
+      />,
+    );
+
+    const element = screen.getAllByTestId('test')[0].firstChild as HTMLElement;
+
+    expect(element).toHaveTextContent('Upload File');
+    expect(element.innerHTML).toBe('Upload <b>File</b>');
+  });
 });
diff --git a/packages/web-react/src/components/Radio/README.md b/packages/web-react/src/components/Radio/README.md
index d5246cbc7b..2ec95889d2 100644
--- a/packages/web-react/src/components/Radio/README.md
+++ b/packages/web-react/src/components/Radio/README.md
@@ -29,17 +29,17 @@ Advanced example usage:
 
 | Name              | Type                                           | Default | Required | Description                                          |
 | ----------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
-| `autoComplete`    | string                                         | -       | ✕        | [Automated assistance in filling][autocomplete-attr] |
-| `id`              | string                                         | -       | ✓        | Input and label identification                       |
-| `isDisabled`      | boolean                                        | -       | ✕        | Whether is field disabled                            |
-| `isChecked`       | boolean                                        | -       | ✕        | Whether is field checked                             |
-| `isItem`          | boolean                                        | -       | ✕        | To render in [Item][item] mode                       |
-| `isLabelHidden`   | boolean                                        | -       | ✕        | Whether is label hidden                              |
-| `label`           | string                                         | -       | ✕        | Label text                                           |
-| `name`            | string                                         | -       | ✕        | Input name                                           |
+| `autoComplete`    | `string`                                       | -       | ✕        | [Automated assistance in filling][autocomplete-attr] |
+| `id`              | `string`                                       | -       | ✓        | Input and label identification                       |
+| `isDisabled`      | `boolean`                                      | -       | ✕        | Whether is field disabled                            |
+| `isChecked`       | `boolean`                                      | -       | ✕        | Whether is field checked                             |
+| `isItem`          | `boolean`                                      | -       | ✕        | To render in [Item][item] mode                       |
+| `isLabelHidden`   | `boolean`                                      | -       | ✕        | Whether is label hidden                              |
+| `label`           | `ReactNode`                                    | -       | ✕        | Label text                                           |
+| `name`            | `string`                                       | -       | ✕        | Input name                                           |
 | `ref`             | `ForwardedRef<HTMLInputElement>`               | -       | ✕        | Input element reference                              |
 | `validationState` | [Validation dictionary][dictionary-validation] | -       | ✕        | Type of validation state                             |
-| `value`           | string                                         | -       | ✕        | Input value                                          |
+| `value`           | `string`                                       | -       | ✕        | Input value                                          |
 
 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]
diff --git a/packages/web-react/src/components/Radio/__tests__/Radio.test.tsx b/packages/web-react/src/components/Radio/__tests__/Radio.test.tsx
index 1dc92b3c1b..e72bb1a7a7 100644
--- a/packages/web-react/src/components/Radio/__tests__/Radio.test.tsx
+++ b/packages/web-react/src/components/Radio/__tests__/Radio.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import {
   classNamePrefixProviderTest,
@@ -25,30 +25,44 @@ describe('Radio', () => {
   requiredPropsTest(Radio, 'radio', 'id', 'example-id');
 
   it('should have label classname', () => {
-    const dom = render(<Radio id="radio" label="label" />);
+    render(<Radio id="radio" label="label" />);
 
-    const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
-    expect(element).toHaveClass('Radio__label');
+    expect(screen.getByRole('radio').nextElementSibling?.firstChild).toHaveClass('Radio__label');
   });
 
   it('should have hidden classname', () => {
-    const dom = render(<Radio id="radio" label="hidden label" isLabelHidden />);
+    render(<Radio id="radio" label="hidden label" isLabelHidden />);
 
-    const element = dom.container.querySelector('label > span > span:first-child') as HTMLElement;
-    expect(element).toHaveClass('Radio__label--hidden');
+    expect(screen.getByRole('radio').nextElementSibling?.firstChild).toHaveClass('Radio__label--hidden');
   });
 
   it('should have input classname', () => {
-    const dom = render(<Radio id="radio" label="label" />);
+    render(<Radio id="radio" label="label" />);
 
-    const element = dom.container.querySelector('input') as HTMLElement;
-    expect(element).toHaveClass('Radio__input');
+    expect(screen.getByRole('radio')).toHaveClass('Radio__input');
   });
 
   it('should have helper text', () => {
-    const dom = render(<Radio id="radio" label="Label" helperText="text" />);
+    render(<Radio id="radio" label="Label" helperText="text" />);
 
-    const element = dom.container.querySelector('.Radio__helperText') as HTMLElement;
-    expect(element.textContent).toBe('text');
+    expect(screen.getByRole('radio').nextElementSibling?.lastChild).toHaveTextContent('text');
+  });
+
+  it('should render label with html tags', () => {
+    render(
+      <Radio
+        id="radio"
+        label={
+          <>
+            Radio <b>Label</b>
+          </>
+        }
+      />,
+    );
+
+    const element = screen.getByRole('radio').nextElementSibling?.firstChild as HTMLElement;
+
+    expect(element).toHaveTextContent('Radio Label');
+    expect(element.innerHTML).toBe('Radio <b>Label</b>');
   });
 });
diff --git a/packages/web-react/src/components/Select/README.md b/packages/web-react/src/components/Select/README.md
index fd7f15bf12..6c43c3cf7c 100644
--- a/packages/web-react/src/components/Select/README.md
+++ b/packages/web-react/src/components/Select/README.md
@@ -43,11 +43,11 @@ Advanced example usage:
 | `isFluid`         | `bool`                                         | —       | ✕        | Whether is field is fluid       |
 | `isLabelHidden`   | `bool`                                         | —       | ✕        | Whether is label hidden         |
 | `isRequired`      | `bool`                                         | —       | ✕        | Whether is field required       |
-| `label`           | `string`                                       | —       | ✕        | Label text                      |
+| `label`           | `ReactNode`                                    | —       | ✕        | Label text                      |
 | `name`            | `string`                                       | —       | ✕        | Select name                     |
 | `ref`             | `ForwardedRef<HTMLSelectElement>`              | —       | ✕        | Select element reference        |
 | `validationState` | [Validation dictionary][dictionary-validation] | —       | ✕        | Type of validation state        |
-| `validationText`  | \[`string` \| `string[]`]                      | —       | ✕        | Validation text                 |
+| `validationText`  | \[`ReactNode` \| `ReactNode[]`]                | —       | ✕        | Validation text                 |
 
 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]
diff --git a/packages/web-react/src/components/Select/__tests__/Select.test.tsx b/packages/web-react/src/components/Select/__tests__/Select.test.tsx
index 6e530e125d..902ba27956 100644
--- a/packages/web-react/src/components/Select/__tests__/Select.test.tsx
+++ b/packages/web-react/src/components/Select/__tests__/Select.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import {
   classNamePrefixProviderTest,
@@ -27,68 +27,94 @@ describe('Select', () => {
   requiredPropsTest(Select, 'combobox', 'id', 'test-select');
 
   it('should have label classname', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label">
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('label') as HTMLElement;
+    const element = screen.getByText('Label');
+
     expect(element).toHaveClass('Select__label');
   });
 
   it('should have hidden classname', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label" isLabelHidden>
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('label') as HTMLElement;
+    const element = screen.getByText('Label');
+
     expect(element).toHaveClass('Select__label--hidden');
   });
 
   it('should have required classname', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label" isRequired>
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('label') as HTMLElement;
+    const element = screen.getByText('Label');
+
     expect(element).toHaveClass('Select__label--required');
   });
 
   it('should have input classname', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label">
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('select') as HTMLElement;
+    const element = screen.getByLabelText('Label');
+
     expect(element).toHaveClass('Select__input');
   });
 
   it('should have helper text', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label" helperText="helper text">
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('.Select__helperText') as HTMLElement;
-    expect(element.textContent).toBe('helper text');
+    const element = screen.getByText('Label').parentElement?.lastChild;
+
+    expect(element).toHaveTextContent('helper text');
   });
 
   it('should have fluid classname', () => {
-    const dom = render(
+    render(
       <Select id="test-select" label="Label" isFluid>
         <option value="1">Option 1</option>
       </Select>,
     );
 
-    const element = dom.container.querySelector('div') as HTMLElement;
+    const element = screen.getByText('Label').parentElement;
+
     expect(element).toHaveClass('Select--fluid');
   });
+
+  it('should render label with html tags', () => {
+    render(
+      <Select
+        id="test-select"
+        label={
+          <>
+            Select <b>Label</b>
+          </>
+        }
+      >
+        <option value="1">Option 1</option>
+      </Select>,
+    );
+
+    const element = screen.getByText('Label').parentElement as HTMLElement;
+
+    expect(element).toHaveTextContent('Select Label');
+    expect(element.innerHTML).toBe('Select <b>Label</b>');
+  });
 });
diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md
index 1c09c3a67f..9dbd2fee26 100644
--- a/packages/web-react/src/components/TextArea/README.md
+++ b/packages/web-react/src/components/TextArea/README.md
@@ -46,14 +46,14 @@ Example with Auto-Height Adjustment
 | `isDisabled`            | `bool`                                         | —       | ✕        | Whether is field disabled                                            |
 | `isLabelHidden`         | `bool`                                         | —       | ✕        | Whether is label hidden                                              |
 | `isRequired`            | `bool`                                         | —       | ✕        | Whether is field required                                            |
-| `label`                 | `string`                                       | —       | ✕        | Label text                                                           |
+| `label`                 | `ReactNode`                                    | —       | ✕        | Label text                                                           |
 | `maxLength`             | `number`                                       | —       | ✕        | Maximum number of characters                                         |
 | `name`                  | `string`                                       | —       | ✕        | Textarea name                                                        |
 | `placeholder`           | `string`                                       | —       | ✕        | Textarea placeholder                                                 |
 | `ref`                   | `ForwardedRef<HTMLTextAreaElement>`            | —       | ✕        | Textarea element reference                                           |
 | `rows`                  | `number`                                       | —       | ✕        | Number of visible rows                                               |
 | `validationState`       | [Validation dictionary][dictionary-validation] | —       | ✕        | Type of validation state                                             |
-| `validationText`        | \[`string` \| `string[]`]                      | —       | ✕        | Validation text                                                      |
+| `validationText`        | \[`ReactNode` \| `ReactNode[]`]                | —       | ✕        | Validation text                                                      |
 | `value`                 | `string`                                       | —       | ✕        | Textarea value                                                       |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
diff --git a/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx
index a334fba6b0..8a5e46397e 100644
--- a/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import {
   classNamePrefixProviderTest,
@@ -25,60 +25,70 @@ describe('TextArea', () => {
   requiredPropsTest(TextArea, 'textbox', 'id', 'example-id');
 
   it('should have label classname', () => {
-    const dom = render(<TextArea id="textarea" label="Label" />);
+    render(<TextArea id="textarea" label="Label" />);
 
-    const element = dom.container.querySelector('label') as HTMLElement;
-    expect(element).toHaveClass('TextArea__label');
+    expect(screen.getByText('Label')).toHaveClass('TextArea__label');
   });
 
   it('should have hidden classname', () => {
-    const dom = render(<TextArea id="textarea" label="Label" isLabelHidden />);
+    render(<TextArea id="textarea" label="Label" isLabelHidden />);
 
-    const element = dom.container.querySelector('label') as HTMLElement;
-    expect(element).toHaveClass('TextArea__label--hidden');
+    expect(screen.getByText('Label')).toHaveClass('TextArea__label--hidden');
   });
 
   it('should have required classname', () => {
-    const dom = render(<TextArea id="textarea" label="Label" isRequired />);
+    render(<TextArea id="textarea" label="Label" isRequired />);
 
-    const element = dom.container.querySelector('label') as HTMLElement;
-    expect(element).toHaveClass('TextArea__label--required');
+    expect(screen.getByText('Label')).toHaveClass('TextArea__label--required');
   });
 
   it('should have input classname', () => {
-    const dom = render(<TextArea id="textarea" label="Label" />);
+    render(<TextArea id="textarea" label="Label" />);
 
-    const element = dom.container.querySelector('textarea') as HTMLElement;
-    expect(element).toHaveClass('TextArea__input');
+    expect(screen.getByRole('textbox')).toHaveClass('TextArea__input');
   });
 
   it('should have helper text', () => {
-    const dom = render(<TextArea id="textarea" label="Label" helperText="helper text" />);
+    render(<TextArea id="textarea" label="Label" helperText="helper text" />);
 
-    const element = dom.container.querySelector('.TextArea__helperText') as HTMLElement;
-    expect(element.textContent).toBe('helper text');
+    expect(screen.getByRole('textbox').nextElementSibling).toHaveTextContent('helper text');
   });
 
   it('should have fluid classname', () => {
-    const dom = render(<TextArea id="textarea" label="Label" isFluid />);
+    render(<TextArea id="textarea" label="Label" isFluid />);
 
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element).toHaveClass('TextArea--fluid');
+    expect(screen.getByRole('textbox').parentElement).toHaveClass('TextArea--fluid');
   });
 
   describe('autoresizing', () => {
     it('should adjust height when mounted and autoresizing is enabled', () => {
-      const dom = render(<TextArea id="textarea" label="Label" isFluid isAutoResizing />);
+      render(<TextArea id="textarea" label="Label" isFluid isAutoResizing />);
 
-      const element = dom.container.querySelector('textarea') as HTMLElement;
-      expect(element.style.height).toBe('2px');
+      expect(screen.getByRole('textbox').style.height).toBe('2px');
     });
 
     it('should not adjust height when mounted and autoresizing is not used', () => {
-      const dom = render(<TextArea id="textarea" label="Label" isFluid />);
+      render(<TextArea id="textarea" label="Label" isFluid />);
 
-      const element = dom.container.querySelector('textarea') as HTMLElement;
-      expect(element.style.height).toBe('');
+      expect(screen.getByRole('textbox').style.height).toBe('');
     });
   });
+
+  it('should render label with html tags', () => {
+    render(
+      <TextArea
+        id="textarea"
+        label={
+          <>
+            TextArea <b>Label</b>
+          </>
+        }
+      />,
+    );
+
+    const element = screen.getByRole('textbox').parentElement?.firstChild as HTMLElement;
+
+    expect(element).toHaveTextContent('TextArea Label');
+    expect(element.innerHTML).toBe('TextArea <b>Label</b>');
+  });
 });
diff --git a/packages/web-react/src/components/TextField/README.md b/packages/web-react/src/components/TextField/README.md
index 47ee583573..5466a8cbe7 100644
--- a/packages/web-react/src/components/TextField/README.md
+++ b/packages/web-react/src/components/TextField/README.md
@@ -54,14 +54,14 @@ TextField with password toggle (button to reveal the password):
 | `isDisabled`        | `bool`                                                                       | —       | ✕        | Whether is field disabled                                               |
 | `isLabelHidden`     | `bool`                                                                       | —       | ✕        | Whether is label hidden                                                 |
 | `isRequired`        | `bool`                                                                       | —       | ✕        | Whether is field required                                               |
-| `label`             | `string`                                                                     | —       | ✓        | Label text                                                              |
+| `label`             | `ReactNode`                                                                  | —       | ✓        | Label text                                                              |
 | `name`              | `string`                                                                     | —       | ✕        | Input name                                                              |
 | `pattern`           | `string`                                                                     | —       | ✕        | Defines regular expressions for allowed value types                     |
 | `placeholder`       | `string`                                                                     | —       | ✕        | Input placeholder                                                       |
 | `ref`               | `ForwardedRef<HTMLInputElement>`                                             | —       | ✕        | Input element reference                                                 |
 | `type`              | \[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | —       | ✕        | Input type                                                              |
 | `validationState`   | [Validation dictionary][dictionary-validation]                               | —       | ✕        | Type of validation state                                                |
-| `validationText`    | \[`string` \| `string[]`]                                                    | —       | ✕        | Validation text                                                         |
+| `validationText`    | \[`ReactNode` \| `ReactNode[]`]                                              | —       | ✕        | Validation text                                                         |
 | `value`             | `string`                                                                     | —       | ✕        | Input value                                                             |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
diff --git a/packages/web-react/src/components/TextField/__tests__/TextField.test.tsx b/packages/web-react/src/components/TextField/__tests__/TextField.test.tsx
index 2d0ff6ca0e..6679147275 100644
--- a/packages/web-react/src/components/TextField/__tests__/TextField.test.tsx
+++ b/packages/web-react/src/components/TextField/__tests__/TextField.test.tsx
@@ -68,6 +68,26 @@ describe('TextField', () => {
 
       expect(screen.getByLabelText('Label').parentElement).toHaveClass('TextField--fluid');
     });
+
+    it('should render label with html tags', () => {
+      render(
+        <TextField
+          id="textfield"
+          data-testid="test"
+          label={
+            <>
+              TextField <b>Label</b>
+            </>
+          }
+          type={type as TextFieldType}
+        />,
+      );
+
+      const element = screen.getByTestId('test').previousElementSibling as HTMLElement;
+
+      expect(element).toHaveTextContent('TextField Label');
+      expect(element.innerHTML).toBe('TextField <b>Label</b>');
+    });
   });
 
   describe('hasPasswordToggle', () => {
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/README.md b/packages/web-react/src/components/UNSTABLE_Slider/README.md
index e9a6f36b9b..ebe902b959 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/README.md
+++ b/packages/web-react/src/components/UNSTABLE_Slider/README.md
@@ -109,13 +109,13 @@ Validation states implement the Validation state [dictionary][dictionary-validat
 | `isDisabled`      | `bool`                                         | `false` | ✕        | Whether is the input disabled                             |
 | `isFluid`         | `bool`                                         | `false` | ✕        | Whether the element spans to the full width of its parent |
 | `isLabelHidden`   | `bool`                                         | `false` | ✕        | Whether the label is hidden                               |
-| `label`           | `string`                                       | -       | ✓        | Label text                                                |
+| `label`           | `ReactNode`                                    | -       | ✓        | Label text                                                |
 | `max`             | `number`                                       | 100     | ✕        | Max value of slider input                                 |
 | `min`             | `number`                                       | 0       | ✕        | Min value of slider input                                 |
 | `onChange`        | `() => void`                                   | -       | ✓        | On input change callback                                  |
 | `step`            | `number`                                       | 1       | ✕        | Sets the stepping interval                                |
 | `validationState` | [Validation dictionary][dictionary-validation] | -       | ✕        | Type of validation state                                  |
-| `validationText`  | \[`string` \| `string[]`]                      | -       | ✕        | Validation text                                           |
+| `validationText`  | \[`ReactNode` \| `ReactNode[]`]                | -       | ✕        | Validation text                                           |
 | `value`           | `number`                                       | -       | ✓        | Input value                                               |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
@@ -134,20 +134,20 @@ import UNSTABLE_UncontrolledSlider from '../UNSTABLE_UncontrolledSlider';
 
 #### API
 
-| Attribute        | Type         | Default | Required | Description                                               |
-| ---------------- | ------------ | ------- | -------- | --------------------------------------------------------- |
-| `helperText`     | `string`     | -       | ✕        | Custom helper text                                        |
-| `id`             | `string`     | -       | ✓        | Input and label identification                            |
-| `isDisabled`     | `bool`       | `false` | ✕        | Whether is the input disabled                             |
-| `isFluid`        | `bool`       | `false` | ✕        | Whether the element spans to the full width of its parent |
-| `isLabelHidden`  | `bool`       | `false` | ✕        | Whether the label is hidden                               |
-| `label`          | `string`     | -       | ✓        | Label text                                                |
-| `max`            | `number`     | 100     | ✕        | Max value of slider input                                 |
-| `min`            | `number`     | 0       | ✕        | Min value of slider input                                 |
-| `onChange`       | `() => void` | -       | ✕        | On input change callback                                  |
-| `step`           | `number`     | 1       | ✕        | Sets the stepping interval                                |
-| `validationText` | `string`     | -       | ✕        | Validation text                                           |
-| `value`          | `number`     | 0       | ✕        | Input value                                               |
+| Attribute        | Type                            | Default | Required | Description                                               |
+| ---------------- | ------------------------------- | ------- | -------- | --------------------------------------------------------- |
+| `helperText`     | `string`                        | -       | ✕        | Custom helper text                                        |
+| `id`             | `string`                        | -       | ✓        | Input and label identification                            |
+| `isDisabled`     | `bool`                          | `false` | ✕        | Whether is the input disabled                             |
+| `isFluid`        | `bool`                          | `false` | ✕        | Whether the element spans to the full width of its parent |
+| `isLabelHidden`  | `bool`                          | `false` | ✕        | Whether the label is hidden                               |
+| `label`          | `ReactNode`                     | -       | ✓        | Label text                                                |
+| `max`            | `number`                        | 100     | ✕        | Max value of slider input                                 |
+| `min`            | `number`                        | 0       | ✕        | Min value of slider input                                 |
+| `onChange`       | `() => void`                    | -       | ✕        | On input change callback                                  |
+| `step`           | `number`                        | 1       | ✕        | Sets the stepping interval                                |
+| `validationText` | \[`ReactNode` \| `ReactNode[]`] | -       | ✕        | Validation text                                           |
+| `value`          | `number`                        | 0       | ✕        | Input value                                               |
 
 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]
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx b/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx
index 74f1c86ade..8148101982 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx
@@ -50,4 +50,22 @@ describe('UNSTABLE_Slider', () => {
     expect(screen.getByTestId('test')).toHaveClass('UNSTABLE_Slider UNSTABLE_Slider--danger');
     expect(screen.getByText(validationText)).toBeInTheDocument();
   });
+
+  it('should render label with html tags', () => {
+    render(
+      <UNSTABLE_Slider
+        {...defaultProps}
+        label={
+          <>
+            Slider <b>Label</b>
+          </>
+        }
+      />,
+    );
+
+    const element = screen.getByRole('slider').previousElementSibling as HTMLElement;
+
+    expect(element).toHaveTextContent('Slider Label');
+    expect(element.innerHTML).toBe('Slider <b>Label</b>');
+  });
 });
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/README.md b/packages/web-react/src/components/UNSTABLE_Toggle/README.md
index a7a2aa549c..96110eda45 100644
--- a/packages/web-react/src/components/UNSTABLE_Toggle/README.md
+++ b/packages/web-react/src/components/UNSTABLE_Toggle/README.md
@@ -84,19 +84,19 @@ You can add `isDisabled` prop to disable Toggle.
 | Name              | Type                                           | Default | Required | Description                                          |
 | ----------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
 | `autoComplete`    | `string`                                       | -       | ✕        | [Automated assistance in filling][autocomplete-attr] |
-| `hasIndicators`   | boolean                                        | `false` | ✕        | Whether has visual indicators                        |
-| `helperText`      | string                                         | -       | ✕        | Helper text                                          |
-| `id`              | string                                         | -       | ✓        | Input and label identification                       |
-| `isChecked`       | boolean                                        | `false` | ✕        | Whether is toggle checked                            |
-| `isDisabled`      | boolean                                        | `false` | ✕        | Whether is toggle disabled                           |
-| `isFluid`         | boolean                                        | `false` | ✕        | Whether is toggle fluid                              |
-| `isLabelHidden`   | boolean                                        | `false` | ✕        | Whether is label hidden                              |
-| `label`           | string                                         | -       | ✓        | Label text                                           |
-| `name`            | string                                         | -       | ✕        | Input name                                           |
+| `hasIndicators`   | `boolean`                                      | `false` | ✕        | Whether has visual indicators                        |
+| `helperText`      | `string`                                       | -       | ✕        | Helper text                                          |
+| `id`              | `string`                                       | -       | ✓        | Input and label identification                       |
+| `isChecked`       | `boolean`                                      | `false` | ✕        | Whether is toggle checked                            |
+| `isDisabled`      | `boolean`                                      | `false` | ✕        | Whether is toggle disabled                           |
+| `isFluid`         | `boolean`                                      | `false` | ✕        | Whether is toggle fluid                              |
+| `isLabelHidden`   | `boolean`                                      | `false` | ✕        | Whether is label hidden                              |
+| `label`           | `ReactNode`                                    | -       | ✓        | Label text                                           |
+| `name`            | `string`                                       | -       | ✕        | Input name                                           |
 | `onChange`        | (event: ChangeEvent<HTMLInputElement>) => void | -       | ✕        | Change event handler                                 |
 | `ref`             | `ForwardedRef<HTMLInputElement>`               | -       | ✕        | Input element reference                              |
 | `validationState` | [Validation dictionary][dictionary-validation] | -       | ✕        | Type of validation state                             |
-| `validationText`  | `string` \| `string[]`                         | -       | ✕        | Validation text                                      |
+| `validationText`  | \[`ReactNode` \| `ReactNode[]`]                | -       | ✕        | Validation text                                      |
 
 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]
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx
index 42b22eba4b..ed483e363d 100644
--- a/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx
@@ -110,4 +110,22 @@ describe('UNSTABLE_Toggle', () => {
 
     expect(checkbox).toBeChecked();
   });
+
+  it('should render lavbel with html tags', () => {
+    render(
+      <UNSTABLE_Toggle
+        id="test-toggle"
+        label={
+          <>
+            Toggle <b>Label</b>
+          </>
+        }
+      />,
+    );
+
+    const element = screen.getByRole('checkbox').previousElementSibling?.firstChild as HTMLElement;
+
+    expect(element).toHaveTextContent('Toggle Label');
+    expect(element.innerHTML).toBe('Toggle <b>Label</b>');
+  });
 });
diff --git a/packages/web-react/src/types/checkbox.ts b/packages/web-react/src/types/checkbox.ts
index 4e540ee008..d6d0fd7ee8 100644
--- a/packages/web-react/src/types/checkbox.ts
+++ b/packages/web-react/src/types/checkbox.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -27,7 +28,7 @@ export interface CheckboxProps
   /** Whether the checkbox is checked */
   isChecked?: boolean;
   /** Text of control label */
-  label: string;
+  label: ReactNode;
 }
 
 export interface SpiritCheckboxProps extends CheckboxProps {}
diff --git a/packages/web-react/src/types/fieldGroup.ts b/packages/web-react/src/types/fieldGroup.ts
index 08ea56fb8a..bceb1a9652 100644
--- a/packages/web-react/src/types/fieldGroup.ts
+++ b/packages/web-react/src/types/fieldGroup.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   HelperTextProps,
@@ -18,7 +19,7 @@ export interface FieldGroupProps
   isDisabled?: boolean;
   isFluid?: boolean;
   isLabelHidden?: boolean;
-  label: string | JSX.Element;
+  label: ReactNode;
   validationText?: ValidationTextType;
 }
 
diff --git a/packages/web-react/src/types/fileUploader.ts b/packages/web-react/src/types/fileUploader.ts
index f70aa24741..e6a4108c8d 100644
--- a/packages/web-react/src/types/fileUploader.ts
+++ b/packages/web-react/src/types/fileUploader.ts
@@ -73,7 +73,7 @@ export interface AttachmentImagePreviewProps {
 }
 
 export interface FileUploaderInputBaseProps
-  extends Omit<SpiritInputElementProps, 'onError'>,
+  extends Omit<SpiritInputElementProps, 'onError' | 'label'>,
     FileUploaderIntermediateProps,
     FileUploaderTextProps,
     Validation {
@@ -81,7 +81,7 @@ export interface FileUploaderInputBaseProps
   id: string;
   inputRef?: MutableRefObject<HTMLInputElement>;
   isDisabled?: boolean;
-  label?: string;
+  label?: ReactNode;
   name: string;
   onError?: FileUploaderErrorCallbackType;
 }
diff --git a/packages/web-react/src/types/radio.ts b/packages/web-react/src/types/radio.ts
index 0453ff4394..b919c26892 100644
--- a/packages/web-react/src/types/radio.ts
+++ b/packages/web-react/src/types/radio.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -23,7 +24,7 @@ export interface RadioProps
   /** Whether the checkbox is checked */
   isChecked?: boolean;
   /** Text of control label */
-  label: string;
+  label: ReactNode;
 }
 
 export interface SpiritRadioProps extends RadioProps {}
diff --git a/packages/web-react/src/types/select.ts b/packages/web-react/src/types/select.ts
index a0ea848dd6..d0f2ebbd80 100644
--- a/packages/web-react/src/types/select.ts
+++ b/packages/web-react/src/types/select.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   HelperTextProps,
@@ -13,6 +14,7 @@ export interface SelectProps extends SelectElementBaseProps, LabelProps, HelperT
   isDisabled?: boolean;
   isFluid?: boolean;
   isLabelHidden?: boolean;
+  label: ReactNode;
   validationText?: ValidationTextType;
 }
 
diff --git a/packages/web-react/src/types/shared/element.ts b/packages/web-react/src/types/shared/element.ts
index f5a563c542..43759fa951 100644
--- a/packages/web-react/src/types/shared/element.ts
+++ b/packages/web-react/src/types/shared/element.ts
@@ -58,11 +58,17 @@ export type SpiritTextAreaElementProps = Omit<
 export type SpiritUListElementProps = OverloadStyleProps<SpiritUListElementBaseProps>;
 export type SpiritFieldGroupElementProps = OverloadStyleProps<SpiritFieldGroupElementBaseProps>;
 
-export type SpiritInputElementPropsWithRef = Omit<SpiritInputElementProps & ComponentPropsWithRef<'input'>, 'id'>;
-export type SpiritSelectElementPropsWithRef = Omit<SpiritSelectElementProps & ComponentPropsWithRef<'select'>, 'id'>;
+export type SpiritInputElementPropsWithRef = Omit<
+  SpiritInputElementProps & ComponentPropsWithRef<'input'>,
+  'id' | 'label'
+>;
+export type SpiritSelectElementPropsWithRef = Omit<
+  SpiritSelectElementProps & ComponentPropsWithRef<'select'>,
+  'id' | 'label'
+>;
 export type SpiritTextAreaElementPropsWithRef = Omit<
   SpiritTextAreaElementProps & ComponentPropsWithRef<'textarea'>,
-  'id'
+  'id' | 'label'
 >;
 export type SpiritFieldGroupElementPropsWithRef = Omit<
   SpiritFieldGroupElementProps & ComponentPropsWithRef<'fieldset'>,
diff --git a/packages/web-react/src/types/shared/inputs.ts b/packages/web-react/src/types/shared/inputs.ts
index 331ef8ea1c..826b567483 100644
--- a/packages/web-react/src/types/shared/inputs.ts
+++ b/packages/web-react/src/types/shared/inputs.ts
@@ -1,9 +1,9 @@
-import { AriaRole } from 'react';
+import { AriaRole, ReactNode } from 'react';
 import { ValidationStatesDictionaryType } from './dictionaries';
 
 export type ValidationState = ValidationStatesDictionaryType;
 
-export type ValidationTextType = string | string[];
+export type ValidationTextType = ReactNode | ReactNode[];
 
 export interface Validation {
   /** Whether the input should display its "valid" or "invalid" visual styling. */
@@ -35,7 +35,7 @@ export interface TextInputProps extends TextInputBase {
 
 export interface HelperTextProps {
   /** If I wanted some help text */
-  helperText?: string;
+  helperText?: ReactNode;
 }
 
 export interface ValidationTextProp {
diff --git a/packages/web-react/src/types/slider.ts b/packages/web-react/src/types/slider.ts
index f8d8ea1615..75d7fa85ed 100644
--- a/packages/web-react/src/types/slider.ts
+++ b/packages/web-react/src/types/slider.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
   SpiritInputElementPropsWithRef,
   StyleProps,
@@ -19,7 +20,7 @@ export interface SliderProps
     StyleProps {
   isFluid?: boolean;
   isSelected?: boolean;
-  label: string;
+  label: ReactNode;
   max?: number;
   min?: number;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
diff --git a/packages/web-react/src/types/textArea.ts b/packages/web-react/src/types/textArea.ts
index 53617fa85e..acb3e0a0c3 100644
--- a/packages/web-react/src/types/textArea.ts
+++ b/packages/web-react/src/types/textArea.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -22,10 +23,11 @@ export interface TextAreaProps
     TextInputProps,
     RequiredProps,
     Validation {
-  /** Whether is field auto resizing which adjusts its height while typing */
-  isAutoResizing?: boolean;
   /** Maximum field height with automatic height control */
   autoResizingMaxHeight?: number;
+  /** Whether is field auto resizing which adjusts its height while typing */
+  isAutoResizing?: boolean;
+  label: ReactNode;
 }
 
 export interface SpiritTextAreaProps extends TextAreaProps {}
diff --git a/packages/web-react/src/types/textField.ts b/packages/web-react/src/types/textField.ts
index fc86305b44..b2075ae4f0 100644
--- a/packages/web-react/src/types/textField.ts
+++ b/packages/web-react/src/types/textField.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -31,5 +32,5 @@ export interface TextFieldProps
 }
 
 export interface SpiritTextFieldProps extends TextFieldProps {
-  label: string;
+  label: ReactNode;
 }
diff --git a/packages/web-react/src/types/toggle.ts b/packages/web-react/src/types/toggle.ts
index 1fdaf9e7a6..c862905ecd 100644
--- a/packages/web-react/src/types/toggle.ts
+++ b/packages/web-react/src/types/toggle.ts
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -27,7 +27,7 @@ export interface ToggleProps
   isDisabled?: boolean;
   isFluid?: boolean;
   isLabelHidden?: boolean;
-  label: string;
+  label: ReactNode;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   validationText?: ValidationTextType;
 }