diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
index ea2b05b180..783015abef 100644
--- a/etc/lime-elements.api.md
+++ b/etc/lime-elements.api.md
@@ -555,6 +555,17 @@ export namespace Components {
         "allowClicksElement": HTMLElement;
         "open": boolean;
     }
+    export interface LimelNotchedOutline {
+        "disabled": boolean;
+        "hasFloatingLabel": boolean;
+        "hasLeadingIcon": boolean;
+        "hasValue": boolean;
+        "invalid": boolean;
+        "label"?: string;
+        "labelId"?: string;
+        "readonly": boolean;
+        "required": boolean;
+    }
     // (undocumented)
     export interface LimelPicker {
         "actionPosition": ActionPosition;
@@ -1119,6 +1130,8 @@ export namespace JSX {
         // (undocumented)
         "limel-menu-surface": LimelMenuSurface;
         // (undocumented)
+        "limel-notched-outline": LimelNotchedOutline;
+        // (undocumented)
         "limel-picker": LimelPicker;
         // (undocumented)
         "limel-popover": LimelPopover;
@@ -1618,6 +1631,17 @@ export namespace JSX {
         "onDismiss"?: (event: LimelMenuSurfaceCustomEvent<void>) => void;
         "open"?: boolean;
     }
+    export interface LimelNotchedOutline {
+        "disabled"?: boolean;
+        "hasFloatingLabel"?: boolean;
+        "hasLeadingIcon"?: boolean;
+        "hasValue"?: boolean;
+        "invalid"?: boolean;
+        "label"?: string;
+        "labelId"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+    }
     // (undocumented)
     export interface LimelPicker {
         "actionPosition"?: ActionPosition;
diff --git a/src/components/chip-set/chip-set.e2e.ts b/src/components/chip-set/chip-set.e2e.ts
index 60651b9f56..6317973037 100644
--- a/src/components/chip-set/chip-set.e2e.ts
+++ b/src/components/chip-set/chip-set.e2e.ts
@@ -25,7 +25,9 @@ describe('limel-chip-set', () => {
             ]);
             await page.waitForChanges();
 
-            label = await page.find('limel-chip-set >>> .chip-set__label');
+            label = await page.find(
+                'limel-chip-set >>> .limel-notched-outline--notch label',
+            );
             chips = await page.findAll('limel-chip-set >>> limel-chip');
 
             spy = await chipSet.spyOnEvent('interact');
diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index 85cc8e71b8..ed93941943 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -6,9 +6,6 @@
 
 @use '@material/textfield';
 @use '@material/textfield/icon';
-@use '@material/notched-outline/mdc-notched-outline';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
 
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to transparent.
@@ -21,14 +18,7 @@
 @include textfield.core-styles;
 @include icon.icon-core-styles;
 
-@include shared_input-select-picker.outlined-style-overrides;
-@include shared_input-select-picker.floating-label-overrides;
-@include shared_input-select-picker.cropped-label-hack;
-@include shared_input-select-picker.disabled-overrides;
-@include shared_input-select-picker.readonly-overrides;
 @include shared_input-select-picker.leading-icon;
-@include shared_input-select-picker.lime-empty-value-for-readonly;
-@include shared_input-select-picker.lime-looks-like-input-value;
 
 $height-of-chip-set-input: functions.pxToRem(36);
 $leading-icon-space: 1.5rem;
@@ -37,6 +27,21 @@ $leading-icon-space: 1.5rem;
     isolation: isolate;
 }
 
+:host(limel-chip-set[type='input']) {
+    limel-notched-outline {
+        [slot='content'] {
+            min-height: shared_input-select-picker.$height-of-mdc-text-field;
+        }
+    }
+}
+
+:host(limel-chip-set:not([type='input'])) {
+    .limel-notched-outline {
+        --limel-notched-outline-border-color: transparent;
+        --limel-notched-outline-background-color: transparent;
+    }
+}
+
 .mdc-chip-set {
     display: flex;
     flex-wrap: wrap;
@@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
     min-height: shared_input-select-picker.$height-of-mdc-text-field;
     position: relative;
 
-    &.chip-set--with-label {
-        .lime-floating-label--float-above {
-            padding-left: functions.pxToRem(4);
-        }
-    }
-
     &.mdc-chip-set--input {
         padding: 0.4rem 0.5rem;
         width: 100%;
@@ -75,7 +74,7 @@ $leading-icon-space: 1.5rem;
         @include shared_input-select-picker.input-field-placeholder;
 
         width: auto;
-        padding: 0 functions.pxToRem(12);
+        padding: 0 0.5rem;
 
         flex-grow: 1;
         flex-shrink: 0;
@@ -100,39 +99,6 @@ $leading-icon-space: 1.5rem;
     }
 }
 
-// used only in chipsets that do not have input
-.chip-set__label {
-    @include mixins.truncate-text;
-    width: 120%; // `120%` instead of `100%`,
-    // because this class is always together with `mdc-floating-label--float-above`,
-    // which scales the label down. So there is more horizontal space to display the label in.
-    top: functions.pxToRem(13);
-    padding-left: functions.pxToRem(20);
-}
-
-// Because MDC removes some classes in chipset, we add custom
-// classes with similar names and expected behavior & styles.
-// These class names start with `lime-`, instead of `mdc-`.
-.lime-notched-outline--notched {
-    .mdc-notched-outline__notch {
-        border-top: 1px solid transparent !important;
-
-        .lime-floating-label--float-above {
-            // This overrides MDC's original top value which is `top: 50%`.
-            // The reason is that a % value aligns the label in a wrong position
-            // vertically, when there are multiple rows of chips.
-            top: functions.pxToRem(27);
-
-            transform: translateY(-34.75px) scale(0.75) !important;
-            font-size: shared_input-select-picker.$cropped-label-hack--font-size;
-        }
-    }
-}
-
-.force-invalid {
-    @extend .mdc-text-field--invalid;
-}
-
 .clear-all-button {
     @include mixins.clear-all-button;
     @include mixins.visualize-keyboard-focus;
@@ -144,14 +110,14 @@ $leading-icon-space: 1.5rem;
     opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).
 
     &:focus,
-    .has-chips:not(.mdc-text-field--disabled):hover &,
-    .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {
+    .has-chips:not(.disabled):hover &,
+    .has-chips:not(.disabled).mdc-text-field--focused & {
         opacity: 1;
         outline: none;
     }
 
     .mdc-chip-set:not(.has-chips) &,
-    .has-chips.mdc-text-field--disabled & {
+    .has-chips.disabled & {
         display: none; // Won't receive focus when disabled
     }
 }
@@ -161,15 +127,6 @@ $leading-icon-space: 1.5rem;
         .mdc-text-field__input {
             padding-left: $leading-icon-space;
         }
-
-        .mdc-floating-label {
-            &:not(.lime-floating-label--float-above) {
-                left: $leading-icon-space;
-            }
-            &.mdc-floating-label--float-above {
-                left: functions.pxToRem(4);
-            }
-        }
     }
 
     limel-chip {
@@ -207,10 +164,3 @@ limel-chip {
 
 @import './partial-styles/_readonly';
 @import './partial-styles/_helper-text';
-
-// To make the input field render smaller than the default MDC UI
-.mdc-text-field {
-    &.mdc-text-field--outlined {
-        min-height: shared_input-select-picker.$height-of-mdc-text-field;
-    }
-}
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
index 680c4ce493..5887692d8a 100644
--- a/src/components/chip-set/chip-set.tsx
+++ b/src/components/chip-set/chip-set.tsx
@@ -7,7 +7,6 @@ import {
     Event,
     EventEmitter,
     h,
-    Host,
     Method,
     Prop,
     State,
@@ -18,6 +17,7 @@ import translate from '../../global/translations';
 import { getHref, getTarget } from '../../util/link-helper';
 import { isEqual } from 'lodash-es';
 import { LimelChipCustomEvent } from '../../components';
+import { createRandomString } from '../../util/random-string';
 
 const INPUT_FIELD_TABINDEX = 1;
 
@@ -243,8 +243,10 @@ export class ChipSet {
 
     private mdcTextField: MDCTextField;
     private readonly handleKeyDown = handleKeyboardEvent;
+    private labelId: string;
 
     constructor() {
+        this.labelId = createRandomString();
         this.renderChip = this.renderChip.bind(this);
         this.renderInputChip = this.renderInputChip.bind(this);
         this.isFull = this.isFull.bind(this);
@@ -337,35 +339,70 @@ export class ChipSet {
     }
 
     public render() {
-        if (this.type === 'input') {
-            return this.renderInputChips();
-        }
-
         const classes = {
             'mdc-chip-set': true,
-            disabled: this.disabled || this.readonly,
             'mdc-text-field--with-trailing-icon': true,
+            disabled: this.disabled || this.readonly,
         };
+
         if (this.type) {
             classes[`mdc-chip-set--${this.type}`] = true;
         }
 
-        const chipSetLabel = this.renderChipSetLabel();
-        if (chipSetLabel) {
-            classes['chip-set--with-label'] = true;
+        if (this.type === 'input') {
+            Object.assign(classes, {
+                'mdc-text-field': true,
+                'mdc-text-field--outlined': true,
+                'mdc-chip-set--input': true,
+                'lime-text-field--readonly': this.readonly,
+                'has-chips': this.value.length !== 0,
+                'has-leading-icon': this.leadingIcon !== null,
+                'has-clear-all-button': this.clearAllButton,
+            });
         }
 
         const value = this.getValue();
 
-        return (
-            <div class={classes} role="grid">
-                {chipSetLabel}
-                {value.map(this.renderChip)}
-                {this.renderHelperLine()}
-            </div>
-        );
+        return [
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value?.length}
+                hasLeadingIcon={!!this.leadingIcon}
+                hasFloatingLabel={this.floatLabelAbove()}
+            >
+                <div slot="content" {...this.getContentProps()} class={classes}>
+                    {this.renderContent(value)}
+                </div>
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
     }
 
+    private getContentProps() {
+        if (this.type === 'input') {
+            return {
+                onClick: this.handleTextFieldFocus,
+            };
+        }
+
+        return {
+            role: 'grid',
+        };
+    }
+
+    private renderContent = (value: Chip[]) => {
+        if (this.type === 'input') {
+            return this.renderInputChips();
+        }
+
+        return value.map(this.renderChip);
+    };
+
     private readonly getValue = () => {
         return this.value.map((chip) => ({
             ...chip,
@@ -385,113 +422,42 @@ export class ChipSet {
         this.initialize();
     }
 
-    private renderChipSetLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <label class="chip-set__label mdc-floating-label mdc-floating-label--float-above">
-                {this.label}
-            </label>
-        );
-    }
-
     private renderInputChips() {
-        return (
-            <Host>
-                <div
-                    class={{
-                        'mdc-text-field mdc-text-field--outlined': true,
-                        'mdc-chip-set mdc-chip-set--input': true,
-                        'force-invalid': this.isInvalid(),
-                        'mdc-text-field--disabled':
-                            this.readonly || this.disabled,
-                        'lime-text-field--readonly': this.readonly,
-                        'has-chips mdc-text-field--label-floating':
-                            this.value.length !== 0,
-                        'has-leading-icon': this.leadingIcon !== null,
-                        'has-clear-all-button': this.clearAllButton,
-                    }}
-                    onClick={this.handleTextFieldFocus}
-                >
-                    {this.value.map(this.renderInputChip)}
-                    <input
-                        tabIndex={INPUT_FIELD_TABINDEX}
-                        type={this.inputType}
-                        id="input-element"
-                        disabled={this.readonly || this.disabled}
-                        class={{
-                            'mdc-text-field__input': true,
-                            hidden: this.inputHidden(),
-                        }}
-                        value={this.textValue}
-                        onBlur={this.handleInputBlur}
-                        onFocus={this.handleTextFieldFocus}
-                        onKeyDown={this.handleKeyDown}
-                        onInput={this.handleTextInput}
-                        // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emitting our own change event
-                        onChange={this.inputFieldOnChange}
-                        placeholder={this.isFull() ? '' : this.searchLabel}
-                        readonly={this.isFull()}
-                        autocomplete={this.autocomplete}
-                    />
-                    <div
-                        class={{
-                            'mdc-notched-outline': true,
-                            'mdc-notched-outline--upgraded': true,
-                            'mdc-text-field--required': this.required,
-                            'lime-notched-outline--notched':
-                                this.floatLabelAbove(),
-                        }}
-                    >
-                        <div class="mdc-notched-outline__leading" />
-                        {this.renderLabel()}
-                        <div class="mdc-notched-outline__trailing" />
-                    </div>
-                    {this.renderLeadingIcon()}
-                    {this.renderEmptyValueForReadonly()}
-                    {this.renderClearAllChipsButton()}
-                </div>
-                {this.renderHelperLine()}
-            </Host>
-        );
-    }
-
-    private readonly renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.value.length === 0) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
-    private renderLabel() {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-text-field--disabled': this.readonly || this.disabled,
-            'mdc-floating-label--required': this.required,
-            'lime-floating-label--float-above': this.floatLabelAbove(),
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <div class="mdc-notched-outline__notch">
-                <label class={labelClassList} htmlFor="input-element">
-                    {this.label}
-                </label>
-            </div>
-        );
+        return [
+            this.value.map(this.renderInputChip),
+            <input
+                tabIndex={INPUT_FIELD_TABINDEX}
+                type={this.inputType}
+                id={this.labelId}
+                disabled={this.readonly || this.disabled}
+                class={{
+                    'mdc-text-field__input': true,
+                    hidden: this.inputHidden(),
+                }}
+                value={this.textValue}
+                onBlur={this.handleInputBlur}
+                onFocus={this.handleTextFieldFocus}
+                onKeyDown={this.handleKeyDown}
+                onInput={this.handleTextInput}
+                // Some browsers emit a change event on input elements, we need to stop
+                // that event from propagating since we are emitting our own change event
+                onChange={this.inputFieldOnChange}
+                placeholder={this.isFull() ? '' : this.searchLabel}
+                readonly={this.isFull()}
+                autocomplete={this.autocomplete}
+            />,
+            this.renderLeadingIcon(),
+            this.renderClearAllChipsButton(),
+        ];
     }
 
     private readonly floatLabelAbove = () => {
-        if (!!this.value.length || this.editMode || this.readonly) {
+        if (
+            !!this.value.length ||
+            this.editMode ||
+            this.readonly ||
+            this.textValue
+        ) {
             return true;
         }
     };
diff --git a/src/components/chip-set/partial-styles/_readonly.scss b/src/components/chip-set/partial-styles/_readonly.scss
index a59794ef4e..836319e928 100644
--- a/src/components/chip-set/partial-styles/_readonly.scss
+++ b/src/components/chip-set/partial-styles/_readonly.scss
@@ -1,6 +1,6 @@
 :host(limel-chip-set[readonly]) {
     .mdc-text-field {
-        &.mdc-text-field--disabled {
+        &.disabled {
             pointer-events: auto;
         }
     }
diff --git a/src/components/input-field/input-field.e2e.ts b/src/components/input-field/input-field.e2e.ts
index bf96fa12d8..f7290fc43f 100644
--- a/src/components/input-field/input-field.e2e.ts
+++ b/src/components/input-field/input-field.e2e.ts
@@ -5,8 +5,6 @@ describe('limel-input-field', () => {
     let page: E2EPage;
     let limelInput: E2EElement;
     let inputContainer: E2EElement;
-    let label: E2EElement;
-    let outline: E2EElement;
 
     const types: Array<{ name: InputType; [key: string]: any }> = [
         { name: 'email' },
@@ -97,42 +95,6 @@ describe('limel-input-field', () => {
                     expect(nativeInput).toHaveClass('mdc-text-field__input');
                 });
             });
-            describe('the label', () => {
-                beforeEach(async () => {
-                    label = await page.find(
-                        'limel-input-field>>>.mdc-floating-label',
-                    );
-                });
-                it('is NOT floating', () => {
-                    expect(label).not.toHaveClass(
-                        'mdc-floating-label--float-above',
-                    );
-                });
-                describe('after focusing', () => {
-                    beforeEach(async () => {
-                        label.click();
-                        await page.waitForEvent('click');
-                        await page.waitForChanges();
-                    });
-                    it('IS floating', () => {
-                        expect(label).toHaveClass(
-                            'mdc-floating-label--float-above',
-                        );
-                    });
-                });
-            });
-            describe('the outline', () => {
-                beforeEach(async () => {
-                    outline = await page.find(
-                        'limel-input-field>>>.mdc-notched-outline',
-                    );
-                });
-                it('has the expected structure', () => {
-                    expect(replaceLabelId(outline.outerHTML)).toEqual(
-                        '<span class="mdc-notched-outline mdc-notched-outline--upgraded" tabindex="-1"><span class="mdc-notched-outline__leading"></span><span class="mdc-notched-outline__notch"><span class="mdc-floating-label" id="tf-input-label">Test</span></span><span class="mdc-notched-outline__trailing"></span></span>',
-                    );
-                });
-            });
             describe('when invalid is set to true', () => {
                 beforeEach(async () => {
                     limelInput.setAttribute('invalid', true);
@@ -247,21 +209,11 @@ describe('limel-input-field', () => {
             page = await createPage(`
                 <limel-input-field
                     type="urlAsText"
-                    label="Website"
                     show-link="true"
+                    label="Test"
                 ></limel-input-field>
             `);
 
-            await page.evaluate(() => {
-                const elements = document.querySelectorAll(
-                    '.mdc-floating-label',
-                );
-
-                elements.forEach((el) => {
-                    el.id = 'test';
-                });
-            });
-
             limelInput = await page.find('limel-input-field');
             inputContainer = await page.find(
                 'limel-input-field>>>label.mdc-text-field',
@@ -354,10 +306,3 @@ describe('limel-input-field', () => {
 async function createPage(content: string) {
     return newE2EPage({ html: content });
 }
-
-function replaceLabelId(HTML: string) {
-    return HTML.replace(
-        /"a_(\d|[a-f]){8}-(\d|[a-f]){4}-(\d|[a-f]){4}-(\d|[a-f]){4}-(\d|[a-f]){12}"/g,
-        '"tf-input-label"',
-    );
-}
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
index 855877f131..a4ef9a38f0 100644
--- a/src/components/input-field/input-field.scss
+++ b/src/components/input-field/input-field.scss
@@ -7,10 +7,6 @@
 
 @use '@material/textfield';
 @use '@material/textfield/icon';
-@use '@material/notched-outline/mdc-notched-outline';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
-@use '@material/ripple';
 @use '@material/list';
 @use '@material/elevation';
 @use '@material/menu-surface';
@@ -47,14 +43,9 @@
 @include textfield.core-styles;
 @include icon.icon-core-styles;
 
-@include shared_input-select-picker.outlined-style-overrides;
 @include shared_input-select-picker.readonly-overrides;
-@include shared_input-select-picker.cropped-label-hack;
-@include shared_input-select-picker.disabled-overrides;
 @include shared_input-select-picker.leading-icon;
 @include shared_input-select-picker.trailing-icon;
-@include shared_input-select-picker.floating-label-overrides;
-@include shared_input-select-picker.lime-empty-value-for-readonly;
 @include shared_input-select-picker.lime-looks-like-input-value;
 
 .lime-text-field--empty {
@@ -65,6 +56,15 @@
     }
 }
 
+limel-notched-outline {
+    &[has-value],
+    &:focus-within {
+        .mdc-text-field__affix {
+            opacity: 1;
+        }
+    }
+}
+
 .mdc-text-field {
     width: 100%;
 
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index c5e1af28dd..e9b5a9392a 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -321,21 +321,26 @@ export class InputField {
         }
 
         return [
-            <label class={this.getContainerClassList()}>
-                <span class="mdc-notched-outline" tabindex="-1">
-                    <span class="mdc-notched-outline__leading"></span>
-                    {this.renderLabel()}
-                    <span class="mdc-notched-outline__trailing"></span>
-                </span>
-                {this.renderLeadingIcon()}
-                {this.renderEmptyValueForReadonly()}
-                {this.renderPrefix()}
-                {this.renderFormattedNumber()}
-                {this.renderInput(properties)}
-                {this.renderSuffix()}
-                {this.renderTextarea(properties)}
-                {this.renderTrailingLinkOrButton()}
-            </label>,
+            <limel-notched-outline
+                labelId={this.labelId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid || this.isInvalid()}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasLeadingIcon={!!this.leadingIcon}
+            >
+                <label slot="content" class={this.getContainerClassList()}>
+                    {this.renderLeadingIcon()}
+                    {this.renderPrefix()}
+                    {this.renderFormattedNumber()}
+                    {this.renderInput(properties)}
+                    {this.renderSuffix()}
+                    {this.renderTextarea(properties)}
+                    {this.renderTrailingLinkOrButton()}
+                </label>
+            </limel-notched-outline>,
             this.renderHelperLine(),
             this.renderAutocompleteList(),
         ];
@@ -408,7 +413,6 @@ export class InputField {
     private getContainerClassList = () => {
         const classList = {
             'mdc-text-field': true,
-            'mdc-text-field--no-label': !this.label,
             'mdc-text-field--outlined': true,
             'mdc-text-field--invalid': this.isInvalid(),
             'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -569,16 +573,6 @@ export class InputField {
         );
     };
 
-    private renderEmptyValueForReadonly = () => {
-        if (this.readonly && this.isEmpty()) {
-            return (
-                <span class="lime-empty-value-for-readonly lime-looks-like-input-value">
-                    –
-                </span>
-            );
-        }
-    };
-
     private renderSuffix = () => {
         if (!this.hasSuffix() || this.type === 'textarea') {
             return;
@@ -650,26 +644,6 @@ export class InputField {
         }
     };
 
-    private renderLabel = () => {
-        const labelClassList = {
-            'mdc-floating-label': true,
-            'mdc-floating-label--float-above':
-                !this.isEmpty() || this.isFocused || this.readonly,
-        };
-
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <span class="mdc-notched-outline__notch">
-                <span class={labelClassList} id={this.labelId}>
-                    {this.label}
-                </span>
-            </span>
-        );
-    };
-
     private renderLeadingIcon = () => {
         if (this.type === 'textarea') {
             return;
diff --git a/src/components/notched-outline/examples/notched-outline-basic.scss b/src/components/notched-outline/examples/notched-outline-basic.scss
new file mode 100644
index 0000000000..d1712b75b4
--- /dev/null
+++ b/src/components/notched-outline/examples/notched-outline-basic.scss
@@ -0,0 +1,22 @@
+* {
+    box-sizing: border-box;
+}
+
+section {
+    padding: 1rem;
+    background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+    background-size: 0.5rem;
+}
+
+input[type='text'] {
+    // Overriding some of the native input styles for the
+    // sake of this example.
+    border: none;
+    outline: none;
+
+    height: 2.5rem;
+    width: 100%;
+    padding: 0 1rem;
+
+    background-color: transparent;
+}
diff --git a/src/components/notched-outline/examples/notched-outline-basic.tsx b/src/components/notched-outline/examples/notched-outline-basic.tsx
new file mode 100644
index 0000000000..b5d0f68d49
--- /dev/null
+++ b/src/components/notched-outline/examples/notched-outline-basic.tsx
@@ -0,0 +1,154 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Basic example
+ *
+ * Notice that the wrapping div has a hardcoded height,
+ * which results in the notched outline to wrap around
+ * the div.
+ */
+@Component({
+    tag: 'limel-example-notched-outline-basic',
+    shadow: true,
+    styleUrl: 'notched-outline-basic.scss',
+})
+export class NotchedOutlineBasicExample {
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private hasValue = false;
+
+    @State()
+    private hasLeadingIcon = false;
+
+    @State()
+    private hasFloatingLabel = false;
+
+    @State()
+    private inputValue: string;
+
+    public render() {
+        const id = 'abcd';
+
+        return [
+            <section>
+                <limel-notched-outline
+                    labelId={id}
+                    label="Label"
+                    required={this.required}
+                    invalid={this.invalid}
+                    disabled={this.disabled}
+                    readonly={this.readonly}
+                    hasValue={this.hasValue}
+                    hasLeadingIcon={this.hasLeadingIcon}
+                    hasFloatingLabel={this.hasFloatingLabel}
+                >
+                    <input
+                        slot="content"
+                        id={id}
+                        type="text"
+                        required={this.required}
+                        disabled={this.disabled}
+                        readonly={this.readonly}
+                        value={this.inputValue}
+                        onInput={this.handleInput}
+                    />
+                </limel-notched-outline>
+            </section>,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.disabled}
+                    label="Disabled"
+                    onChange={this.setDisabled}
+                />
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+                <limel-checkbox
+                    checked={this.required}
+                    label="Required"
+                    onChange={this.setRequired}
+                />
+                <limel-checkbox
+                    checked={this.invalid}
+                    label="Invalid"
+                    onChange={this.setInvalid}
+                />
+                <hr
+                    style={{
+                        gridColumn: '1/-1',
+                    }}
+                />
+                <limel-checkbox
+                    checked={this.hasValue}
+                    label="Has value"
+                    onChange={this.setHasValue}
+                />
+                <limel-checkbox
+                    checked={this.hasLeadingIcon}
+                    label="Has leading icon"
+                    onChange={this.setHasLeadingIcon}
+                />
+                <limel-checkbox
+                    checked={this.hasFloatingLabel}
+                    label="Has floating label"
+                    onChange={this.setHasFloatingLabel}
+                />
+            </limel-example-controls>,
+            <limel-example-value value={this.hasValue} />,
+        ];
+    }
+
+    private handleInput = (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        this.inputValue = input.value;
+        this.hasValue = !!input.value;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setHasValue = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasValue = event.detail;
+    };
+
+    private setHasLeadingIcon = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasLeadingIcon = event.detail;
+    };
+
+    private setHasFloatingLabel = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.hasFloatingLabel = event.detail;
+    };
+}
diff --git a/src/components/notched-outline/notched-outline.scss b/src/components/notched-outline/notched-outline.scss
new file mode 100644
index 0000000000..a12953e0b8
--- /dev/null
+++ b/src/components/notched-outline/notched-outline.scss
@@ -0,0 +1,249 @@
+@use '../../style/mixins.scss';
+@use '../../style/internal/shared_input-select-picker';
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+
+$border-radius: 0.25rem;
+$value-top: 0.62rem;
+
+limel-notched-outline {
+    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};
+    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};
+
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+}
+
+.limel-notched-outline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    [slot='content'] {
+        background-color: var(--limel-notched-outline-background-color);
+        border-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    // Why is everything prefixed?
+    // Because the component has `shadow: false;`
+    // and this ensures that we are not inheriting styles.
+    &--outlines {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: var(--limel-notched-outline-z-index, 0);
+        display: flex;
+    }
+
+    &--leading-outline,
+    &--notch,
+    &--trailing-outline {
+        transition: border-color 0.2s ease;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--limel-notched-outline-border-color);
+    }
+
+    &--leading-outline {
+        flex-shrink: 0;
+        width: 0.75rem;
+        border-right-width: 0;
+        border-top-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-left-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--notch {
+        flex-shrink: 0;
+
+        position: relative;
+        z-index: 2;
+
+        border-top-color: var(
+            --limel-notched-outline-notch-border-top-color,
+            var(--limel-notched-outline-border-color)
+        );
+        border-right-width: 0;
+        border-left-width: 0;
+
+        max-width: calc(100% - 1.5rem);
+
+        label {
+            all: unset;
+            @include mixins.truncate-text;
+            position: relative;
+            transition:
+                color 0.2s ease,
+                font-size 0.2s ease,
+                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+
+            transform: translate3d(
+                var(--limel-notched-outline-label-transform-x, 0),
+                var(--limel-notched-outline-label-transform-y, $value-top),
+                0
+            );
+            display: block;
+            padding: 0 0.25rem;
+
+            color: var(
+                --limel-notched-outline-label-color,
+                #{shared_input-select-picker.$label-color}
+            );
+            font-size: var(
+                --limel-notched-outline-label-font-size,
+                #{shared_input-select-picker.$cropped-label-hack--font-size}
+            );
+            letter-spacing: var(
+                --mdc-typography-subtitle1-letter-spacing,
+                0.009375em
+            );
+
+            &:after {
+                position: absolute;
+                right: 0;
+                padding: 0 0.25rem;
+            }
+        }
+    }
+
+    &--trailing-outline {
+        flex-grow: 1;
+        border-left-width: 0;
+        border-top-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+        border-bottom-right-radius: var(
+            --limel-notched-outline-border-radius,
+            $border-radius
+        );
+    }
+
+    &--empty-readonly-value {
+        @include shared_input-select-picker.lime-looks-like-input-value;
+        position: absolute;
+        top: $value-top;
+        left: 1rem;
+    }
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};
+        }
+    }
+
+    &[disabled]:not([disabled='false']) {
+        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};
+    }
+
+    &[required]:not([required='false']) {
+        .limel-notched-outline--notch {
+            label {
+                padding-right: 0.75rem;
+
+                &:after {
+                    content: '*';
+                    scale: 1.3;
+                }
+            }
+        }
+    }
+
+    &[invalid]:not([invalid='false']) {
+        &:not([disabled]:not([disabled='false'])) {
+            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            &:hover {
+                --limel-notched-outline-border-color: var(
+                    --lime-error-text-color
+                );
+            }
+        }
+
+        .limel-notched-outline--notch {
+            label {
+                &:after {
+                    color: var(--lime-error-text-color);
+                }
+            }
+        }
+    }
+
+    &[readonly]:not([readonly='false']) {
+        --limel-notched-outline-border-color: transparent !important;
+        --limel-notched-outline-background-color: transparent !important;
+
+        .limel-notched-outline--notch {
+            label {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    &[has-leading-icon] {
+        &:not([has-leading-icon='false']):not([has-floating-label]):not(
+                [has-value]
+            ) {
+            --limel-notched-outline-label-transform-x: 1.25rem;
+        }
+
+        .limel-notched-outline--empty-readonly-value {
+            left: 2.25rem;
+        }
+    }
+}
+
+// Transitioning the floating label
+@mixin float-label {
+    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+    --limel-notched-outline-label-transform-x: 0;
+    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+    --limel-notched-outline-notch-border-top-color: transparent;
+}
+
+limel-notched-outline {
+    &:not([disabled]:not([disabled='false'])) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+            label {
+                will-change: color, transform, font-size;
+            }
+        }
+
+        &:has([slot='content']:focus-visible),
+        &:has([slot='content']:focus-within) {
+            @include float-label;
+        }
+    }
+
+    &[has-floating-label],
+    &[has-value]:not([has-value='false']),
+    &[readonly]:not([has-value]:not([has-value='true'])) {
+        @include float-label;
+    }
+}
diff --git a/src/components/notched-outline/notched-outline.tsx b/src/components/notched-outline/notched-outline.tsx
new file mode 100644
index 0000000000..bdd0fb0f07
--- /dev/null
+++ b/src/components/notched-outline/notched-outline.tsx
@@ -0,0 +1,139 @@
+import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+@Component({
+    tag: 'limel-notched-outline',
+    styleUrl: 'notched-outline.scss',
+    shadow: false,
+})
+export class NotchedOutline {
+    /**
+     * Set to `true` when the input element is required.
+     * This applies proper visual styles, such as inclusion of an asterisk
+     * beside the label.
+     */
+    @Prop({ reflect: true })
+    public required = false;
+
+    /**
+     * Set to `true` when the input element is readonly.
+     * This applies proper visual styles, such as making the outline transparent.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input element is
+     * invalid. This applies proper visual styles, such as making the outlines red.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * Set to `true` to indicate that the input element is
+     * disabled. This applies proper visual styles, such as making the outlines
+     * and the label transparent.
+     */
+    @Prop({ reflect: true })
+    public disabled = false;
+
+    /**
+     * Label to display for the input element.
+     * :::important
+     * Note that the input element of the consumer component will be
+     * labeled by this label, using the `labelId` prop.
+     * :::
+     */
+    @Prop({ reflect: true })
+    public label?: string;
+
+    /**
+     * The `id` of the input element which should be
+     * labeled by the provided label.
+     */
+    @Prop({ reflect: true })
+    public labelId?: string;
+
+    /**
+     * Set to `true` when the user has entered a value for the input element,
+     * shrinking the label in size, and visually rendering it above the entered value.
+     */
+    @Prop({ reflect: true })
+    public hasValue = false;
+
+    /**
+     * Set to `true` when the consumer element displays a leading icon.
+     * This applies proper visual styles, such as rendering the label
+     * correctly placed beside the leading icon.
+     */
+    @Prop({ reflect: true })
+    public hasLeadingIcon = false;
+
+    /**
+     * Set to `true` when the consumer element needs to render the
+     * label above the input element, despite existence of a `value`.
+     * For example in the `text-editor` or `limel-select`,
+     * where the default layout requires a floating label.
+     */
+    @Prop({ reflect: true })
+    public hasFloatingLabel = false;
+
+    public render() {
+        return (
+            <div class="limel-notched-outline">
+                <slot name="content" />
+                <span
+                    class="limel-notched-outline--outlines"
+                    aria-hidden="true"
+                >
+                    <span class="limel-notched-outline--leading-outline" />
+                    {this.renderLabel()}
+                    <span class="limel-notched-outline--trailing-outline" />
+                    {this.renderEmptyReadonlyValue()}
+                </span>
+            </div>
+        );
+    }
+
+    private renderLabel() {
+        if (!this.label) {
+            return;
+        }
+
+        return (
+            <span class="limel-notched-outline--notch">
+                <label htmlFor={this.labelId}>{this.label}</label>
+            </span>
+        );
+    }
+
+    private renderEmptyReadonlyValue() {
+        if (!this.readonly || this.hasValue) {
+            return;
+        }
+
+        return (
+            <span
+                class="limel-notched-outline--empty-readonly-value"
+                aria-hidden="true"
+            >
+                –
+            </span>
+        );
+    }
+}
diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
index ca30e78160..41d7bfc4f1 100644
--- a/src/components/select/select.e2e.ts
+++ b/src/components/select/select.e2e.ts
@@ -11,7 +11,9 @@ describe('limel-select (native)', () => {
                 <limel-select data-native label="Favourite Doctor"></limel-select>
             `);
             limelSelect = await page.find('limel-select');
-            label = await page.find('limel-select>>>.mdc-floating-label');
+            label = await page.find(
+                'limel-select >>> .limel-notched-outline--notch label',
+            );
         });
         it('displays the correct label', () => {
             expect(label).toEqualText('Favourite Doctor');
@@ -224,7 +226,9 @@ describe('limel-select (menu)', () => {
                 <limel-select label="Favourite Doctor"></limel-select>
             `);
             limelSelect = await page.find('limel-select');
-            label = await page.find('limel-select>>>.mdc-floating-label');
+            label = await page.find(
+                'limel-select >>> .limel-notched-outline--notch label',
+            );
         });
         it('displays the correct label', () => {
             expect(label).toEqualText('Favourite Doctor');
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 79b5dd38e1..79380d8059 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -3,15 +3,16 @@
 @use '../../style/mixins';
 
 @use '@material/select/styles';
-@use '@material/floating-label';
-@use '@material/floating-label/mdc-floating-label';
 
 // Note! The `--dropdown-z-index` property is used from `select.tsx`.
 /**
  * @prop --dropdown-z-index: z-index of the dropdown menu.
  */
 
-:host {
+$border-radius: 0.375rem;
+
+:host(limel-select) {
+    --limel-notched-outline-border-radius: #{$border-radius};
     display: block;
     position: relative;
 }
@@ -20,12 +21,13 @@
     display: none;
 }
 
-.mdc-select--outlined .mdc-floating-label {
-    left: functions.pxToRem(16);
+limel-notched-outline:not([invalid]:not([invalid='false'])) {
+    .limel-notched-outline--outlines {
+        --limel-notched-outline-border-color: transparent;
+    }
 }
 
 .mdc-select__anchor,
-.mdc-floating-label,
 .mdc-select__selected-text {
     // As long as this component is depended on MDC,
     // we need to force it to be font-agnostic.
@@ -69,12 +71,6 @@
     flex-wrap: wrap;
     width: 100%;
 
-    &:not(.limel-select--readonly) {
-        .limel-select-trigger {
-            background-color: shared_input-select-picker.$background-color-focused;
-        }
-    }
-
     .mdc-select__anchor {
         height: functions.pxToRem(36);
         padding-left: functions.pxToRem(0);
@@ -85,18 +81,7 @@
         display: inline-flex;
         align-items: center;
 
-        border-radius: functions.pxToRem(5);
-
-        .mdc-floating-label {
-            color: shared_input-select-picker.$label-color;
-            width: calc(
-                100% - #{functions.pxToRem(16)}
-            ); //This forces the label to truncate when container is too little.
-            &.mdc-floating-label--float-above {
-                font-size: shared_input-select-picker.$cropped-label-hack--font-size;
-                transform: translateY(functions.pxToRem(-27)) scale(0.75);
-            }
-        }
+        border-radius: $border-radius;
     }
 
     .limel-select-trigger,
@@ -135,10 +120,6 @@
             &.limel-select--focused {
                 background-color: shared_input-select-picker.$background-color-focused;
 
-                .mdc-floating-label {
-                    color: var(--mdc-theme-primary);
-                }
-
                 .mdc-select__dropdown-icon {
                     svg {
                         fill: var(--mdc-theme-primary);
@@ -157,27 +138,11 @@
         }
     }
 
-    .readonly-option {
-        position: absolute;
-        top: 1.145rem;
-    }
-
-    &.limel-select--required {
-        .mdc-floating-label::after {
-            content: '*';
-        }
-    }
-
     &.limel-select--invalid {
         .limel-select__selected-option__text,
         .invalid-icon {
             color: var(--lime-error-text-color);
         }
-        .mdc-floating-label:not(.mdc-floating-label--float-above) {
-            max-width: calc(
-                100% - #{functions.pxToRem(64)}
-            ); // leaves space for the invalid-icon
-        }
     }
 }
 
diff --git a/src/components/select/select.template.tsx b/src/components/select/select.template.tsx
index 439c1abe9d..699aaf4d3c 100644
--- a/src/components/select/select.template.tsx
+++ b/src/components/select/select.template.tsx
@@ -3,7 +3,6 @@ import { Option } from '../select/option.types';
 import { FunctionalComponent, h } from '@stencil/core';
 import { isMultiple } from '../../util/multiple';
 import { getIconColor, getIconName } from '../icon/get-icon-props';
-
 interface SelectTemplateProps {
     disabled?: boolean;
     readonly?: boolean;
@@ -50,27 +49,34 @@ export const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (
     const classList = {
         'limel-select': true,
         'mdc-select': true,
-        'mdc-select--outlined': true,
         'mdc-select--disabled': props.disabled,
         'limel-select--readonly': props.readonly,
-        'limel-select--required': props.required,
         'limel-select--invalid': !isValid,
-        'limel-select--empty': !hasValue,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
     };
 
-    return (
-        <div class={classList}>
+    return [
+        <limel-notched-outline
+            class={classList}
+            labelId="s-label"
+            label={props.label}
+            required={props.required}
+            invalid={!isValid}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            hasValue={hasValue}
+            hasFloatingLabel={props.isOpen}
+        >
             <SelectValue
                 {...props}
                 hasValue={hasValue}
                 isValid={isValid}
                 hasEmptyText={hasEmptyText}
             />
-            <HelperText text={props.helperText} isValid={!props.invalid} />
-            <SelectDropdown {...props} />
-        </div>
-    );
+        </limel-notched-outline>,
+        <HelperText text={props.helperText} isValid={!props.invalid} />,
+        <SelectDropdown {...props} />,
+    ];
 };
 
 const SelectValue: FunctionalComponent<
@@ -85,18 +91,10 @@ const SelectValue: FunctionalComponent<
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    const labelClassList = {
-        'mdc-floating-label': true,
-        'mdc-floating-label--float-above':
-            !props.hasEmptyText ||
-            props.isOpen ||
-            props.readonly ||
-            props.hasValue,
-        'mdc-floating-label--active': props.isOpen,
-    };
 
     return (
         <button
+            slot="content"
             class={anchorClassList}
             onClick={props.open}
             onKeyPress={props.onTriggerPress}
@@ -107,16 +105,13 @@ const SelectValue: FunctionalComponent<
             aria-required={props.required}
             disabled={props.disabled || props.readonly}
         >
-            <span id="s-label" class={labelClassList}>
-                {props.label}
-            </span>
             <span class="mdc-select__selected-text-container limel-select__selected-option">
                 {getSelectedIcon(props.value)}
                 <span
                     id="s-selected-text"
                     class="mdc-select__selected-text limel-select__selected-option__text"
                 >
-                    {getSelectedText(props.value, props.readonly)}
+                    {getSelectedText(props.value)}
                 </span>
             </span>
             <ShowIcon {...props} isValid={props.isValid} />
@@ -323,22 +318,16 @@ function getMenuOptionFilter(selectIsRequired: boolean) {
     };
 }
 
-function getSelectedText(value: Option | Option[], readonly: boolean): string {
-    const emptyReadOnlyOption = <span class="readonly-option">–</span>;
-
+function getSelectedText(value: Option | Option[]): string {
     const isEmptyValue = !value || (isMultiple(value) && !value.length);
     if (isEmptyValue) {
-        return readonly ? emptyReadOnlyOption : '';
+        return '';
     }
 
     if (isMultiple(value)) {
         return value.map((option) => option.text).join(', ');
     }
 
-    if (readonly && (value.value === 'empty' || value.text === '')) {
-        return emptyReadOnlyOption;
-    }
-
     return value.text;
 }
 
diff --git a/src/components/text-editor/text-editor.scss b/src/components/text-editor/text-editor.scss
index c140449914..f4f2cc7f18 100644
--- a/src/components/text-editor/text-editor.scss
+++ b/src/components/text-editor/text-editor.scss
@@ -6,19 +6,14 @@
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).
  */
 
-@include shared_input-select-picker.lime-looks-like-input-value;
-.lime-looks-like-input-value {
-    padding: var(--limel-text-editor-padding);
-}
-
 * {
     box-sizing: border-box;
 }
 
+$min-height: 5rem;
+
 :host(limel-text-editor) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};
-    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};
-    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};
+    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`
     --limel-prosemirror-adapter-toolbar-opacity: 0.6;
     --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;
     --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;
@@ -37,7 +32,7 @@
 
     width: 100%;
     min-width: 5rem;
-    min-height: 5rem;
+    min-height: $min-height;
     height: 100%;
     max-height: var(
         --text-editor-max-height,
@@ -61,15 +56,11 @@
     --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;
     --limel-prosemirror-adapter-toolbar-opacity: 0;
     --limel-text-editor-placeholder-top: 0;
-    min-height: 2.5rem;
-}
 
-:host(limel-text-editor:hover) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};
-}
-
-:host(limel-text-editor:focus-within) {
-    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};
+    min-height: calc($min-height / 2);
+    limel-prosemirror-adapter {
+        min-height: calc($min-height / 2);
+    }
 }
 
 :host(limel-text-editor:focus-within),
@@ -80,22 +71,15 @@
 }
 
 :host(limel-text-editor[disabled]:not([disabled='false'])) {
-    @include shared_input-select-picker.looks-disabled;
-
     limel-prosemirror-adapter {
+        @include shared_input-select-picker.looks-disabled;
         pointer-events: none;
     }
 }
 
-:host(limel-text-editor[invalid]:not([invalid='false'])) {
-    --limel-text-editor-outline-color: var(--lime-error-text-color);
-}
-
 :host(limel-text-editor[readonly]:not([readonly='false'])) {
     --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;
     --limel-text-editor-placeholder-top: 0;
-    --limel-text-editor-outline-color: transparent;
-    --limel-text-editor-background-color: transparent;
 
     limel-markdown {
         // displayed when `readonly` instead of the adapter
@@ -138,74 +122,6 @@
     }
 }
 
-.notched-outline {
-    transition: bottom
-        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)
-        cubic-bezier(1, 0.09, 0, 0.89);
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    bottom: var(--limel-text-editor-notched-outline-bottom, 0);
-
-    display: flex;
-    background-color: var(--limel-text-editor-background-color);
-}
-
-.leading-outline,
-.notch,
-.trailing-outline {
-    transition: border-color 0.2s ease;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--limel-text-editor-outline-color);
-}
-
-.leading-outline {
-    flex-shrink: 0;
-    width: 0.75rem;
-    border-right-width: 0;
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-}
-
-.notch {
-    flex-shrink: 0;
-
-    position: relative;
-    z-index: 2;
-
-    border-top-width: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    max-width: calc(100% - 1.5rem);
-}
-
-.trailing-outline {
-    flex-grow: 1;
-    border-left-width: 0;
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-}
-
-label {
-    transform: translateY(-50%);
-
-    @include mixins.truncate-text;
-    display: block;
-    padding: 0 0.25rem;
-
-    color: var(--limel-text-editor-label-color);
-    font-size: 0.65rem; // `10.4px` similar to MDC's floating label
-    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
-
-    :host(limel-text-editor[required]:not([required='false'])) & {
-        &::after {
-            content: '*';
-        }
-    }
-}
-
 .placeholder {
     transition-property: top;
     transition-duration: var(
@@ -231,18 +147,12 @@ limel-prosemirror-adapter {
     flex-grow: 1;
 
     min-width: 0;
-    min-height: 0;
+    min-height: $min-height;
     height: 100%;
     overflow: hidden auto;
 }
 
 @include mixins.hide-helper-line-when-not-needed(limel-text-editor);
-:host(limel-text-editor.has-helper-text:focus-within),
-:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {
-    .notched-outline {
-        --limel-text-editor-notched-outline-bottom: 1rem;
-    }
-}
 
 :host(limel-text-editor[allow-resize]) {
     limel-prosemirror-adapter {
diff --git a/src/components/text-editor/text-editor.spec.tsx b/src/components/text-editor/text-editor.spec.tsx
index 7da57bab79..3e5c2c88c3 100644
--- a/src/components/text-editor/text-editor.spec.tsx
+++ b/src/components/text-editor/text-editor.spec.tsx
@@ -18,16 +18,22 @@ describe('limel-text-editor', () => {
         getAttributesRecursively(textEditor, ariaControls, 'aria-controls');
         getAttributesRecursively(textEditor, ids, 'id');
 
-        expect(textEditor)
-            .toEqualHtml(`<limel-text-editor allow-resize="" language="en" ui="standard">
-        <mock:shadow-root>
-          <span class="notched-outline">
-            <span class="leading-outline"></span>
-            <span class="trailing-outline"></span>
-          </span>
-          <limel-prosemirror-adapter aria-controls=${ariaControls[0]} contenttype="markdown" id=${ids[0]} language="en"></limel-prosemirror-adapter>
-        </mock:shadow-root>
-      </limel-text-editor>`);
+        const notchedOutline = textEditor.shadowRoot.querySelector(
+            'limel-notched-outline',
+        );
+        expect(notchedOutline).not.toBeFalsy();
+        expect(notchedOutline.getAttribute('hasfloatinglabel')).toBe('');
+
+        const prosemirrorAdapter = textEditor.shadowRoot.querySelector(
+            'limel-prosemirror-adapter',
+        );
+        expect(prosemirrorAdapter).not.toBeFalsy();
+        expect(prosemirrorAdapter.getAttribute('contenttype')).toBe('markdown');
+        expect(prosemirrorAdapter.getAttribute('language')).toBe('en');
+        expect(prosemirrorAdapter.getAttribute('slot')).toBe('content');
+
+        const labelId = notchedOutline.getAttribute('labelid');
+        expect(prosemirrorAdapter.getAttribute('id')).toBe(labelId);
     });
 
     test.each([
@@ -147,9 +153,14 @@ describe('limel-text-editor', () => {
         });
 
         test('it renders the label', () => {
-            const label = textEditor.shadowRoot.querySelector('label');
+            const notchedOutline = textEditor.shadowRoot.querySelector(
+                'limel-notched-outline',
+            );
+            expect(notchedOutline).not.toBeFalsy();
+            expect(notchedOutline.getAttribute('label')).toEqual('my label');
 
-            expect(label.innerHTML).toEqual('my label');
+            const hasLabelProp = notchedOutline.hasAttribute('label');
+            expect(hasLabelProp).toBe(true);
         });
     });
 });
diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx
index 61d91d8ff6..b10811cba5 100644
--- a/src/components/text-editor/text-editor.tsx
+++ b/src/components/text-editor/text-editor.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
 import { FormComponent } from '../form/form.types';
 import { Languages } from '../date-picker/date.types';
 import { createRandomString } from '../../util/random-string';
@@ -224,44 +224,39 @@ export class TextEditor implements FormComponent<string> {
     }
 
     public render() {
-        return (
-            <Host
-                class={{
-                    'has-helper-text': !!this.helperText,
-                }}
+        return [
+            <limel-notched-outline
+                labelId={this.editorId}
+                label={this.label}
+                required={this.required}
+                invalid={this.invalid}
+                disabled={this.disabled}
+                readonly={this.readonly}
+                hasValue={!!this.value}
+                hasFloatingLabel={true}
             >
-                <span class="notched-outline">
-                    <span class="leading-outline" />
-                    {this.renderLabel()}
-                    <span class="trailing-outline" />
-                </span>
                 {this.renderEditor()}
-            </Host>
-        );
+                {this.renderPlaceholder()}
+            </limel-notched-outline>,
+            this.renderHelperLine(),
+        ];
     }
 
     private renderEditor() {
-        if (this.readonly && !this.value) {
-            return [
-                <span class="lime-looks-like-input-value">–</span>,
-                this.renderHelperLine(),
-            ];
-        }
-
         if (this.readonly) {
-            return [
+            return (
                 <limel-markdown
+                    slot="content"
                     value={this.value}
                     aria-controls={this.helperTextId}
                     id={this.editorId}
-                />,
-                this.renderPlaceholder(),
-                this.renderHelperLine(),
-            ];
+                />
+            );
         }
 
-        return [
+        return (
             <limel-prosemirror-adapter
+                slot="content"
                 aria-placeholder={this.placeholder}
                 contentType={this.contentType}
                 onChange={this.handleChange}
@@ -272,24 +267,12 @@ export class TextEditor implements FormComponent<string> {
                 aria-controls={this.helperTextId}
                 id={this.editorId}
                 aria-disabled={this.disabled}
+                aria-invalid={this.invalid}
+                aria-required={this.required}
                 language={this.language}
                 triggerCharacters={this.triggers}
                 disabled={this.disabled}
-            />,
-            this.renderPlaceholder(),
-            this.renderHelperLine(),
-        ];
-    }
-
-    private renderLabel() {
-        if (!this.label) {
-            return;
-        }
-
-        return (
-            <span class="notch">
-                <label htmlFor={this.editorId}>{this.label}</label>
-            </span>
+            />
         );
     }
 
@@ -299,7 +282,7 @@ export class TextEditor implements FormComponent<string> {
         }
 
         return (
-            <span class="placeholder" aria-hidden="true">
+            <span class="placeholder" aria-hidden="true" slot="content">
                 {this.placeholder}
             </span>
         );
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index db9b5bb41e..3111388c3b 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -214,9 +214,15 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 
 @mixin leading-icon {
     .mdc-text-field__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         color: $input-text-leading-icon-color;
-        width: functions.pxToRem(24);
-        height: functions.pxToRem(24);
+
+        limel-icon {
+            width: functions.pxToRem(24);
+            height: functions.pxToRem(24);
+        }
     }
 }