diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 4e499dbb6..5b36a2b83 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -204,9 +204,10 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
 ### Clear buttons
 
 - **`showClearOnInteraction` belongs on the component that renders the clear button.** For a text
-  field or textarea wrapped in `<tedi-form-field>`, set it on the form field, not the
-  control. `<tedi-search>` owns its form field and exposes the input itself; `<tedi-select>` exposes
-  it for its own clear button. In each case, `clearable` must be true and the field must have a value.
+  field wrapped in `<tedi-form-field>`, set it on the form field, not the control (a textarea
+  never gets a clear button). `<tedi-search>` owns its form field and exposes the input itself;
+  `<tedi-select>` exposes it for its own clear button. In each case, `clearable` must be true and
+  the field must have a value.
 - With the option enabled, the clear button appears while the field is hovered, active, or contains
   focus (including keyboard focus). The default is false, which keeps the clear button visible
   whenever the clearable field has a value.
diff --git a/src/community/text-editor/text-editor.component.spec.ts b/src/community/text-editor/text-editor.component.spec.ts
index 41ecd83c4..5fdb134c6 100644
--- a/src/community/text-editor/text-editor.component.spec.ts
+++ b/src/community/text-editor/text-editor.component.spec.ts
@@ -5,6 +5,7 @@ import { By } from "@angular/platform-browser";
 import { QuillModules } from "ngx-quill";
 import type Quill from "quill";
 import {
+  FormFieldComponent,
   TEDI_TRANSLATION_DEFAULT_TOKEN,
   TediTranslationService,
 } from "@tedi-design-system/angular/tedi";
@@ -373,3 +374,34 @@ describe("TextEditorComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, TextEditorComponent, ReactiveFormsModule],
+  template: `
+    <tedi-form-field [clearable]="true">
+      <tedi-text-editor [formControl]="control" inputId="in-field" />
+    </tedi-form-field>
+  `,
+})
+class FormFieldHostComponent {
+  control = new FormControl<string>("<p>Text</p>", { nonNullable: true });
+}
+
+describe("TextEditorComponent inside tedi-form-field", () => {
+  it("gets no clear button or field box, even when clearable", () => {
+    TestBed.configureTestingModule({
+      imports: [FormFieldHostComponent],
+      providers: [
+        { provide: TediTranslationService, useClass: TranslationMock },
+        { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+      ],
+    });
+    const fixture = TestBed.createComponent(FormFieldHostComponent);
+    fixture.detectChanges();
+
+    const el: HTMLElement = fixture.nativeElement;
+    expect(el.querySelector(".tedi-form-field__clear")).toBeNull();
+    expect(el.querySelector(".tedi-form-field__box")).toBeNull();
+  });
+});
diff --git a/src/community/text-editor/text-editor.component.ts b/src/community/text-editor/text-editor.component.ts
index 844379dbb..b42edaca4 100644
--- a/src/community/text-editor/text-editor.component.ts
+++ b/src/community/text-editor/text-editor.component.ts
@@ -260,6 +260,9 @@ export class TextEditorComponent
   readonly touched = this.derived.touched;
   readonly dirty = this.derived.dirty;
 
+  /** Rich text takes no clear button, even inside a `clearable` form field. */
+  readonly clearButton = false;
+
   readonly disabled = computed(
     () => this.formDisabled() || (this.fieldContext?.disabled() ?? false),
   );
diff --git a/src/community/text-editor/text-editor.stories.ts b/src/community/text-editor/text-editor.stories.ts
index a6d0fc27f..4dc2e9f28 100644
--- a/src/community/text-editor/text-editor.stories.ts
+++ b/src/community/text-editor/text-editor.stories.ts
@@ -11,6 +11,8 @@ import {
 import { TextEditorComponent } from "./text-editor.component";
 
 /**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.77.99?node-id=9938-87562&m=dev" target="_blank">Figma ↗</a>
+ *
  * Rich text editor built on <a href="https://github.com/KillerCodeMonkey/ngx-quill" target="_blank">ngx-quill ↗</a>.
  *
  * Install `ngx-quill` and `quill` yourself — they are optional peer dependencies
diff --git a/src/tedi/components/content/table/table.component.html b/src/tedi/components/content/table/table.component.html
index eed85625d..641c6315e 100644
--- a/src/tedi/components/content/table/table.component.html
+++ b/src/tedi/components/content/table/table.component.html
@@ -326,6 +326,7 @@
                     (input)="
                       handleColumnFilter(column, $any($event.target).value)
                     "
+                    (clear)="handleColumnFilter(column, '')"
                   />
                 </tedi-form-field>
               }
diff --git a/src/tedi/components/content/table/table.component.spec.ts b/src/tedi/components/content/table/table.component.spec.ts
index c80f5d710..46e78d62d 100644
--- a/src/tedi/components/content/table/table.component.spec.ts
+++ b/src/tedi/components/content/table/table.component.spec.ts
@@ -689,6 +689,34 @@ describe("TediTableComponent", () => {
       expect(rows[0].textContent).toContain("Anna");
     });
 
+    it("resets the column filter from the clear button", () => {
+      const fixture = setupHost();
+      fixture.componentInstance.enableColumnFilters.set(true);
+      fixture.detectChanges();
+      const rows = () =>
+        fixture.nativeElement.querySelectorAll(
+          ".tedi-table__body .tedi-table__row",
+        ).length;
+      const total = rows();
+      const input = fixture.nativeElement.querySelector(
+        'tr.tedi-table__row--filter input[aria-label="Filter Name"]',
+      ) as HTMLInputElement;
+      input.value = "Anna";
+      input.dispatchEvent(new Event("input"));
+      fixture.detectChanges();
+      expect(rows()).toBe(1);
+
+      (
+        input
+          .closest("tedi-form-field")!
+          .querySelector(".tedi-form-field__clear") as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(input.value).toBe("");
+      expect(rows()).toBe(total);
+    });
+
     it("clearFilters() resets every column filter at once", () => {
       const fixture = setupHost();
       fixture.componentInstance.enableColumnFilters.set(true);
diff --git a/src/tedi/components/form/date-field/date-field.component.spec.ts b/src/tedi/components/form/date-field/date-field.component.spec.ts
index 90a77b01b..7ffd13b02 100644
--- a/src/tedi/components/form/date-field/date-field.component.spec.ts
+++ b/src/tedi/components/form/date-field/date-field.component.spec.ts
@@ -1426,6 +1426,7 @@ describe("DateFieldComponent", () => {
       fixture.componentRef.setInput("value", new Date(2026, 4, 14));
       fixture.detectChanges();
 
+      expect(component.clearableResolved()).toBe(true);
       expect(component.canClear()).toBe(true);
       expect(getClear(el)).not.toBeNull();
     });
@@ -1470,6 +1471,31 @@ describe("DateFieldComponent", () => {
       expect(component.useNativePickerEffective()).toBe(false);
       expect(getClear(el)).not.toBeNull();
     });
+
+    it("converts static attribute values to booleans", () => {
+      const { component, fixture } = createField();
+      fixture.componentRef.setInput("value", new Date(2026, 4, 14));
+
+      fixture.componentRef.setInput("clearable", "false");
+      fixture.detectChanges();
+      expect(component.clearable()).toBe(false);
+      expect(component.canClear()).toBe(false);
+
+      fixture.componentRef.setInput("clearable", "");
+      fixture.detectChanges();
+      expect(component.clearable()).toBe(true);
+      expect(component.canClear()).toBe(true);
+    });
+
+    it("hides the clear button when a standalone field opts out", () => {
+      const { component, el, fixture } = createField();
+      fixture.componentRef.setInput("clearable", false);
+      fixture.componentRef.setInput("value", new Date(2026, 4, 14));
+      fixture.detectChanges();
+
+      expect(component.canClear()).toBe(false);
+      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
+    });
   });
 
   describe("native picker parse rejection", () => {
@@ -1695,15 +1721,21 @@ describe("DateFieldComponent with ReactiveFormsModule", () => {
     ReactiveFormsModule,
   ],
   template: `
-    <tedi-form-field>
+    <tedi-form-field [clearable]="clearable">
       <label tedi-label for="composite-date">Date</label>
-      <tedi-date-field inputId="composite-date" [formControl]="control" />
+      <tedi-date-field
+        inputId="composite-date"
+        [formControl]="control"
+        [clearable]="fieldClearable"
+      />
       <tedi-feedback-text text="Error" type="error" />
     </tedi-form-field>
   `,
 })
 class CompositeHostComponent {
   control = new FormControl<Date | Date[] | DateRange | null>(null);
+  clearable = false;
+  fieldClearable?: boolean;
 }
 
 describe("DateFieldComponent inside FormFieldComponent", () => {
@@ -1738,6 +1770,46 @@ describe("DateFieldComponent inside FormFieldComponent", () => {
     expect(el.querySelector("tedi-feedback-text")).toBeTruthy();
   });
 
+  describe("clearable driven by the form field", () => {
+    const seed = (clearable: boolean) => {
+      fixture.componentInstance.clearable = clearable;
+      fixture.componentInstance.control.setValue(new Date(2026, 4, 14));
+      fixture.detectChanges();
+    };
+
+    it("renders none when the form field opts out", () => {
+      seed(false);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(0);
+      expect(el.querySelectorAll(".tedi-form-field__clear")).toHaveLength(0);
+    });
+
+    it("renders exactly one when the form field opts in", () => {
+      seed(true);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(1);
+      expect(el.querySelectorAll(".tedi-form-field__clear")).toHaveLength(0);
+    });
+
+    it("lets the date field's own clearable override the form field", () => {
+      fixture.componentInstance.fieldClearable = true;
+      seed(false);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(1);
+
+      fixture.componentInstance.fieldClearable = false;
+      seed(true);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(0);
+    });
+
+    it("still clears programmatically when opted out", () => {
+      seed(false);
+      const component = fixture.debugElement.query(
+        By.directive(DateFieldComponent),
+      ).componentInstance as DateFieldComponent;
+
+      component.reset();
+      expect(component.value()).toBeNull();
+    });
+  });
+
   it("associates the feedback text with the input via aria-describedby", () => {
     const input = el.querySelector(
       "input.tedi-date-input__input",
diff --git a/src/tedi/components/form/date-field/date-field.component.ts b/src/tedi/components/form/date-field/date-field.component.ts
index 8da8186ed..5f7a9ac5e 100644
--- a/src/tedi/components/form/date-field/date-field.component.ts
+++ b/src/tedi/components/form/date-field/date-field.component.ts
@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -69,7 +70,6 @@ import {
   DateFieldModalComponent,
   DateFieldModalData,
 } from "./date-field-modal/date-field-modal.component";
-import { ButtonComponent } from "../../buttons";
 import { TediTranslationPipe } from "../../../services/translation/translation.pipe";
 
 type DateFieldValue = Date | Date[] | DateRange | null;
@@ -93,7 +93,6 @@ export type DateFieldSize = "default" | "small";
   imports: [
     CalendarComponent,
     DateInputComponent,
-    ButtonComponent,
     OverlayModule,
     A11yModule,
     TediTranslationPipe,
@@ -201,6 +200,15 @@ export class DateFieldComponent
    * set here.
    */
   readonly size = input<DateFieldSize | undefined>();
+  /**
+   * Whether the clear button shows once the field has a value. Falls back to the
+   * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+   * wrapper, and use this only for a standalone field.
+   */
+  readonly clearable = input<boolean | undefined, unknown>(undefined, {
+    // Unset stays `undefined` so the wrapper's `clearable` still applies.
+    transform: (v: unknown) => (v == null ? undefined : booleanAttribute(v)),
+  });
   /**
    * Forces the error state on, or off, regardless of the reactive-forms state.
    * Leave unset to let the control derive it.
@@ -430,12 +438,21 @@ export class DateFieldComponent
     invalid: computed(() => this.invalid()),
     valid: computed(() => this.valid()),
     disabled: computed(() => this.disabled()),
+    clearable: computed(() => this.clearableResolved()),
   };
 
   ngOnInit(): void {
     this.derived.connect();
   }
 
+  /** The clear button sits in the date input's action row, beside the calendar. */
+  readonly ownsClearButton = true;
+
+  /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
+  readonly clearableResolved = computed(
+    () => this.clearable() ?? this.fieldContext?.clearable() ?? true,
+  );
+
   readonly resolvedDisabledMatchers = computed<Matcher[]>(() => {
     const result: Matcher[] = [];
     const explicit = this.disabledMatchers();
@@ -559,7 +576,9 @@ export class DateFieldComponent
     () => !this.fieldDisabled() && (!this.readOnly() || this.showCalendar()),
   );
 
-  readonly canClear = computed(() => !!this.value() && this.valueEditable());
+  readonly canClear = computed(
+    () => this.clearableResolved() && !!this.value() && this.valueEditable(),
+  );
 
   readonly inputIsTrigger = computed(
     () => this.showCalendar() && this.calendarTriggerResolved() === "input",
diff --git a/src/tedi/components/form/date-field/date-field.stories.ts b/src/tedi/components/form/date-field/date-field.stories.ts
index afb4d60ce..6722f5110 100644
--- a/src/tedi/components/form/date-field/date-field.stories.ts
+++ b/src/tedi/components/form/date-field/date-field.stories.ts
@@ -6,7 +6,10 @@ import {
   Validators,
 } from "@angular/forms";
 import { DateFieldComponent } from "./date-field.component";
-import { FormFieldComponent } from "../form-field/form-field.component";
+import {
+  FormFieldComponent,
+  type InputSize,
+} from "../form-field/form-field.component";
 import { LabelComponent } from "../../content/label/label.component";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { ButtonComponent } from "../../buttons/button/button.component";
@@ -19,6 +22,8 @@ import type { DateRange } from "../../content/calendar/types";
 import type { Matcher } from "../../../utils/matchers.util";
 import { expect, userEvent, waitFor } from "storybook/test";
 
+const PSEUDO_STATE = ["Default", "Hover", "Focus", "Active"];
+
 const referenceDate = new Date(2026, 5, 15);
 const inThreeDays = new Date(2026, 5, 18);
 const inTenDays = new Date(2026, 5, 25);
@@ -75,7 +80,6 @@ const parseUS = (value: string): Date | undefined => {
  */
 const COMMON_INPUTS = [
   "mode",
-  "size",
   "selectionLevel",
   "monthYearSelectType",
   "localeCode",
@@ -97,6 +101,8 @@ const COMMON_INPUTS = [
   "fullscreen",
   "calendarTrigger",
   "numberOfMonths",
+  "clearable",
+  "size",
 ];
 
 /**
@@ -109,6 +115,10 @@ const argBindings = (exclude: string[] = []): string =>
     .join("\n          ");
 
 type DateFieldStoryArgs = DateFieldComponent & {
+  /** Story-only: size applied to the wrapping `tedi-form-field`. */
+  formFieldSize?: InputSize;
+  /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
+  formFieldClearable?: boolean;
   /** Story-only: text rendered in the sibling `<label tedi-label>`. */
   label?: string;
   /** Story-only: text rendered in a `tedi-feedback-text` below the field. */
@@ -133,14 +143,13 @@ const renderSingle: NonNullable<StoryObj<DateFieldStoryArgs>["render"]> = (
   return {
     props: { ...args, control },
     template: `
-      <tedi-form-field [size]="size">
+      <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
         <label tedi-label [for]="inputId" [required]="required">{{ label }}</label>
         <tedi-date-field
           [inputId]="inputId"
           [name]="name"
           [formControl]="control"
           [mode]="mode"
-          [size]="size"
           [selectionLevel]="selectionLevel"
           [monthYearSelectType]="monthYearSelectType"
           [localeCode]="localeCode"
@@ -162,6 +171,8 @@ const renderSingle: NonNullable<StoryObj<DateFieldStoryArgs>["render"]> = (
           [fullscreen]="fullscreen"
           [calendarTrigger]="calendarTrigger"
           [numberOfMonths]="numberOfMonths"
+          [clearable]="clearable"
+          [size]="size"
           [minDate]="minDate"
           [maxDate]="maxDate"
           [minYear]="minYear"
@@ -224,11 +235,12 @@ export default {
     name: "",
     label: "Kuupäev",
     mode: "single",
-    size: "default",
+    formFieldSize: "default",
     selectionLevel: "days",
     monthYearSelectType: "dropdown",
     localeCode: "et-EE",
     placeholder: "",
+    formFieldClearable: true,
     inputDisabled: false,
     readOnly: false,
     required: false,
@@ -255,7 +267,7 @@ export default {
         "Unique ID for label association and accessibility. Bind the sibling `<label tedi-label [for]>` to the same value.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
       },
     },
@@ -264,7 +276,7 @@ export default {
         "`name` attribute of the underlying text input, used by native form submission. Omitted from the DOM when not set.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
       },
     },
@@ -283,7 +295,7 @@ export default {
       control: { type: "radio" },
       options: ["single", "multiple", "range"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldMode",
           detail: "single \nmultiple \nrange",
@@ -296,7 +308,7 @@ export default {
         "`multiple` mode tag layout. `true` wraps tags across rows and grows the field height; `false` keeps a single row and collapses overflow into a `+N` counter.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -307,7 +319,7 @@ export default {
       control: { type: "radio" },
       options: [false, "start", "end"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "TagEllipsis", detail: "false \nstart \nend" },
         defaultValue: { summary: "false" },
       },
@@ -317,19 +329,34 @@ export default {
         "In `multiple` mode, whether tags show a remove button. `false` renders them as read-only chips.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
     },
     size: {
       description:
-        "Field size — should match the surrounding `tedi-form-field`'s `size`.",
+        "Overrides the wrapping `tedi-form-field`'s `size` for this field. Leave unset to inherit it — set `size` on the form field instead, so the label scales too. Use it for a standalone date field, where it defaults to `default`.",
+      control: { type: "radio" },
+      options: [undefined, "default", "small"],
+      table: {
+        category: "Date Field inputs",
+        type: {
+          summary: "DateFieldSize | undefined",
+          detail: "default \nsmall",
+        },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldSize: {
+      name: "size",
+      description:
+        "Set on the wrapping `tedi-form-field` — the label and the date field scale together. The date field reads it unless its own `size` is set.",
       control: { type: "radio" },
       options: ["default", "small"],
       table: {
-        category: "inputs",
-        type: { summary: "DateFieldSize", detail: "default \nsmall" },
+        category: "Form Field inputs",
+        type: { summary: "InputSize", detail: "default \nsmall" },
         defaultValue: { summary: "default" },
       },
     },
@@ -339,7 +366,7 @@ export default {
       control: { type: "radio" },
       options: ["days", "months", "years"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "CalendarView",
           detail: "days \nmonths \nyears",
@@ -353,7 +380,7 @@ export default {
       control: { type: "radio" },
       options: ["dropdown", "grid"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: '"dropdown" | "grid"' },
         defaultValue: { summary: "dropdown" },
       },
@@ -363,7 +390,7 @@ export default {
         "Earliest year offered in the calendar's year grid/dropdown. Leave `null` to default to 100 years before the current year.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "number | null" },
         defaultValue: { summary: "null" },
       },
@@ -373,7 +400,7 @@ export default {
         "Latest year offered in the calendar's year grid/dropdown. Leave `null` to default to 20 years after the current year.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "number | null" },
         defaultValue: { summary: "null" },
       },
@@ -383,7 +410,7 @@ export default {
         "BCP-47 locale for weekday/month names, the first day of the week, and the default `formatDate`/`parseDate` behaviour.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
         defaultValue: { summary: "et-EE" },
       },
@@ -392,17 +419,38 @@ export default {
       description: "Placeholder rendered in the input when there is no value.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
         defaultValue: { summary: '""' },
       },
     },
+    clearable: {
+      description:
+        "Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone date field, where it defaults to `true`.",
+      control: { type: "boolean" },
+      table: {
+        category: "Date Field inputs",
+        type: { summary: "boolean | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldClearable: {
+      name: "clearable",
+      description:
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out. The date field reads it unless its own `clearable` is set.",
+      control: { type: "boolean" },
+      table: {
+        category: "Form Field inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
     inputDisabled: {
       description:
         "Disables the field entirely — input, icon button, and calendar.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -412,7 +460,7 @@ export default {
         "Blocks typing into the input but leaves the calendar interactive — useful for guided picking. The value stays clearable while the calendar is available.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -422,7 +470,7 @@ export default {
         "Marks the input as required (sets the native `required` attribute for validation). In `multiple` mode it also prevents clearing the last selected date. The asterisk indicator lives on the sibling `<label tedi-label [required]>` — bind it there too, since DateField owns no label.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -433,7 +481,7 @@ export default {
         "Disables specific days via matchers (does not disable the whole field).",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "Matcher | Matcher[]",
           detail: `Date \n| Date[] \n| { before: Date } \n| { after: Date } \n| { from: Date; to?: Date } \n| { dayOfWeek: number[] } \n| ((date: Date) => boolean)
@@ -447,7 +495,7 @@ export default {
         "Disables all dates before this date (the boundary date itself stays enabled).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -457,7 +505,7 @@ export default {
         "Disables all dates after this date (the boundary date itself stays enabled).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -467,7 +515,7 @@ export default {
         "Predicate `(month) => boolean` returning `true` to disable a whole month in the calendar's month navigation/grid. Leave `undefined` to disable nothing.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(month: Date) => boolean" },
         defaultValue: { summary: "undefined" },
       },
@@ -477,7 +525,7 @@ export default {
         "Predicate `(year) => boolean` returning `true` to disable a whole year in the calendar's year navigation/grid. Leave `undefined` to disable nothing.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(year: Date) => boolean" },
         defaultValue: { summary: "undefined" },
       },
@@ -487,7 +535,7 @@ export default {
         "Whitelist of selectable days — an explicit `Date[]` or a predicate `(date) => boolean`. Every other day is disabled.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date[] | ((date: Date) => boolean)" },
         defaultValue: { summary: "undefined" },
       },
@@ -497,7 +545,7 @@ export default {
         "Blacklist of unavailable days — a `Date[]` or a predicate `(date) => boolean`. Takes precedence over `availableDays`.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date[] | ((date: Date) => boolean)" },
         defaultValue: { summary: "undefined" },
       },
@@ -506,7 +554,7 @@ export default {
       description: "Disable all dates before today.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -515,7 +563,7 @@ export default {
       description: "Disable all dates after today.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -525,7 +573,7 @@ export default {
         "Render the trailing/leading days from the adjacent month inside the current month's grid.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -535,7 +583,7 @@ export default {
         "Render an ISO week-number column on the left of the day grid.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -545,7 +593,7 @@ export default {
         "Enables the calendar picker UI. When `false`, hides the icon button and disables the popover/modal — the user can only type a date.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -555,7 +603,7 @@ export default {
         "Number of month grids shown side by side. Accepts a `BreakpointInput<number>` — a plain number (e.g. `2`) is honoured at every breakpoint (including mobile/modal); pass a per-breakpoint object (e.g. `{ xs: 1, lg: 2 }`) to narrow it on small screens yourself.",
       control: { type: "number", min: 1, max: 4 },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "BreakpointInput<number>",
           detail:
@@ -570,7 +618,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldUseNativePicker",
           detail: 'boolean \n"sm" | "md" | "lg" | "xl"',
@@ -583,7 +631,7 @@ export default {
         "Closes the calendar popover when the page (or a scrollable ancestor) scrolls. Scrolling inside the calendar or its nested year/month dropdown keeps it open. Only affects the popover, not the modal.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -594,7 +642,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldModalInput",
           detail: 'boolean \n"sm" | "md" | "lg" | "xl"',
@@ -608,7 +656,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "ModalFullscreen",
           detail: 'boolean \n"sm" | "md" | "lg" | "xl"',
@@ -621,7 +669,7 @@ export default {
         "What opens the calendar. `button` opens it from the icon button; `input` also opens it when the text input is focused. Accepts a `BreakpointInput` for per-breakpoint behaviour.",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "BreakpointInput<DateFieldCalendarTrigger>",
           detail: '"input" | "button" \n{ xs: ...; sm?: ...; md?: ... }',
@@ -634,7 +682,7 @@ export default {
         "Month the calendar opens on when there is no value. Ignored once a value is set (the calendar anchors to the selected date).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -644,7 +692,7 @@ export default {
         "Whether to close the picker after a selection. Defaults to `true` in `single` mode and `false` in `multiple`/`range` when left `undefined`.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean | undefined" },
         defaultValue: { summary: "undefined" },
       },
@@ -654,7 +702,7 @@ export default {
         "Custom formatter for rendering the selected value as the input's display string. Overrides the locale-aware default. Receives the `DateFieldValue` and returns a string.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(value: DateFieldValue) => string" },
         defaultValue: { summary: "undefined" },
       },
@@ -664,7 +712,7 @@ export default {
         "Custom parser for turning typed input into a value. Overrides the locale-aware default. Receives the raw string and returns a `DateFieldValue`, or `undefined` when the input can't be parsed.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(value: string) => DateFieldValue | undefined" },
         defaultValue: { summary: "undefined" },
       },
@@ -685,19 +733,21 @@ export const Size: Story = {
   render: (args) => ({
     props: { ...args },
     template: `
-      <tedi-row [cols]="1" [gap]="3">
-        <tedi-col>
-          <tedi-form-field size="default">
-            <label tedi-label for="date-size-default">Vaikimisi</label>
-            <tedi-date-field inputId="date-size-default" size="default" ${argBindings(["size"])} />
+      <tedi-row class="example-list" cols="1" gapY="3">
+        <tedi-row cols="1" [md]="{ cols: 2 }" alignItems="center" class="padding-14-16 border-bottom">
+          <b>Default</b>
+          <tedi-form-field size="default" [clearable]="formFieldClearable">
+            <label tedi-label for="date-size-default">Kuupäev</label>
+            <tedi-date-field inputId="date-size-default" ${argBindings()} />
           </tedi-form-field>
-        </tedi-col>
-        <tedi-col>
-          <tedi-form-field size="small">
-            <label tedi-label for="date-size-small">Väike</label>
-            <tedi-date-field inputId="date-size-small" size="small" ${argBindings(["size"])} />
+        </tedi-row>
+        <tedi-row cols="1" [md]="{ cols: 2 }" alignItems="center" class="padding-14-16">
+          <b>Small</b>
+          <tedi-form-field size="small" [clearable]="formFieldClearable">
+            <label tedi-label for="date-size-small">Kuupäev</label>
+            <tedi-date-field inputId="date-size-small" ${argBindings()} />
           </tedi-form-field>
-        </tedi-col>
+        </tedi-row>
       </tedi-row>
     `,
   }),
@@ -705,7 +755,7 @@ export const Size: Story = {
     docs: {
       description: {
         story:
-          "Set `size` on both the `tedi-form-field` wrapper and the `tedi-date-field` so the input height and the field chrome stay in sync.",
+          'Set the size on the surrounding `<tedi-form-field size="small">` so the label and the field scale together. The `tedi-date-field`\'s own `size` input overrides it — use that for a standalone field.',
       },
     },
   },
@@ -716,45 +766,66 @@ export const States: Story = {
     const disabledControl = new FormControl<Date | null>(inThreeDays);
     disabledControl.disable();
     return {
-      props: { ...args, disabledControl },
+      props: { ...args, disabledControl, PSEUDO_STATE },
       template: `
-        <tedi-row [cols]="1" [gap]="3">
-          <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-state-default">Vaikimisi</label>
-              <tedi-date-field inputId="date-state-default" ${argBindings()} />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-state-disabled">Mitteaktiivne</label>
-              <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-state-valid">Õnnestumine</label>
-              <tedi-date-field inputId="date-state-valid" ${argBindings()} />
-              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-state-error">Viga</label>
-              <tedi-date-field inputId="date-state-error" ${argBindings()} />
-              <tedi-feedback-text text="Tagasiside tekst" type="error" />
-            </tedi-form-field>
-          </tedi-col>
+        <tedi-row [cols]="1" [gapY]="3">
+          @for (state of PSEUDO_STATE; track state) {
+            <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+              <tedi-col width="1">
+                <p tedi-text modifiers="bold">{{ state }}</p>
+              </tedi-col>
+              <tedi-col width="5">
+                <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                  <label tedi-label [for]="state">Kuupäev</label>
+                  <tedi-date-field [inputId]="state" ${argBindings()} />
+                </tedi-form-field>
+              </tedi-col>
+            </tedi-row>
+          }
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Disabled</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-disabled">Kuupäev</label>
+                <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Success</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-valid">Kuupäev</label>
+                <tedi-date-field inputId="date-state-valid" ${argBindings()} />
+                <tedi-feedback-text text="Tagasiside tekst" type="valid" />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Error</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-error">Kuupäev</label>
+                <tedi-date-field inputId="date-state-error" ${argBindings()} />
+                <tedi-feedback-text text="Tagasiside tekst" type="error" />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
         </tedi-row>
       `,
     };
   },
   parameters: {
-    docs: {
-      description: {
-        story:
-          'Persistent field states. Disabled is driven by the form control; the success/error states come from a `tedi-feedback-text` with `type="valid"`/`"error"`, which the surrounding `tedi-form-field` reflects on the input border.',
-      },
+    pseudo: {
+      hover: "#Hover",
+      active: "#Active",
+      focusVisible: "#Focus",
     },
   },
 };
@@ -772,21 +843,24 @@ export const FieldOptions: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-opt-default">Vaikimisi kuupäevaväli</label>
+            <p tedi-text>Default date field</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-opt-default">Kuupäev</label>
               <tedi-date-field inputId="date-opt-default" ${argBindings(["placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-opt-hint">Kuupäevaväli vihjega</label>
+            <p tedi-text>Date field with helper text</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-opt-hint">Kuupäev</label>
               <tedi-date-field inputId="date-opt-hint" placeholder="pp.kk.aaaa" ${argBindings(["placeholder"])} />
               <tedi-feedback-text text="pp.kk.aaaa" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-opt-shortcuts">Kuupäevaväli otseteedega</label>
+            <p tedi-text>Date field with quick-select shortcuts</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-opt-shortcuts">Kuupäev</label>
               <tedi-date-field inputId="date-opt-shortcuts" [formControl]="shortcutControl" ${argBindings(["placeholder"])} />
               <div class="flex gap-2">
                 <button tedi-button variant="neutral" size="small" type="button" (click)="setToday()">Täna</button>
@@ -822,25 +896,29 @@ export const ValueType: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-vt-single">Üksik kuupäev</label>
+            <p tedi-text>Single date</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-vt-single">Kuupäev</label>
               <tedi-date-field inputId="date-vt-single" [formControl]="single" placeholder="pp.kk.aaaa" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-vt-single-value">Üksik kuupäev vaikeväärtusega</label>
+            <p tedi-text>Single date with a default value</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-vt-single-value">Kuupäev</label>
               <tedi-date-field inputId="date-vt-single-value" [formControl]="singleWithValue" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-vt-multiple">Mitu kuupäeva</label>
+            <p tedi-text>Multiple dates</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-vt-multiple">Kuupäevad</label>
               <tedi-date-field inputId="date-vt-multiple" mode="multiple" [formControl]="multiple" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <p tedi-text>Date range</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-range">Vahemik</label>
               <tedi-date-field inputId="date-vt-range" mode="range" [formControl]="range" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
@@ -877,17 +955,19 @@ export const MultipleTagLayout: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-tags-wrap">Mitmerealine (vaikimisi)</label>
+            <p tedi-text>Multiple rows (default)</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-tags-wrap">Kuupäevad</label>
               <tedi-date-field inputId="date-tags-wrap" mode="multiple" [multiRow]="true" [formControl]="wrapControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
-              <tedi-feedback-text text="Sildid murduvad uutele ridadele; välja kõrgus kasvab." />
+              <tedi-feedback-text text="Tags wrap onto new lines and the field grows in height." />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-tags-single">Üherealine + loendur</label>
+            <p tedi-text>Single row</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-tags-single">Kuupäevad</label>
               <tedi-date-field inputId="date-tags-single" mode="multiple" [multiRow]="false" tagEllipsis="start" [formControl]="singleRowControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
-              <tedi-feedback-text text="Sildid püsivad ühel real; ülejääk koondub +N loendurisse. Kitsad sildid lühenevad algusest (…06.2026)." />
+              <tedi-feedback-text text="Overflow collapses into a +N counter; narrow tags are truncated from the start." />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
@@ -913,14 +993,16 @@ export const OnClickType: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-trigger-button">Kalendriikoon on klõpsatav</label>
+            <p tedi-text>Calendar button is clickable</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-trigger-button">Kuupäev</label>
               <tedi-date-field inputId="date-trigger-button" [formControl]="buttonControl" calendarTrigger="button" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="date-trigger-input">Sisestusväli on klõpsatav</label>
+            <p tedi-text>Input is clickable</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="date-trigger-input">Kuupäev</label>
               <tedi-date-field inputId="date-trigger-input" [formControl]="inputControl" calendarTrigger="input" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
@@ -965,32 +1047,37 @@ export const Range: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="range-default">Vaikimisi vahemik</label>
+            <p tedi-text>Default range</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="range-default">Vahemik</label>
               <tedi-date-field inputId="range-default" [formControl]="defaultRange" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="range-limits">Vahemik min/max piiranguga</label>
+            <p tedi-text>Range with min/max limits</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="range-limits">Vahemik</label>
               <tedi-date-field inputId="range-limits" [formControl]="limitsRange" [minDate]="twoMonthsAgo" [maxDate]="rangeMaxDate" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="range-start-only">Ainult alguskuupäev</label>
+            <p tedi-text>Start date only (no end selected)</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="range-start-only">Vahemik</label>
               <tedi-date-field inputId="range-start-only" [formControl]="startOnly" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="range-disabled-past">Vahemik keelatud minevikuga</label>
+            <p tedi-text>Past dates disabled</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="range-disabled-past">Vahemik</label>
               <tedi-date-field inputId="range-disabled-past" [formControl]="disabledPastRange" [disablePast]="true" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
-              <label tedi-label for="range-multiple-months">Vahemik mitme kuuga</label>
+            <p tedi-text>Range with multiple months</p>
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+              <label tedi-label for="range-multiple-months">Vahemik</label>
               <tedi-date-field inputId="range-multiple-months" [formControl]="multipleMonthsRange" [numberOfMonths]="2" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
@@ -1090,7 +1177,7 @@ export const WithFooter: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-footer-time">Kellaaeg</label>
               <tedi-date-field inputId="date-footer-time" [formControl]="timeControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter justifyItems="center">
@@ -1105,7 +1192,7 @@ export const WithFooter: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-footer-save">Kuupäev</label>
               <tedi-date-field inputId="date-footer-save" [formControl]="saveControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter [cols]="2" [gapX]="2">
@@ -1181,7 +1268,7 @@ export const MobileModal: Story = {
       template: `
         <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
           <tedi-col>
-            <p tedi-text modifiers="small bold">Centered modal (modal=true)</p>
+            <p tedi-text>Centered modal (modal=true)</p>
             <tedi-form-field>
               <label tedi-label for="date-modal-centered">Kuupäev</label>
               <tedi-date-field
@@ -1193,7 +1280,7 @@ export const MobileModal: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <p tedi-text modifiers="small bold">Fullscreen modal (modal=true, fullscreen=true)</p>
+            <p tedi-text>Fullscreen modal (modal=true, fullscreen=true)</p>
             <tedi-form-field>
               <label tedi-label for="date-modal-fullscreen">Kuupäev</label>
               <tedi-date-field
@@ -1295,21 +1382,21 @@ export const WithReactiveForms: Story = {
         <form [formGroup]="form">
           <tedi-row [cols]="1" [gap]="3">
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-start" [required]="true">Alguskuupäev</label>
                 <tedi-date-field inputId="date-form-start" formControlName="start" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali alguskuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-end">Lõppkuupäev</label>
                 <tedi-date-field inputId="date-form-end" formControlName="end" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali lõppkuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-range" [required]="true">Kuupäevavahemik</label>
                 <tedi-date-field inputId="date-form-range" formControlName="range" mode="range" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali algus- ja lõppkuupäev." />
diff --git a/src/tedi/components/form/date-picker/date-picker.component.scss b/src/tedi/components/form/date-picker/date-picker.component.scss
index b191b5203..b6e12f7bb 100644
--- a/src/tedi/components/form/date-picker/date-picker.component.scss
+++ b/src/tedi/components/form/date-picker/date-picker.component.scss
@@ -50,6 +50,9 @@ tedi-date-picker {
     padding-left: var(--form-field-padding-x-md-default);
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
+
+    // The wrapper draws the focus ring; core's global one would double it.
+    outline: none;
     background: transparent;
     border: 0;
     border-radius: var(--form-field-radius);
diff --git a/src/tedi/components/form/form-field/field-context.token.ts b/src/tedi/components/form/form-field/field-context.token.ts
index 00330c693..cd459d045 100644
--- a/src/tedi/components/form/form-field/field-context.token.ts
+++ b/src/tedi/components/form/form-field/field-context.token.ts
@@ -13,6 +13,8 @@ export interface FieldContext {
   valid: Signal<boolean>;
   /** From an input group that disables everything inside it. */
   disabled: Signal<boolean>;
+  /** Whether the field shows a clear button — controls read it instead of declaring their own. */
+  clearable: Signal<boolean>;
 }
 
 export const TEDI_FIELD_CONTEXT = new InjectionToken<FieldContext>(
diff --git a/src/tedi/components/form/form-field/form-field-control.ts b/src/tedi/components/form/form-field/form-field-control.ts
index 877c800ac..bf4ac4062 100644
--- a/src/tedi/components/form/form-field/form-field-control.ts
+++ b/src/tedi/components/form/form-field/form-field-control.ts
@@ -46,6 +46,23 @@ export interface FormFieldControl<T = unknown> {
    * `aria-describedby`; nothing is pushed when the control stands alone.
    */
   setDescribedBy?(ids: string[]): void;
+  /**
+   * Set by controls that render their own clear button — date and time put one in
+   * their action row beside the picker button, which cannot leave the control
+   * because the overlay anchors to it. The field then skips its generic clear
+   * button so a single `clearable` never yields two.
+   */
+  readonly ownsClearButton?: boolean;
+  /**
+   * Whether the control is read-only. The field hides its clear button while it
+   * is, since the user cannot edit the value; a programmatic `reset()` still works.
+   */
+  readOnly?: Signal<boolean>;
+  /**
+   * Set to `false` by controls that never take a clear button — a textarea, per
+   * the design. The field then skips its button whatever `clearable` says.
+   */
+  readonly clearButton?: false;
 }
 
 /**
diff --git a/src/tedi/components/form/form-field/form-field.component.html b/src/tedi/components/form/form-field/form-field.component.html
index 66e584f83..fc056905e 100644
--- a/src/tedi/components/form/form-field/form-field.component.html
+++ b/src/tedi/components/form/form-field/form-field.component.html
@@ -8,7 +8,7 @@
   <div [ngClass]="boxClasses()" (mousedown)="handleBoxMouseDown($event)">
     <ng-container [ngTemplateOutlet]="controlSlot"></ng-container>
 
-    @if (clearable()) {
+    @if (renderClearButton()) {
       <div
         class="tedi-form-field__buttons"
         [class.tedi-form-field__buttons--hidden]="!showClearButton()"
diff --git a/src/tedi/components/form/form-field/form-field.component.spec.ts b/src/tedi/components/form/form-field/form-field.component.spec.ts
index cb07de527..1582a4514 100644
--- a/src/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/src/tedi/components/form/form-field/form-field.component.spec.ts
@@ -1,5 +1,6 @@
 import { Component, signal, ViewChild } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import {
   FormFieldComponent,
   FormFieldIcon,
@@ -11,6 +12,7 @@ import {
 } from "./form-field-control";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { TextareaComponent } from "../textarea/textarea.component";
+import { TextFieldComponent } from "../text-field/text-field.component";
 import { LabelComponent } from "../../content/label/label.component";
 import { LabelRowComponent } from "../label-row/label-row.component";
 import { FormFieldExtraDirective } from "./form-field-extra.directive";
@@ -34,6 +36,99 @@ class MockControlComponent implements FormFieldControl<string> {
   reset = jest.fn();
   focus = jest.fn();
   setDescribedBy = jest.fn();
+  ownsClearButton = false;
+}
+
+@Component({
+  selector: "mock-owning-control",
+  standalone: true,
+  template: "",
+  providers: [
+    {
+      provide: TEDI_FORM_FIELD_CONTROL,
+      useExisting: MockOwningControlComponent,
+    },
+  ],
+})
+class MockOwningControlComponent implements FormFieldControl<string> {
+  value = signal("");
+  disabled = signal(false);
+  invalid = signal(false);
+  reset = jest.fn();
+  focus = jest.fn();
+  /** Like date and time fields, which put a clear button in their own action row. */
+  readonly ownsClearButton = true;
+}
+
+@Component({
+  selector: "mock-unresettable-control",
+  standalone: true,
+  template: "",
+  providers: [
+    {
+      provide: TEDI_FORM_FIELD_CONTROL,
+      useExisting: MockUnresettableControlComponent,
+    },
+  ],
+})
+class MockUnresettableControlComponent implements FormFieldControl<string> {
+  value = signal("text");
+  disabled = signal(false);
+  invalid = signal(false);
+}
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, MockUnresettableControlComponent],
+  template: `
+    <tedi-form-field #formField clearable>
+      <mock-unresettable-control />
+    </tedi-form-field>
+  `,
+})
+class UnresettableHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+}
+
+/** Conditional projection: the control can be swapped or arrive after init. */
+@Component({
+  standalone: true,
+  imports: [
+    FormFieldComponent,
+    MockControlComponent,
+    MockOwningControlComponent,
+  ],
+  template: `
+    <tedi-form-field #formField clearable>
+      @if (showControl) {
+        @if (owning) {
+          <mock-owning-control />
+        } @else {
+          <mock-control #mockControl />
+        }
+      }
+    </tedi-form-field>
+  `,
+})
+class ConditionalProjectionHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+  @ViewChild("mockControl") mockControl?: MockControlComponent;
+  showControl = true;
+  owning = false;
+}
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, MockControlComponent],
+  template: `
+    <tedi-form-field clearable>
+      <mock-control #mockControl></mock-control>
+    </tedi-form-field>
+  `,
+})
+class BareClearableHostComponent {
+  @ViewChild("mockControl", { static: true })
+  mockControl!: MockControlComponent;
 }
 
 @Component({
@@ -217,6 +312,82 @@ describe("FormFieldComponent", () => {
     expect(buttons).toBeNull();
   });
 
+  it("should not render its own clear button when the control renders one", () => {
+    host.clearable = true;
+    host.mockControl.value.set("text");
+    host.mockControl.ownsClearButton = true;
+    fixture.detectChanges();
+
+    expect(formField.renderClearButton()).toBe(false);
+    expect(
+      fixture.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+  });
+
+  describe("conditional projection", () => {
+    let conditional: ComponentFixture<ConditionalProjectionHostComponent>;
+    let conditionalHost: ConditionalProjectionHostComponent;
+
+    beforeEach(() => {
+      conditional = TestBed.createComponent(ConditionalProjectionHostComponent);
+      conditionalHost = conditional.componentInstance;
+      conditional.detectChanges();
+    });
+
+    it("should stop rendering its own clear button when the projected control is replaced by one that owns it", () => {
+      expect(conditionalHost.formField.renderClearButton()).toBe(true);
+
+      conditionalHost.owning = true;
+      conditional.detectChanges();
+
+      expect(conditionalHost.formField.renderClearButton()).toBe(false);
+      expect(
+        conditional.nativeElement.querySelector(".tedi-form-field__clear"),
+      ).toBeNull();
+    });
+
+    it("should pick up a control that is projected after init", () => {
+      conditionalHost.showControl = false;
+      conditional.detectChanges();
+      expect(conditionalHost.formField.showClearButton()).toBe(false);
+
+      conditionalHost.showControl = true;
+      conditional.detectChanges();
+      conditionalHost.mockControl!.value.set("text");
+      conditional.detectChanges();
+
+      expect(conditionalHost.formField.showClearButton()).toBe(true);
+    });
+  });
+
+  it("should not render a clear button for a control that cannot be reset", () => {
+    const unresettable = TestBed.createComponent(UnresettableHostComponent);
+    unresettable.detectChanges();
+
+    expect(unresettable.componentInstance.formField.renderClearButton()).toBe(
+      false,
+    );
+    expect(
+      unresettable.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+  });
+
+  it("should be clearable by default", () => {
+    const bare = TestBed.createComponent(FormFieldComponent);
+    bare.detectChanges();
+
+    expect(bare.componentInstance.clearable()).toBe(true);
+  });
+
+  it("should treat a bare clearable attribute as true", () => {
+    const bare = TestBed.createComponent(BareClearableHostComponent);
+    bare.detectChanges();
+
+    expect(
+      bare.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeTruthy();
+  });
+
   it("should reset the control when the clear button is clicked", () => {
     host.clearable = true;
     host.mockControl.value.set("Test");
@@ -477,20 +648,33 @@ describe("FormFieldComponent wrapping a textarea", () => {
     );
   });
 
-  it("clears the textarea from the box's clear button", () => {
+  it("gives the textarea no clear button, even when clearable", () => {
     const clearFixture = TestBed.createComponent(
       ClearableTextareaHostComponent,
     );
     clearFixture.detectChanges();
 
-    const ta: HTMLTextAreaElement =
-      clearFixture.nativeElement.querySelector("textarea");
-    expect(ta.value).toBe("hello");
+    expect(
+      clearFixture.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+    expect(
+      clearFixture.nativeElement.querySelector(".tedi-form-field__box"),
+    ).toBeNull();
+  });
 
-    clearFixture.nativeElement.querySelector(".tedi-form-field__clear").click();
+  it("still clears the textarea on a programmatic reset", () => {
+    const clearFixture = TestBed.createComponent(
+      ClearableTextareaHostComponent,
+    );
+    clearFixture.detectChanges();
+
+    const textarea = clearFixture.debugElement
+      .query(By.directive(TextareaComponent))
+      .injector.get(TextareaComponent);
+    textarea.reset();
     clearFixture.detectChanges();
 
-    expect(ta.value).toBe("");
+    expect(clearFixture.nativeElement.querySelector("textarea").value).toBe("");
   });
 });
 
@@ -828,3 +1012,60 @@ describe("FormFieldComponent projection slots", () => {
     expect(box.contains(extra())).toBe(false);
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, TextFieldComponent],
+  template: `
+    <tedi-form-field #formField>
+      <input tedi-text-field [value]="'hello'" [readOnly]="readOnly" />
+    </tedi-form-field>
+  `,
+})
+class ReadOnlyTextFieldHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+  @ViewChild(TextFieldComponent, { static: true })
+  textField!: TextFieldComponent;
+  readOnly = true;
+}
+
+describe("FormFieldComponent with a read-only text field", () => {
+  let fixture: ComponentFixture<ReadOnlyTextFieldHostComponent>;
+  let host: ReadOnlyTextFieldHostComponent;
+
+  const clearButton = () =>
+    fixture.nativeElement.querySelector(
+      ".tedi-form-field__clear",
+    ) as HTMLButtonElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyTextFieldHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(ReadOnlyTextFieldHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("hides and disables the clear button while read-only", () => {
+    expect(host.formField.showClearButton()).toBe(false);
+    expect(clearButton().disabled).toBe(true);
+    expect(
+      fixture.nativeElement.querySelector(".tedi-form-field__buttons--hidden"),
+    ).toBeTruthy();
+  });
+
+  it("shows the clear button again once editable", () => {
+    host.readOnly = false;
+    fixture.detectChanges();
+
+    expect(host.formField.showClearButton()).toBe(true);
+    expect(clearButton().disabled).toBe(false);
+  });
+
+  it("still clears on a programmatic reset", () => {
+    host.textField.reset();
+    expect(host.textField.value()).toBe("");
+  });
+});
diff --git a/src/tedi/components/form/form-field/form-field.component.ts b/src/tedi/components/form/form-field/form-field.component.ts
index ed4422635..8285ec64e 100644
--- a/src/tedi/components/form/form-field/form-field.component.ts
+++ b/src/tedi/components/form/form-field/form-field.component.ts
@@ -8,6 +8,7 @@ import {
   inject,
   input,
   ViewEncapsulation,
+  booleanAttribute,
 } from "@angular/core";
 import { NgClass, NgTemplateOutlet } from "@angular/common";
 import {
@@ -83,10 +84,12 @@ export class FormFieldComponent implements FieldContext {
    */
   icon = input<string | FormFieldIcon | undefined>();
   /**
-   * Whether the field shows a clear button once the control holds a value.
-   * @default false
+   * Whether the field shows a clear button once the control holds a value. The
+   * single source of truth for every control inside it — date and time fields
+   * read it too instead of declaring their own input. A textarea never gets one.
+   * @default true
    */
-  clearable = input<boolean>(false);
+  clearable = input(true, { transform: booleanAttribute });
   /**
    * Show the clear button only while the filled field is hovered or focused.
    * Requires `clearable`.
@@ -126,7 +129,22 @@ export class FormFieldComponent implements FieldContext {
    * they need a row that carries the surface. Without them the control paints
    * itself and no box is rendered at all.
    */
-  readonly hasBox = computed(() => !!this.icon() || this.clearable());
+  readonly hasBox = computed(() => !!this.icon() || this.renderClearButton());
+
+  /**
+   * Whether the field renders its own clear button. Controls that render one
+   * themselves opt out, so `clearable` drives them without producing two, and
+   * a control that cannot be reset, or never takes one, gets none.
+   */
+  readonly renderClearButton = computed(() => {
+    const control = this.control();
+    return (
+      this.clearable() &&
+      !control?.ownsClearButton &&
+      control?.clearButton !== false &&
+      !!control?.reset
+    );
+  });
 
   readonly ownsSurface = computed(() => this.hasBox());
 
@@ -210,7 +228,10 @@ export class FormFieldComponent implements FieldContext {
   });
 
   readonly showClearButton = computed(
-    () => this.clearable() && !!this.control()?.value(),
+    () =>
+      this.renderClearButton() &&
+      !!this.control()?.value() &&
+      !this.control()?.readOnly?.(),
   );
 
   clear() {
diff --git a/src/tedi/components/form/text-field/text-field.component.spec.ts b/src/tedi/components/form/text-field/text-field.component.spec.ts
index dc3b2ddae..1399c39f6 100644
--- a/src/tedi/components/form/text-field/text-field.component.spec.ts
+++ b/src/tedi/components/form/text-field/text-field.component.spec.ts
@@ -233,3 +233,48 @@ describe("TextFieldComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [TextFieldComponent],
+  template: `
+    <input tedi-text-field id="attr" readonly />
+    <input tedi-text-field id="prop" [readOnly]="readOnly" />
+  `,
+})
+class ReadOnlyHostComponent {
+  readOnly = true;
+}
+
+describe("TextFieldComponent readOnly", () => {
+  let fixture: ComponentFixture<ReadOnlyHostComponent>;
+
+  const field = (id: string) => fixture.debugElement.query(By.css(`#${id}`));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(ReadOnlyHostComponent);
+    fixture.detectChanges();
+  });
+
+  it("reads the readonly attribute and keeps it on the input", () => {
+    const attr = field("attr");
+    expect(attr.injector.get(TextFieldComponent).readOnly()).toBe(true);
+    expect((attr.nativeElement as HTMLInputElement).readOnly).toBe(true);
+  });
+
+  it("reads and reflects a [readOnly] property binding", () => {
+    const prop = field("prop");
+    const component = prop.injector.get(TextFieldComponent);
+    expect(component.readOnly()).toBe(true);
+    expect((prop.nativeElement as HTMLInputElement).readOnly).toBe(true);
+
+    fixture.componentInstance.readOnly = false;
+    fixture.detectChanges();
+    expect(component.readOnly()).toBe(false);
+    expect((prop.nativeElement as HTMLInputElement).readOnly).toBe(false);
+  });
+});
diff --git a/src/tedi/components/form/text-field/text-field.component.ts b/src/tedi/components/form/text-field/text-field.component.ts
index ff4748b39..87289a09d 100644
--- a/src/tedi/components/form/text-field/text-field.component.ts
+++ b/src/tedi/components/form/text-field/text-field.component.ts
@@ -54,6 +54,7 @@ import { controlDescribedBy } from "../form-field/control-described-by";
     "[attr.aria-invalid]": "invalid() || null",
     "[attr.aria-describedby]": "describedBy.attribute()",
     "[disabled]": "disabled()",
+    "[readOnly]": "readOnly()",
     "(input)": "handleInputChange($event)",
     "(blur)": "handleBlur()",
   },
@@ -101,6 +102,23 @@ export class TextFieldComponent
     transform: booleanAttribute,
   });
 
+  // Native `readonly`, under both the attribute (`readonly`) and the property
+  // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
+  // button while the value cannot be edited.
+  readonly readOnlyAttribute = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readonly",
+    transform: booleanAttribute,
+  });
+  readonly readOnlyProperty = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readOnly",
+    transform: booleanAttribute,
+  });
+  readonly readOnly = computed(
+    () => this.readOnlyAttribute() || this.readOnlyProperty(),
+  );
+
   readonly disabled = computed(
     () =>
       this.disabledInput() ||
diff --git a/src/tedi/components/form/text-field/text-field.stories.ts b/src/tedi/components/form/text-field/text-field.stories.ts
index 3bb3ced1d..1dfba3880 100644
--- a/src/tedi/components/form/text-field/text-field.stories.ts
+++ b/src/tedi/components/form/text-field/text-field.stories.ts
@@ -87,13 +87,25 @@ export default {
     },
     clearable: {
       description:
-        "Whether the field shows a clear button once it holds a value.",
+        "Whether the field shows a clear button once it has a value. Set `false` to opt out. Hidden while the text field is read-only.",
       control: {
         type: "boolean",
       },
       table: {
         category: "Form Field inputs",
         type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    readOnly: {
+      description:
+        "Makes the field read-only, like the native `readonly` attribute, which is also accepted. The value can still be selected and submitted, but not edited, and a wrapping form field hides its clear button.",
+      control: {
+        type: "boolean",
+      },
+      table: {
+        category: "Text Field inputs",
+        type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
     },
@@ -134,18 +146,20 @@ export const Default: StoryObj = {
   parameters: { chromatic: { disableSnapshot: true } },
   args: {
     size: "default",
-    clearable: false,
+    clearable: true,
     arrowsHidden: true,
+    readOnly: false,
   },
-  render: ({ arrowsHidden, ...formFieldArgs }) => ({
+  render: ({ arrowsHidden, readOnly, ...formFieldArgs }) => ({
     props: {
       arrowsHidden,
+      readOnly,
       ...formFieldArgs,
     },
     template: `
       <tedi-form-field ${argsToTemplate(formFieldArgs)}>
         <label tedi-label [for]="'default'">Label</label>
-        <input tedi-text-field [arrowsHidden]="arrowsHidden" (clear)="clear($event)" id="default" />
+        <input tedi-text-field [arrowsHidden]="arrowsHidden" [readOnly]="readOnly" (clear)="clear($event)" id="default" />
       </tedi-form-field>
     `,
   }),
diff --git a/src/tedi/components/form/textarea/textarea.component.spec.ts b/src/tedi/components/form/textarea/textarea.component.spec.ts
index caeedd2b2..9562544eb 100644
--- a/src/tedi/components/form/textarea/textarea.component.spec.ts
+++ b/src/tedi/components/form/textarea/textarea.component.spec.ts
@@ -249,3 +249,27 @@ describe("TextareaComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [TextareaComponent],
+  template: `<textarea tedi-textarea readonly></textarea>`,
+})
+class ReadOnlyTextareaHostComponent {}
+
+describe("TextareaComponent readOnly", () => {
+  it("reads the readonly attribute and keeps it on the textarea", () => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyTextareaHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    const fixture = TestBed.createComponent(ReadOnlyTextareaHostComponent);
+    fixture.detectChanges();
+
+    const textarea = fixture.debugElement.query(
+      By.directive(TextareaComponent),
+    );
+    expect(textarea.injector.get(TextareaComponent).readOnly()).toBe(true);
+    expect((textarea.nativeElement as HTMLTextAreaElement).readOnly).toBe(true);
+  });
+});
diff --git a/src/tedi/components/form/textarea/textarea.component.ts b/src/tedi/components/form/textarea/textarea.component.ts
index a70b38a2f..a8a2a6ed4 100644
--- a/src/tedi/components/form/textarea/textarea.component.ts
+++ b/src/tedi/components/form/textarea/textarea.component.ts
@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -57,6 +58,7 @@ export type TextareaSize = Exclude<InputSize, "large">;
     "[style.max-height]": "maxHeightStyle()",
     "[attr.aria-invalid]": "invalid() || null",
     "[attr.aria-describedby]": "describedBy.attribute()",
+    "[readOnly]": "readOnly()",
     "(input)": "handleInputChange($event)",
     "(blur)": "handleBlur()",
   },
@@ -175,6 +177,26 @@ export class TextareaComponent
     return limits.length === 1 ? limits[0] : `min(${limits.join(", ")})`;
   });
 
+  // Native `readonly`, under both the attribute (`readonly`) and the property
+  // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
+  // button while the value cannot be edited.
+  readonly readOnlyAttribute = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readonly",
+    transform: booleanAttribute,
+  });
+  readonly readOnlyProperty = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readOnly",
+    transform: booleanAttribute,
+  });
+  readonly readOnly = computed(
+    () => this.readOnlyAttribute() || this.readOnlyProperty(),
+  );
+
+  /** Textareas take no clear button, even inside a `clearable` form field. */
+  readonly clearButton = false;
+
   readonly disabled = computed(
     () => this.formDisabled() || (this.fieldContext?.disabled() ?? false),
   );
diff --git a/src/tedi/components/form/textarea/textarea.stories.ts b/src/tedi/components/form/textarea/textarea.stories.ts
index fea77bb8f..db5e54d3e 100644
--- a/src/tedi/components/form/textarea/textarea.stories.ts
+++ b/src/tedi/components/form/textarea/textarea.stories.ts
@@ -83,6 +83,18 @@ export default {
         type: { summary: "number | undefined" },
       },
     },
+    readOnly: {
+      description:
+        "Makes the field read-only, like the native `readonly` attribute, which is also accepted. The value can still be selected and submitted, but not edited.",
+      control: {
+        type: "boolean",
+      },
+      table: {
+        category: "Textarea inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     placeholder: {
       control: "text",
       description: "Placeholder text shown when the textarea is empty.",
@@ -164,8 +176,10 @@ export const Default: StoryObj = {
     autoGrow: false,
     minRows: 3,
     maxRows: 12,
+    readOnly: false,
   },
   render: ({
+    readOnly,
     resizable,
     placeholder,
     autoGrow,
@@ -176,6 +190,7 @@ export const Default: StoryObj = {
     ...formFieldArgs
   }) => ({
     props: {
+      readOnly,
       resizable,
       placeholder,
       autoGrow,
@@ -197,6 +212,7 @@ export const Default: StoryObj = {
           [maxRows]="maxRows"
           [height]="height"
           [maxHeight]="maxHeight"
+          [readOnly]="readOnly"
           [attr.placeholder]="placeholder"
         ></textarea>
       </tedi-form-field>
diff --git a/src/tedi/components/form/time-field/time-field.component.scss b/src/tedi/components/form/time-field/time-field.component.scss
index 77d80aaeb..ed75f45cf 100644
--- a/src/tedi/components/form/time-field/time-field.component.scss
+++ b/src/tedi/components/form/time-field/time-field.component.scss
@@ -71,6 +71,9 @@
     font-family: inherit;
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
+
+    // The field surface draws the focus ring; core's global one would double it.
+    outline: none;
     background: transparent;
     border: 0;
     border-radius: var(--form-field-radius);
diff --git a/src/tedi/components/form/time-field/time-field.component.spec.ts b/src/tedi/components/form/time-field/time-field.component.spec.ts
index 8dc769cdc..0f28c23d7 100644
--- a/src/tedi/components/form/time-field/time-field.component.spec.ts
+++ b/src/tedi/components/form/time-field/time-field.component.spec.ts
@@ -8,16 +8,33 @@ import { FeedbackTextComponent } from "../feedback-text/feedback-text.component"
 import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token";
 import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
 import { ModalService } from "../../overlay/modal/modal.service";
+import { TEDI_FIELD_CONTEXT } from "../form-field/field-context.token";
 
 describe("TimeFieldComponent", () => {
   let fixture: ComponentFixture<TimeFieldComponent>;
   let component: TimeFieldComponent;
   let el: HTMLElement;
+  /** Stands in for the wrapping `tedi-form-field`, which owns `clearable`. */
+  let fieldClearable: ReturnType<typeof signal<boolean>>;
 
   beforeEach(() => {
+    fieldClearable = signal(false);
     TestBed.configureTestingModule({
       imports: [TimeFieldComponent],
-      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+      providers: [
+        { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+        {
+          provide: TEDI_FIELD_CONTEXT,
+          useValue: {
+            size: signal("default"),
+            ownsSurface: signal(false),
+            invalid: signal(false),
+            valid: signal(false),
+            disabled: signal(false),
+            clearable: fieldClearable,
+          },
+        },
+      ],
     });
 
     fixture = TestBed.createComponent(TimeFieldComponent);
@@ -178,6 +195,31 @@ describe("TimeFieldComponent", () => {
   });
 
   describe("clear button", () => {
+    beforeEach(() => {
+      fieldClearable.set(true);
+      fixture.detectChanges();
+    });
+
+    it("should not show clear button when the form field has not opted in", () => {
+      fieldClearable.set(false);
+      component.writeValue("14:30");
+      fixture.detectChanges();
+
+      expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+    });
+
+    it("should let its own clearable override the form field", () => {
+      component.writeValue("14:30");
+      fixture.componentRef.setInput("clearable", false);
+      fixture.detectChanges();
+      expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+
+      fieldClearable.set(false);
+      fixture.componentRef.setInput("clearable", true);
+      fixture.detectChanges();
+      expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+    });
+
     it("should not show clear button when value is null", () => {
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
     });
@@ -393,6 +435,8 @@ describe("TimeFieldComponent", () => {
     });
 
     it("should show the clear button immediately after a value is picked (no blur required)", () => {
+      fieldClearable.set(true);
+      fixture.detectChanges();
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
 
       const input = el.querySelector(
@@ -1156,3 +1200,46 @@ describe("TimeFieldComponent inside FormFieldComponent", () => {
     expect(input?.value).toBe("09:00");
   });
 });
+
+describe("TimeFieldComponent standalone", () => {
+  let fixture: ComponentFixture<TimeFieldComponent>;
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TimeFieldComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(TimeFieldComponent);
+    fixture.componentRef.setInput("inputId", "standalone-id");
+    el = fixture.nativeElement;
+    fixture.componentInstance.writeValue("14:30");
+    fixture.detectChanges();
+  });
+
+  it("shows a clear button by default", () => {
+    expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+  });
+
+  it("converts static attribute values to booleans", () => {
+    fixture.componentRef.setInput("clearable", "false");
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+
+    fixture.componentRef.setInput("clearable", "");
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+  });
+
+  it("keeps inheriting when clearable is unset", () => {
+    fixture.componentRef.setInput("clearable", undefined);
+    fixture.detectChanges();
+    expect(fixture.componentInstance.clearable()).toBeUndefined();
+  });
+
+  it("hides the clear button when it opts out", () => {
+    fixture.componentRef.setInput("clearable", false);
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+  });
+});
diff --git a/src/tedi/components/form/time-field/time-field.component.ts b/src/tedi/components/form/time-field/time-field.component.ts
index 1257765d1..17a0b8a6c 100644
--- a/src/tedi/components/form/time-field/time-field.component.ts
+++ b/src/tedi/components/form/time-field/time-field.component.ts
@@ -1,5 +1,6 @@
 import {
   afterNextRender,
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -117,8 +118,15 @@ export class TimeFieldComponent
    * set here.
    */
   readonly size = input<Exclude<InputSize, "large"> | undefined>();
-  /** Show a clear button when the field has a value. */
-  readonly clearable = input<boolean>(true);
+  /**
+   * Whether the clear button shows once the field has a value. Falls back to the
+   * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+   * wrapper, and use this only for a standalone field.
+   */
+  readonly clearable = input<boolean | undefined, unknown>(undefined, {
+    // Unset stays `undefined` so the wrapper's `clearable` still applies.
+    transform: (v: unknown) => (v == null ? undefined : booleanAttribute(v)),
+  });
   /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
   readonly pickerVariant = input<TimeFieldPickerVariant>("scroll");
   /**
@@ -190,7 +198,15 @@ export class TimeFieldComponent
   readonly hasValue = computed(
     () => this.value() !== null && this.value() !== "",
   );
-  readonly showClear = computed(() => this.hasValue() && this.clearable());
+  readonly showClear = computed(
+    () => this.hasValue() && this.clearableResolved(),
+  );
+  /** The clear button sits in the time field's action row, beside the picker. */
+  readonly ownsClearButton = true;
+  /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
+  readonly clearableResolved = computed(
+    () => this.clearable() ?? this.fieldContext?.clearable() ?? true,
+  );
   readonly useNativePickerResolved = computed(() => {
     const v = this.useNativePicker();
     return typeof v === "boolean"
diff --git a/src/tedi/components/form/time-field/time-field.stories.ts b/src/tedi/components/form/time-field/time-field.stories.ts
index 281a114cd..5d75c6f4a 100644
--- a/src/tedi/components/form/time-field/time-field.stories.ts
+++ b/src/tedi/components/form/time-field/time-field.stories.ts
@@ -1,7 +1,10 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { TimeFieldComponent } from "./time-field.component";
-import { FormFieldComponent } from "../form-field/form-field.component";
+import {
+  FormFieldComponent,
+  type InputSize,
+} from "../form-field/form-field.component";
 import { LabelComponent } from "../../content/label/label.component";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { RowComponent } from "../../helpers/grid/row/row.component";
@@ -10,13 +13,20 @@ import { AlertComponent } from "../../notifications/alert/alert.component";
 import { TextComponent } from "../../base/text/text.component";
 import { expect, userEvent, waitFor } from "storybook/test";
 
-const PSEUDO_STATE = ["Default", "Hover", "Active", "Disabled", "Focus"];
+const PSEUDO_STATE = ["Default", "Hover", "Focus", "Active", "Disabled"];
 
 /**
  * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.41.64?node-id=4662-91741&m=dev" target="_blank">Figma ↗</a><br />
  * <a href="https://www.tedi.ee/1ee8444b7/p/73629d-time-field" target="_blank">Zeroheight ↗</a>
  */
 
+type TimeFieldStoryArgs = TimeFieldComponent & {
+  /** Story-only: size applied to the wrapping `tedi-form-field`. */
+  formFieldSize?: InputSize;
+  /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
+  formFieldClearable?: boolean;
+};
+
 export default {
   title: "TEDI-Ready/Components/Form/TimeField",
   component: TimeFieldComponent,
@@ -44,7 +54,7 @@ export default {
       description: "Unique ID for label association and accessibility.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string" },
       },
     },
@@ -52,7 +62,7 @@ export default {
       description: "Selected time in HH:mm format. Two-way bindable.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string | null" },
         defaultValue: { summary: "null" },
       },
@@ -61,7 +71,7 @@ export default {
       description: "Placeholder shown when the input is empty.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string" },
       },
     },
@@ -70,7 +80,7 @@ export default {
         "Manually mark the field as invalid. Sets `aria-invalid` on the input and triggers the form-field's invalid styling. Combines with the form-control validity state from reactive forms.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -80,16 +90,51 @@ export default {
         "Disables interaction. Combines with the form-control disabled state.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
     },
+    size: {
+      description:
+        "Overrides the wrapping `tedi-form-field`'s `size` for this field. Leave unset to inherit it — set `size` on the form field instead, so the label scales too. Use it for a standalone time field, where it defaults to `default`.",
+      control: { type: "radio" },
+      options: [undefined, "default", "small"],
+      table: {
+        category: "Time Field inputs",
+        type: { summary: "InputSize | undefined", detail: "default \nsmall" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldSize: {
+      name: "size",
+      description:
+        "Set on the wrapping `tedi-form-field` — the label and the time field scale together. The time field reads it unless its own `size` is set.",
+      control: { type: "radio" },
+      options: ["default", "small"],
+      table: {
+        category: "Form Field inputs",
+        type: { summary: "InputSize", detail: "default \nsmall" },
+        defaultValue: { summary: "default" },
+      },
+    },
     clearable: {
-      description: "Show a clear button when the field has a value.",
+      description:
+        "Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone time field, where it defaults to `true`.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
+        type: { summary: "boolean | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldClearable: {
+      name: "clearable",
+      description:
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out. The time field reads it unless its own `clearable` is set.",
+      control: { type: "boolean" },
+      table: {
+        category: "Form Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -100,7 +145,7 @@ export default {
       control: { type: "radio" },
       options: ["scroll", "slots", "dropdown", "none"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldPickerVariant",
           detail: "scroll \nslots \ndropdown \nnone",
@@ -114,7 +159,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldUseNativePicker",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -128,7 +173,7 @@ export default {
       control: { type: "radio" },
       options: ["button", "input"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "TimeFieldPickerTrigger", detail: "button \ninput" },
         defaultValue: { summary: "button" },
       },
@@ -137,7 +182,7 @@ export default {
       description: "Close the popover/modal as soon as the user picks a value.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -147,7 +192,7 @@ export default {
         "Predefined HH:mm strings for the slots and dropdown variants.",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string[]" },
         defaultValue: { summary: "[]" },
       },
@@ -156,7 +201,7 @@ export default {
       description: "Grid columns for the slots variant.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "number" },
         defaultValue: { summary: "3" },
       },
@@ -166,7 +211,7 @@ export default {
         "Minute step for the scroll variant — e.g. 5 renders 00, 05, 10…",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "number" },
         defaultValue: { summary: "1" },
       },
@@ -177,7 +222,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldModal",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -191,7 +236,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldFullscreen",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -200,16 +245,17 @@ export default {
       },
     },
   },
-} as Meta<TimeFieldComponent>;
+} as Meta<TimeFieldStoryArgs>;
 
 export const Default: StoryObj = {
   args: {
     inputId: "example-id",
+    formFieldSize: "default",
     value: null,
     placeholder: "tt:mm",
     invalid: false,
     disabled: false,
-    clearable: true,
+    formFieldClearable: true,
     pickerVariant: "scroll",
     useNativePicker: false,
     pickerTrigger: "button",
@@ -225,7 +271,7 @@ export const Default: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
-          <tedi-form-field>
+          <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
             <label tedi-label for="example-id">Aeg</label>
             <tedi-time-field
               [inputId]="inputId"
@@ -233,7 +279,6 @@ export const Default: StoryObj = {
               [placeholder]="placeholder"
               [invalid]="invalid"
               [disabled]="disabled"
-              [clearable]="clearable"
               [pickerVariant]="pickerVariant"
               [useNativePicker]="useNativePicker"
               [pickerTrigger]="pickerTrigger"
@@ -243,6 +288,8 @@ export const Default: StoryObj = {
               [minuteStep]="minuteStep"
               [modal]="modal"
               [fullscreen]="fullscreen"
+              [clearable]="clearable"
+              [size]="size"
             />
           </tedi-form-field>
         </tedi-col>
@@ -276,7 +323,7 @@ export const Sizes: StoryObj = {
     docs: {
       description: {
         story:
-          'Field size is controlled by the surrounding `<tedi-form-field size="small">` — the `tedi-time-field` itself has no `size` input.',
+          'Set the size on the surrounding `<tedi-form-field size="small">` so the label and the field scale together. The `tedi-time-field`\'s own `size` input overrides it — use that for a standalone field.',
       },
     },
   },
@@ -313,25 +360,25 @@ export const States: StoryObj = {
         }
         <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
           <tedi-col width="1">
-            <p tedi-text modifiers="bold">Error</p>
+            <p tedi-text modifiers="bold">Success</p>
           </tedi-col>
           <tedi-col width="5">
             <tedi-form-field>
-              <label tedi-label for="state-error">Aeg</label>
-              <tedi-time-field inputId="state-error" [invalid]="true" value="12:00" />
-              <tedi-feedback-text text="Tagasiside tekst" type="error" />
+              <label tedi-label for="state-success">Aeg</label>
+              <tedi-time-field inputId="state-success" value="12:00" />
+              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
         <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
           <tedi-col width="1">
-            <p tedi-text modifiers="bold">Success</p>
+            <p tedi-text modifiers="bold">Error</p>
           </tedi-col>
           <tedi-col width="5">
             <tedi-form-field>
-              <label tedi-label for="state-success">Aeg</label>
-              <tedi-time-field inputId="state-success" value="12:00" />
-              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
+              <label tedi-label for="state-error">Aeg</label>
+              <tedi-time-field inputId="state-error" [invalid]="true" value="12:00" />
+              <tedi-feedback-text text="Tagasiside tekst" type="error" />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
@@ -346,15 +393,21 @@ export const FieldOptions: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
-            <tedi-form-field>
-              <label tedi-label for="opts-default">Default time field</label>
-              <tedi-time-field inputId="opts-default" />
-            </tedi-form-field>
-            <tedi-form-field>
-              <label tedi-label for="opts-hint">Time field with hint</label>
-              <tedi-time-field inputId="opts-hint" />
-              <tedi-feedback-text text="Vihjetekst" type="hint" />
-            </tedi-form-field>
+            <tedi-col>
+              <p tedi-text>Default time field</p>
+              <tedi-form-field>
+                <label tedi-label for="opts-default">Aeg</label>
+                <tedi-time-field inputId="opts-default" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>Time field with hint</p>
+              <tedi-form-field>
+                <label tedi-label for="opts-hint">Aeg</label>
+                <tedi-time-field inputId="opts-hint" />
+                <tedi-feedback-text text="Vihjetekst" type="hint" />
+              </tedi-form-field>
+            </tedi-col>
           </tedi-row>
         </tedi-col>
       </tedi-row>
@@ -368,31 +421,32 @@ export const ValueType: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
-            <tedi-form-field>
-              <label tedi-label for="value-default">Aeg</label>
-              <tedi-time-field inputId="value-default" />
-            </tedi-form-field>
-            <tedi-form-field>
-              <label tedi-label for="value-placeholder">Aeg</label>
-              <tedi-time-field inputId="value-placeholder" placeholder="tt:mm" />
-            </tedi-form-field>
-            <tedi-form-field>
-              <label tedi-label for="value-set">Aeg</label>
-              <tedi-time-field inputId="value-set" value="13:00" />
-            </tedi-form-field>
+            <tedi-col>
+              <p tedi-text>Empty</p>
+              <tedi-form-field>
+                <label tedi-label for="value-default">Aeg</label>
+                <tedi-time-field inputId="value-default" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>With placeholder</p>
+              <tedi-form-field>
+                <label tedi-label for="value-placeholder">Aeg</label>
+                <tedi-time-field inputId="value-placeholder" placeholder="tt:mm" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>With a value</p>
+              <tedi-form-field>
+                <label tedi-label for="value-set">Aeg</label>
+                <tedi-time-field inputId="value-set" value="13:00" />
+              </tedi-form-field>
+            </tedi-col>
           </tedi-row>
         </tedi-col>
       </tedi-row>
     `,
   }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Default empty field, with placeholder, and with a pre-filled value.",
-      },
-    },
-  },
 };
 
 export const OnClickType: StoryObj = {
@@ -443,21 +497,21 @@ export const PredefinedTimeSlots: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 3 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Input trigger (recommended)</p>
+          <p tedi-text>Input trigger (recommended)</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-input">Aeg</label>
             <tedi-time-field inputId="slots-picker-input" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Radio buttons (showSlotIndicator)</p>
+          <p tedi-text>Radio buttons (showSlotIndicator)</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-radio">Aeg</label>
             <tedi-time-field inputId="slots-picker-radio" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" [showSlotIndicator]="true" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Button trigger</p>
+          <p tedi-text>Button trigger</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-button">Aeg</label>
             <tedi-time-field inputId="slots-picker-button" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" pickerTrigger="button" />
@@ -486,14 +540,14 @@ export const Dropdown: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Button trigger</p>
+          <p tedi-text>Button trigger</p>
           <tedi-form-field>
             <label tedi-label for="dropdown-picker-button">Aeg</label>
             <tedi-time-field inputId="dropdown-picker-button" value="13:30" pickerVariant="dropdown" [timeSlots]="slots" [closeOnSelect]="true" pickerTrigger="button" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Input trigger (recommended for dropdown)</p>
+          <p tedi-text>Input trigger (recommended for dropdown)</p>
           <tedi-form-field>
             <label tedi-label for="dropdown-picker-input">Aeg</label>
             <tedi-time-field inputId="dropdown-picker-input" value="13:30" pickerVariant="dropdown" [timeSlots]="slots" [closeOnSelect]="true" pickerTrigger="input" />
@@ -510,7 +564,7 @@ export const CustomStep: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-form-field>
-            <label tedi-label for="scroll-picker-step">Time with 15-min steps</label>
+            <label tedi-label for="scroll-picker-step">Aeg</label>
             <tedi-time-field inputId="scroll-picker-step" value="14:30" pickerVariant="scroll" [minuteStep]="15" />
           </tedi-form-field>
         </tedi-col>
@@ -533,14 +587,14 @@ export const NativePicker: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Always native (useNativePicker=true)</p>
+          <p tedi-text>Always native (useNativePicker=true)</p>
           <tedi-form-field>
             <label tedi-label for="native-picker">Aeg</label>
             <tedi-time-field inputId="native-picker" value="09:30" [useNativePicker]="true" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Responsive (useNativePicker=md)</p>
+          <p tedi-text>Responsive (useNativePicker=md)</p>
           <tedi-form-field>
             <label tedi-label for="responsive-native">Aeg</label>
             <tedi-time-field
@@ -592,14 +646,14 @@ export const MobileModal: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Centered modal</p>
+          <p tedi-text>Centered modal</p>
           <tedi-form-field>
             <label tedi-label for="mobile-modal">Aeg</label>
             <tedi-time-field inputId="mobile-modal" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Fullscreen modal (fullscreen=md)</p>
+          <p tedi-text>Fullscreen modal (fullscreen=md)</p>
           <tedi-form-field>
             <label tedi-label for="fullscreen-modal">Aeg</label>
             <tedi-time-field
@@ -630,9 +684,9 @@ export const ManualTyping: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-form-field>
-            <label tedi-label for="input-formatting">Type a time and tab out</label>
+            <label tedi-label for="input-formatting">Aeg</label>
             <tedi-time-field inputId="input-formatting" placeholder="tt:mm" pickerVariant="none" />
-            <tedi-feedback-text text="Try 1155, 930, 11.55, or 9:5" type="hint" position="left" />
+            <tedi-feedback-text text="Type a time and tab out — try 1155, 930, 11.55, or 9:5" type="hint" position="left" />
           </tedi-form-field>
         </tedi-col>
       </tedi-row>