From f25e92b218c4f6eb469b8ec7e4e3c8b4a519a5d9 Mon Sep 17 00:00:00 2001
From: Robin Lopez <robinlopez.contact@gmail.com>
Date: Sun, 23 Aug 2026 16:09:38 +0200
Subject: [PATCH] feat(ui-fields): FSHSP-157 Add options floatLabel with
 variants over / on / in

---
 CHANGELOG.md                                  |  15 ++
 figma/README.md                               |   4 +-
 figma/component-vars.json                     | 140 ++++++++++++-
 .../ui-kit/forms/src/lib/base-form-field.ts   |  17 ++
 .../src/lib/ui-autocomplete.html              |   2 +
 .../src/lib/ui-autocomplete.scss              |   1 +
 .../src/lib/ui-autocomplete.ts                |  10 +-
 .../forms/ui-autocomplete/ui-autocomplete.mdx |  14 ++
 .../ui-autocomplete.stories.ts                |  38 ++++
 .../ui-datepicker/src/lib/ui-datepicker.html  |   1 +
 .../forms/ui-datepicker/ui-datepicker.mdx     |  17 ++
 .../ui-datepicker/ui-datepicker.stories.ts    |  30 ++-
 .../forms/ui-field/src/lib/ui-field.html      |  28 ++-
 .../forms/ui-field/src/lib/ui-field.scss      | 188 +++++++++++++++++-
 .../ui-kit/forms/ui-field/src/lib/ui-field.ts |  26 ++-
 .../ui-input-mask/src/lib/ui-input-mask.html  |   5 +-
 .../ui-input-mask/src/lib/ui-input-mask.ts    |   6 +
 .../forms/ui-input-mask/ui-input-mask.mdx     |  14 ++
 .../ui-input-mask/ui-input-mask.stories.ts    |  30 ++-
 .../src/lib/ui-input-number.html              |   4 +-
 .../src/lib/ui-input-number.ts                |   6 +
 .../forms/ui-input-number/ui-input-number.mdx |  16 ++
 .../ui-input-number.stories.ts                |  30 ++-
 .../ui-input-tags/src/lib/ui-input-tags.html  |   2 +
 .../ui-input-tags/src/lib/ui-input-tags.scss  |   1 +
 .../ui-input-tags/src/lib/ui-input-tags.ts    |   9 +-
 .../forms/ui-input-tags/ui-input-tags.mdx     |  15 ++
 .../ui-input-tags/ui-input-tags.stories.ts    |  28 +++
 .../forms/ui-input/src/lib/ui-input.html      |   7 +-
 .../forms/ui-input/src/lib/ui-input.spec.ts   | 147 ++++++++++++++
 .../ui-kit/forms/ui-input/src/lib/ui-input.ts |   8 +
 projects/ui-kit/forms/ui-input/ui-input.mdx   |  69 +++++++
 .../ui-kit/forms/ui-input/ui-input.stories.ts |  51 ++++-
 .../forms/ui-label/src/lib/ui-label.scss      |  10 +
 projects/ui-kit/forms/ui-label/ui-label.mdx   |   4 +
 .../forms/ui-select/src/lib/ui-select.html    |   6 +-
 .../forms/ui-select/src/lib/ui-select.scss    |   3 +
 .../forms/ui-select/src/lib/ui-select.ts      |   5 +
 projects/ui-kit/forms/ui-select/ui-select.mdx |  17 ++
 .../forms/ui-select/ui-select.stories.ts      |  36 +++-
 .../ui-textarea/src/lib/ui-textarea.html      |   4 +-
 .../ui-textarea/src/lib/ui-textarea.scss      |   2 +
 .../forms/ui-textarea/src/lib/ui-textarea.ts  |   6 +
 .../ui-kit/forms/ui-textarea/ui-textarea.mdx  |  16 ++
 .../forms/ui-textarea/ui-textarea.stories.ts  |  30 ++-
 projects/ui-kit/styles/component-vars.scss    |  13 +-
 projects/ui-kit/styles/utils/_mixins.scss     |  18 +-
 47 files changed, 1116 insertions(+), 33 deletions(-)
 create mode 100644 projects/ui-kit/forms/ui-input/src/lib/ui-input.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eff79eeb..cb0ee543 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,21 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ## [Unreleased]
 
+### Added
+
+- **Les champs à boîte acceptent un mode `floatLabel`, avec ses trois variantes** (FSHSP-157). Le libellé n'avait qu'une place possible, au-dessus du champ : un formulaire dense n'avait pas d'autre levier que de le retirer et de rabattre l'information sur le `placeholder`, qui disparaît à la première frappe et n'est pas un libellé pour un lecteur d'écran. `floatLabel` le fait descendre **dans** le champ, où il tient le rôle du placeholder, et remonter au focus, dès qu'une valeur est présente, tant qu'un panneau ouvert retient le champ (un déclencheur comme `ui-datepicker` confie le focus à son calendrier sans cesser d'être actif), ou sur autofill du navigateur (qui ne déclenche aucun évènement de saisie). Trois positions hautes, alignées sur celles de PrimeNG : `over` (au-dessus de la boîte), `in` (bande réservée en haut de la boîte, qui grandit d'autant pour que la rangée du contrôle garde sa hauteur) et `on` (à cheval sur le trait, qu'il entaille). Disponible sur les huit champs bâtis sur le shell `ui-field` : `ui-input`, `ui-textarea`, `ui-select`, `ui-autocomplete`, `ui-input-number`, `ui-input-mask`, `ui-input-tags` et `ui-datepicker` (qui le transmet à son déclencheur). L'input est porté par `BaseFormField`, donc un champ écrit sur cette base l'hérite sans code supplémentaire. Non renseigné, rien ne change : le libellé classique reste le défaut, sur tous les champs.
+  - Le libellé flottant reste un `<label for>` natif, marqueur `required` compris : il n'intercepte pas le pointeur au repos (le clic va au curseur de saisie) et le récupère une fois remonté. Seuls sa position et son échelle sont animées, jamais une `font-size` : le trajet ne provoque aucune reprise de mise en page, et la transition est coupée sous `prefers-reduced-motion`.
+  - Aucun recouvrement de mise en page : `over` réserve la bande où le libellé monte, `on` la moitié qui dépasse du trait, `in` grandit la boîte. Deux champs collés verticalement ne se chevauchent pas.
+  - En variante `in`, la bande est réservée par le **contrôle**, pas par la boîte : celui-ci continue de couvrir la boîte bord à bord (zone de clic, zone du curseur, fond d'autofill), seul le texte saisi descend sous le libellé. Affixes, unités, spinner, chevron, bouton d'effacement et libellé au repos restent centrés sur la boîte, qui se lit alors comme un tout.
+  - Le `placeholder` natif est neutralisé tant que `floatLabel` et `label` sont tous les deux renseignés : les deux textes occupent la même place et ne seraient lisibles ni l'un ni l'autre. `floatLabel` sans `label` ne fait rien.
+  - Nouveau mixin partagé `utils.field-float-inset($extra)`, dans la surface SCSS publiée : c'est par lui qu'un contrôle réserve la bande du libellé `in`. Un champ écrit hors du kit sur `ui-field` l'inclut sur son contrôle (les mixins `utils.field-native-input` le font déjà).
+  - Neuf nouveaux réglages `--ui-field-float-label-*` (taille, interligne, échelle au repos, décalages, entaille de la variante `on`, retrait derrière une icône gauche), plus les trois valeurs dérivées qui en découlent : voir la table « Theming » de la doc.
+
+### Changed
+
+- **La boîte de `ui-field` est désormais enveloppée dans un `.ui-field-control`** (FSHSP-157). C'est le contexte de positionnement du libellé flottant, et il est rendu dans les deux modes plutôt que conditionnellement, pour que le DOM d'un champ ne dépende pas de l'option. Aucun impact visuel ni sur les sélecteurs publics ; un consommateur qui aurait écrit du CSS sur l'enchaînement direct `.ui-field > .ui-field-box` doit passer par le descendant.
+- **`ui-label` tronque son texte quand il est contraint** au lieu de déborder (`text-overflow: ellipsis` sur `.ui-label-text`, `max-width: 100%` sur la racine). Sans contrainte de largeur, le comportement est inchangé : le texte passe à la ligne comme avant.
+
 ## [0.6.1] - 2026-08-22
 
 ### Fixed
diff --git a/figma/README.md b/figma/README.md
index b6e7e06b..c427210c 100644
--- a/figma/README.md
+++ b/figma/README.md
@@ -10,7 +10,7 @@ The components' `--ui-*` variables, in the same DTCG shape as
 one too. Generated by `npm run docs:config`; `docs:config:check` fails if it is stale.
 
 **These are not design tokens.** A token belongs to the system (`--units-sm`); a
-component variable belongs to one component, and 455 of the 575 entries merely _alias_ a
+component variable belongs to one component, and 459 of the 580 entries merely _alias_ a
 token. Hence a **dedicated collection** (`$extensions.com.4sh.ui-kit.figmaCollection`)
 rather than adding them to `semantics` or `metrics`.
 
@@ -38,7 +38,7 @@ rather than adding them to `semantics` or `metrics`.
   variables are `remote`, hence read-only (see `CLAUDE.md`).
 - Keep the aliases as aliases: that is what preserves brand, light/dark and responsive.
 - Literal values are in `px` (converted from `rem`, base 16), like the token files.
-- `$extensions.com.4sh.ui-kit.skipped` lists 42 entries with nothing to create: `calc()`
+- `$extensions.com.4sh.ui-kit.skipped` lists 46 entries with nothing to create: `calc()`
   expressions, multi-value CSS shorthands, relative units (`em`, `ch`, `%`), duration /
   easing / cursor / z-index, and internal plumbing.
 
diff --git a/figma/component-vars.json b/figma/component-vars.json
index 880b5db2..889062d2 100644
--- a/figma/component-vars.json
+++ b/figma/component-vars.json
@@ -10,10 +10,10 @@
         "Mode 1"
       ],
       "counts": {
-        "tokens": 575,
-        "alias": 455,
-        "literal": 120,
-        "skipped": 42,
+        "tokens": 580,
+        "alias": 459,
+        "literal": 121,
+        "skipped": 46,
         "derivedDescriptions": 197
       },
       "aliasTargets": [
@@ -79,6 +79,26 @@
           "component": "ui-field",
           "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
         },
+        {
+          "cssVar": "--ui-field-float-label-indent",
+          "component": "ui-field",
+          "reason": "expression calc() : une variable Figma ne porte pas de calcul."
+        },
+        {
+          "cssVar": "--ui-field-float-label-indent-small",
+          "component": "ui-field",
+          "reason": "expression calc() : une variable Figma ne porte pas de calcul."
+        },
+        {
+          "cssVar": "--ui-field-float-label-scale",
+          "component": "ui-field",
+          "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
+        },
+        {
+          "cssVar": "--ui-field-float-label-scale-small",
+          "component": "ui-field",
+          "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
+        },
         {
           "cssVar": "--ui-field-focus-ring-opacity",
           "component": "ui-field",
@@ -4634,6 +4654,118 @@
         }
       }
     },
+    "float-label": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police du libellé flottant en position haute.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-font-size",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit/forms/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "line-height": {
+        "$value": "1.25",
+        "$type": "number",
+        "$description": "Interligne du libellé flottant : c'est lui qui fixe la hauteur de la bande réservée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "LINE_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-line-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-line-height",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit/forms/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "offset-x": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Décalage horizontal du libellé flottant, aligné sur l'inset du contrôle.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-offset-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-offset-x",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit/forms/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "offset-y": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Respiration au-dessus du libellé flottant dans la boîte, variante `in`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-offset-y)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-offset-y",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit/forms/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du libellé flottant, variante `on` : c'est lui qui entaille le trait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-padding-x",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit/forms/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
     "focus-ring-width": {
       "$value": "{metrics.units.2xs}",
       "$type": "dimension",
diff --git a/projects/ui-kit/forms/src/lib/base-form-field.ts b/projects/ui-kit/forms/src/lib/base-form-field.ts
index 95f2be9c..eb2f2435 100644
--- a/projects/ui-kit/forms/src/lib/base-form-field.ts
+++ b/projects/ui-kit/forms/src/lib/base-form-field.ts
@@ -5,6 +5,13 @@ import { UiFeedbackLevel } from '@4sh/ui-kit/types';
 export type FieldSize = 'default' | 'small';
 /** Visual validation status (subset of `UiFeedbackLevel`, shared with `ui-helper`). */
 export type FieldLevel = Extract<UiFeedbackLevel, 'default' | 'success' | 'error'>;
+/**
+ * Placement of the floating label ("float label" mode):
+ * - `over`: rises above the box, where a classic label sits,
+ * - `in`: rises to a band reserved at the top **inside** the box,
+ * - `on`: rises **onto** the top border, notching it.
+ */
+export type FieldFloatLabel = 'over' | 'in' | 'on';
 
 let nextUid = 0;
 
@@ -88,6 +95,16 @@ export abstract class BaseFormField<T> extends BaseFieldControl<T> {
   size = input<FieldSize>('default');
   /** Explicit validation status (`error` is forced when the control is invalid + touched). */
   level = input<FieldLevel>('default');
+  /**
+   * Floating label placement. Unset = classic label above the box.
+   *
+   * The label then plays the placeholder role while at rest, so the native
+   * `placeholder` is neutralised (see `hasFloatLabel`).
+   */
+  floatLabel = input<FieldFloatLabel>();
+
+  /** @ignore There is a label to float: a `floatLabel` alone has nothing to move. */
+  protected readonly hasFloatLabel = computed(() => !!this.floatLabel() && !!this.label());
 
   /** @ignore Effective level: error when invalid, otherwise the requested `level`. */
   protected readonly effectiveLevel = computed<FieldLevel>(() =>
diff --git a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.html b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.html
index 826460e0..2a5781bb 100644
--- a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.html
+++ b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.html
@@ -143,6 +143,8 @@
     [required]="required()"
     [size]="size()"
     [level]="effectiveLevel()"
+    [floatLabel]="floatLabel()"
+    [filled]="isFilled()"
     [disabled]="isDisabled()"
     [readonly]="readonly()"
     [message]="displayMessage()"
diff --git a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.scss b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.scss
index 726b9459..a8284c40 100644
--- a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.scss
+++ b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.scss
@@ -59,6 +59,7 @@ $focus-ring-width: var(--ui-autocomplete-focus-ring-width, #{utils.$form-focus-r
     gap: $tag-gap;
     min-width: 0;
     @include utils.field-inset-edges;
+    @include utils.field-float-inset;
   }
 
   // --- Selected value chip (role=option, roving focus, `multiple`) ----
diff --git a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.ts b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.ts
index 26f873a4..36a4e1a8 100644
--- a/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.ts
+++ b/projects/ui-kit/forms/ui-autocomplete/src/lib/ui-autocomplete.ts
@@ -491,11 +491,17 @@ export class UiAutocomplete<T = unknown> extends BaseFormField<AutocompleteValue
     })),
   );
 
-  /** @ignore Placeholder hidden as soon as values are selected (`multiple`). */
+  /** @ignore Placeholder hidden as soon as values are selected (`multiple`), and
+   *  while a floating label is at rest: it already holds that spot. */
   protected readonly effectivePlaceholder = computed(() =>
-    this.multiple() && this.selectedValues().length ? '' : (this.placeholder() ?? ''),
+    this.hasFloatLabel() || (this.multiple() && this.selectedValues().length)
+      ? ''
+      : (this.placeholder() ?? ''),
   );
 
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(() => this.hasText() || this.selectedValues().length > 0);
+
   /** @ignore Chips are removable unless the field is disabled/readonly. */
   protected readonly canRemove = computed(() => !this.isDisabled() && !this.readonly());
 
diff --git a/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.mdx b/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.mdx
index f0e31b1d..de08cb9e 100644
--- a/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.mdx
+++ b/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.mdx
@@ -174,6 +174,20 @@ instant — indispensable pour de très grandes listes. `virtualScroll` l'active
 
 <Canvas of={AutocompleteStories.VirtualScroll} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+
+<Canvas of={AutocompleteStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## API
 
 <ArgTypes of={AutocompleteStories} />
diff --git a/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories.ts b/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories.ts
index 6b0ec4a3..7a6a9bd6 100644
--- a/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories.ts
+++ b/projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories.ts
@@ -265,6 +265,14 @@ const meta: Meta<UiAutocomplete> = {
       description: 'Taille du champ.',
       table: { type: { summary: "'default' | 'small'" }, defaultValue: { summary: "'default'" } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     disabled: {
       control: 'boolean',
       description: 'Désactive le champ (attribut natif).',
@@ -761,3 +769,33 @@ export const VirtualScroll: Story = {
     `,
   }),
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: {
+      over: completer(COUNTRY_NAMES, (x) => x),
+      inside: completer(COUNTRY_NAMES, (x) => x),
+      on: completer(COUNTRY_NAMES, (x) => x),
+      a: null,
+      b: null,
+      c: 'France',
+    },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(3, 200px); gap:28px 20px; align-items:start;">
+        <ui-autocomplete floatLabel="over" label="Over label" [(ngModel)]="a"
+                         [suggestions]="over.results" (completeMethod)="over.complete($event)" />
+        <ui-autocomplete floatLabel="in" label="In label" [(ngModel)]="b"
+                         [suggestions]="inside.results" (completeMethod)="inside.complete($event)" />
+        <ui-autocomplete floatLabel="on" label="On label" [(ngModel)]="c" [dropdown]="true"
+                         [suggestions]="on.results" (completeMethod)="on.complete($event)" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-datepicker/src/lib/ui-datepicker.html b/projects/ui-kit/forms/ui-datepicker/src/lib/ui-datepicker.html
index 785acb72..4d7f5e6f 100644
--- a/projects/ui-kit/forms/ui-datepicker/src/lib/ui-datepicker.html
+++ b/projects/ui-kit/forms/ui-datepicker/src/lib/ui-datepicker.html
@@ -353,6 +353,7 @@
       [placeholder]="resolvedPlaceholder()"
       [size]="size()"
       [level]="effectiveLevel()"
+      [floatLabel]="floatLabel()"
       [required]="required()"
       [disabled]="isDisabled()"
       [readonly]="triggerReadonly()"
diff --git a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.mdx b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.mdx
index 5840d358..a47fcd54 100644
--- a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.mdx
+++ b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.mdx
@@ -124,6 +124,23 @@ la sélection. En mode `timeOnly`, l'icône du déclencheur devient une horloge.
 <Canvas of={DatepickerStories.Clearable} />
 <Canvas of={DatepickerStories.TimeOnly} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+Le déclencheur étant un `ui-input`, l'option se transmet telle quelle. Le libellé reste en
+position haute pendant toute l'ouverture du calendrier, y compris quand celui-ci prend le
+focus.
+
+<Canvas of={DatepickerStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Saisie manuelle (`allowInput`)
 
 Par défaut le champ est en lecture seule : la date se choisit uniquement dans le panneau.
diff --git a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts
index 36b89258..cfe1bfeb 100644
--- a/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts
+++ b/projects/ui-kit/forms/ui-datepicker/ui-datepicker.stories.ts
@@ -44,6 +44,14 @@ const meta: Meta<UiDatepicker> = {
       options: ['default', 'small'],
       table: { type: { summary: 'FieldSize' }, defaultValue: { summary: '"default"' } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     level: {
       control: 'inline-radio',
       options: ['default', 'success', 'error'],
@@ -246,7 +254,7 @@ const TEMPLATE = `<div style="width:260px"><ui-datepicker
     [(ngModel)]="model"
     [valueType]="valueType"
     [label]="label" [placeholder]="placeholder" [helperText]="helperText" [errorText]="errorText"
-    [size]="size" [level]="level" [icon]="icon" [showIcon]="showIcon" [firstDayOfWeek]="firstDayOfWeek" [locale]="locale"
+    [size]="size" [level]="level" [floatLabel]="floatLabel" [icon]="icon" [showIcon]="showIcon" [firstDayOfWeek]="firstDayOfWeek" [locale]="locale"
     [selectionMode]="selectionMode" [view]="view" [numberOfMonths]="numberOfMonths"
     [showTime]="showTime" [timeOnly]="timeOnly" [hourFormat]="hourFormat" [stepMinute]="stepMinute" [editableTime]="editableTime"
     [showButtonBar]="showButtonBar" [todayLabel]="todayLabel" [clearLabel]="clearLabel"
@@ -691,3 +699,23 @@ export const ScopedIconFamily: Story = {
       [(ngModel)]="model" valueType="date" label="Rendez-vous" showTime /></div>`,
   }),
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: null, b: null, c: sample },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(3, 200px); gap:28px 20px; align-items:start;">
+        <ui-datepicker floatLabel="over" label="Over label" valueType="date" [(ngModel)]="a" />
+        <ui-datepicker floatLabel="in" label="In label" valueType="date" [(ngModel)]="b" />
+        <ui-datepicker floatLabel="on" label="On label" valueType="date" [(ngModel)]="c" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-field/src/lib/ui-field.html b/projects/ui-kit/forms/ui-field/src/lib/ui-field.html
index 70305a7f..cc3cdf32 100644
--- a/projects/ui-kit/forms/ui-field/src/lib/ui-field.html
+++ b/projects/ui-kit/forms/ui-field/src/lib/ui-field.html
@@ -1,5 +1,5 @@
 <div [class]="classes()">
-  @if (label()) {
+  @if (label() && !isFloating()) {
     <ui-label
       class="ui-field-label"
       [for]="for()"
@@ -10,10 +10,28 @@
     />
   }
 
-  <div class="ui-field-box" (mousedown)="onBoxMouseDown($event)">
-    <ng-content select="[uiFieldPrefix]" />
-    <ng-content />
-    <ng-content select="[uiFieldSuffix]" />
+  <!-- Positioning context of the floating label: this wrapper's box IS the field
+       box's, so the label's offsets read against it whatever the box height.
+       The label is a SIBLING of the box, never a child: `utils.field-inset-edges`
+       hands the horizontal inset to the box's first/last child, and one extra
+       element in there would silently steal it from the control. -->
+  <div class="ui-field-control">
+    <div class="ui-field-box" (mousedown)="onBoxMouseDown($event)">
+      <ng-content select="[uiFieldPrefix]" />
+      <ng-content />
+      <ng-content select="[uiFieldSuffix]" />
+    </div>
+
+    @if (isFloating()) {
+      <ui-label
+        class="ui-field-float-label"
+        [for]="for()"
+        [label]="label()!"
+        [required]="required()"
+        [size]="size()"
+        [disabled]="disabled()"
+      />
+    }
   </div>
 
   @if (message() || hasFooter()) {
diff --git a/projects/ui-kit/forms/ui-field/src/lib/ui-field.scss b/projects/ui-kit/forms/ui-field/src/lib/ui-field.scss
index f818d1c3..a97c9827 100644
--- a/projects/ui-kit/forms/ui-field/src/lib/ui-field.scss
+++ b/projects/ui-kit/forms/ui-field/src/lib/ui-field.scss
@@ -12,6 +12,14 @@
 // edge — hit area, caret zone, autofill background and focus outline all line
 // up with the visible field instead of a text-sized rect floating in it.
 // Do not re-add `padding` here: it would shrink every control back inside.
+//
+// Float label (`_float-{over|in|on}`): the label leaves the flow and is placed
+// over `.ui-field-control`, the box's own wrapper, so its offsets are read
+// against the box whatever its height (fixed, multiline, auto-height). Two
+// states, one geometry: at rest it sits where the value will read, scaled up so
+// it stands in for the placeholder; raised it drops to `scale(1)` at the
+// variant's own offset. Only `top`/`transform`/`color` move, never a font size,
+// so the whole travel stays off the layout path.
 // =====================================================================
 
 $gap: var(--ui-field-gap, var(--units-xs));               /// Gouttière verticale entre le libellé, la boîte et le pied.
@@ -31,7 +39,30 @@ $padding-y-auto-height: var(--ui-field-padding-y-auto-height, var(--units-xs));
 $min-height-multiline: var(--ui-field-min-height-multiline, #{utils.$form-textarea-min-height});                   /// Hauteur minimale de la boîte multiligne (`ui-textarea`).
 $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.$form-textarea-min-height-small}); /// Hauteur minimale de la boîte multiligne, variante `small`.
 
+// --- Float label ------------------------------------------------------
+$float-label-font-size: var(--ui-field-float-label-font-size, var(--size-typography-text-sm)); /// Taille de police du libellé flottant en position haute.
+$float-label-line-height: var(--ui-field-float-label-line-height, 1.25);                       /// Interligne du libellé flottant : c'est lui qui fixe la hauteur de la bande réservée.
+$float-label-scale: var(--ui-field-float-label-scale, 1.3333);                                 /// Agrandissement du libellé flottant au repos, où il tient le rôle du placeholder.
+$float-label-scale-small: var(--ui-field-float-label-scale-small, 1.1667);                     /// Agrandissement du libellé flottant au repos, variante `small`.
+$float-label-offset-x: var(--ui-field-float-label-offset-x, #{utils.$form-field-padding-x});    /// Décalage horizontal du libellé flottant, aligné sur l'inset du contrôle.
+$float-label-offset-y: var(--ui-field-float-label-offset-y, var(--units-2xs));                  /// Respiration au-dessus du libellé flottant dans la boîte, variante `in`.
+$float-label-padding-x: var(--ui-field-float-label-padding-x, var(--units-2xs));                /// Inset horizontal du libellé flottant, variante `on` : c'est lui qui entaille le trait.
+// Width of the affix the label has to clear. Read from the icon scale, since every
+// prefix the kit projects is an icon sized on the field: a wider custom affix is
+// what the `indent` hooks are for.
+$float-label-indent: var(--ui-field-float-label-indent, calc(var(--ui-icon-size-md, var(--size-typography-icon-md)) + #{$box-gap}));             /// Retrait supplémentaire du libellé flottant quand un affixe le précède (icône gauche).
+$float-label-indent-small: var(--ui-field-float-label-indent-small, calc(var(--ui-icon-size-sm, var(--size-typography-icon-sm)) + #{$box-gap})); /// Retrait supplémentaire du libellé flottant quand un affixe le précède, variante `small`.
+
+// Derived on purpose (no hook of their own): retuning the font size or the
+// interline above moves the label, the room reserved for it and the box height
+// together, instead of letting the three drift apart.
+$float-label-height: calc(#{$float-label-font-size} * #{$float-label-line-height}); /// Hauteur du libellé flottant en position haute.
+$float-label-band-in: calc(#{$float-label-height} + #{$float-label-offset-y});      /// Bande réservée au libellé en haut de la boîte, variante `in` (la boîte grandit d'autant).
+$float-label-band-over: calc(#{$float-label-height} + #{$gap});                     /// Bande réservée au libellé au-dessus de la boîte, variante `over`.
+
 .ui-field {
+  --_surface: var(--form-high-surface-default);
+
   display: flex;
   flex-direction: column;
   gap: $gap;
@@ -39,6 +70,10 @@ $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.
   &._small { gap: $gap-small; }
 
   // --- Box -----------------------------------------------------------
+  // The box's own wrapper, rendered in both modes so a field's DOM does not
+  // depend on the option. It is what the floating label is positioned against.
+  &-control { position: relative; }
+
   // Border colour routed through local vars, overridden per level below.
   &-box {
     --_stroke: var(--form-high-stroke-default);
@@ -55,7 +90,7 @@ $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.
     // Radius hook: a host can reshape the corners (e.g. fields glued in a
     // ui-input-group) by setting `--ui-field-radius` on the component host.
     border-radius: var(--ui-field-radius, #{$radius}); /// Rayon exposé pour reformer les coins (utilisé par `ui-input-group`).
-    background-color: var(--form-high-surface-default);
+    background-color: var(--_surface);
     cursor: var(--ui-field-box-cursor, text);          /// Curseur de la boîte, surchargé par les champs non textuels (`ui-select`…).
     @include utils.control-transition(background-color, box-shadow);
   }
@@ -80,9 +115,9 @@ $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.
   }
 
   // --- States --------------------------------------------------------
+  &._disabled { --_surface: var(--form-high-surface-disabled); }
   &._disabled &-box {
     --_stroke: var(--form-high-stroke-disabled);
-    background-color: var(--form-high-surface-disabled);
     cursor: not-allowed;
   }
   &._readonly &-box { cursor: default; }
@@ -103,6 +138,151 @@ $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.
   }
   &._multiline._small &-box { min-height: $min-height-multiline-small; }
 
+  // --- Float label ---------------------------------------------------
+  &._float {
+    // Vertical centre of the control row, from the box's outer top edge. Stated
+    // as a length rather than 50% so a `_multiline` / `_auto-height` box, which
+    // grows with its content, still resolves it on the FIRST row.
+    --_row-center: calc(#{$height} / 2);
+    --_float-scale: #{$float-label-scale};
+    --_float-rest: var(--_row-center);
+    --_float-content: var(--form-high-content-default);
+    --_float-content-rest: var(--form-low-content-default);
+    --_float-content-focus: var(--form-high-content-focused);
+
+    &._small {
+      --_row-center: calc(#{$height-small} / 2);
+      --_float-scale: #{$float-label-scale-small};
+    }
+  }
+
+  &._float._success {
+    --_float-content: var(--form-success-content-default);
+    --_float-content-focus: var(--form-success-content-focused);
+  }
+  &._float._error {
+    --_float-content: var(--form-error-content-default);
+    --_float-content-focus: var(--form-error-content-focused);
+  }
+  &._float._disabled {
+    --_float-content: var(--form-high-content-disabled);
+    --_float-content-rest: var(--form-high-content-disabled);
+    --_float-content-focus: var(--form-high-content-disabled);
+  }
+
+  &-float-label {
+    // The inset is measured from the box's OUTER edge (the positioning context is
+    // its border box), so the border has to be paid back for the label to line up
+    // on the control's own text.
+    --_float-inset: calc(#{$stroke-width} + #{$float-label-offset-x});
+    // Room left inside the box, given back at scale 1 once raised. Divided by the
+    // resting scale because `max-width` is measured before the transform.
+    --_float-max-width: calc(100% - 2 * var(--_float-inset));
+    // `inherit` routes ui-label's own colour back to this host, which is what
+    // makes the tint transition instead of snapping (a custom property does not
+    // interpolate). Both size hooks: the host passes `size` straight through.
+    --ui-label-color: inherit;
+    --ui-label-font-size: #{$float-label-font-size};
+    --ui-label-font-size-small: #{$float-label-font-size};
+
+    display: flex;
+    position: absolute;
+    inset-inline-start: var(--_float-inset);
+    top: var(--_float-rest);
+    max-width: calc(var(--_float-max-width) / var(--_float-scale));
+    font-size: $float-label-font-size;
+    line-height: $float-label-line-height;
+    white-space: nowrap;
+    color: var(--_float-content-rest);
+    transform-origin: 0 50%;
+    transform: translateY(-50%) scale(var(--_float-scale));
+    // At rest the label lies over the control: clicks must reach the caret.
+    pointer-events: none;
+    @include utils.control-transition(top, transform, color);
+
+    @include utils.motion-reduce {
+      transition: none;
+    }
+  }
+
+  // Raised: focus is enough on its own, a value keeps it up once focus leaves,
+  // an open popup counts as focus (a trigger like `ui-datepicker` hands it to
+  // its panel, so `:focus-within` drops while the field is plainly active), and
+  // autofill fills the field without ever firing an input event. Angular's shim
+  // leaves the inside of `:has()` alone, which is how these reach the projected
+  // control; `:is()` keeps the rule valid where `:-webkit-autofill` is unknown.
+  &._float &-control:focus-within &-float-label,
+  &._float._filled &-float-label,
+  &._float &-control:has([aria-expanded='true']) &-float-label,
+  &._float &-control:has(:is(input:-webkit-autofill)) &-float-label {
+    top: 0;
+    max-width: var(--_float-max-width);
+    transform: translateY(var(--_float-raise)) scale(1);
+    color: var(--_float-content);
+    pointer-events: auto;
+  }
+
+  // After the block above: a focused field tints with the focus colour.
+  &._float &-control:focus-within &-float-label { color: var(--_float-content-focus); }
+
+  // A projected prefix pushes the control's text to the right, and the label with
+  // it: `_has-prefix` is the host telling us so, since the affix is content this
+  // stylesheet cannot select.
+  &._float._has-prefix &-float-label {
+    --_float-inset: calc(#{$stroke-width} + #{$float-label-offset-x} + #{$float-label-indent});
+  }
+  &._float._has-prefix._small &-float-label {
+    --_float-inset: calc(#{$stroke-width} + #{$float-label-offset-x} + #{$float-label-indent-small});
+  }
+
+  // over: rises out of the box, into the band reserved above it, on the same row
+  // as a classic label (kept aligned on the control horizontally).
+  &._float-over {
+    --_float-raise: calc(-1 * (#{$gap} + #{$float-label-height}));
+
+    padding-block-start: $float-label-band-over;
+  }
+
+  // in: rises into a band carved at the top INSIDE the box, which grows by that
+  // much so the control row keeps its own height.
+  &._float-in {
+    --_float-raise: calc(#{$stroke-width} + #{$float-label-offset-y});
+    // Centre of the box, band included: an empty `in` field reads as a single tall
+    // box, and a label sitting on the control row alone looks pinned to the bottom.
+    --_float-rest: calc(var(--_row-center) + #{$float-label-band-in} / 2);
+  }
+  // A box that grows with its content has no meaningful centre, and following the
+  // band-shifted first text row would strand the label mid-emptiness: it rests on
+  // the row a single-line field would use, near the top edge.
+  &._float-in._multiline { --_float-rest: var(--_row-center); }
+  // Private contract with `utils.field-float-inset`: the CONTROL carries the band
+  // (see the mixin for why), so the box keeps no vertical padding and everything
+  // else in it goes on centring against the box.
+  &._float-in &-box { --_field-inset-block-start: #{$float-label-band-in}; }
+  &._float-in:not(._multiline):not(._auto-height) &-box { height: calc(#{$height} + #{$float-label-band-in}); }
+  &._float-in._small:not(._multiline):not(._auto-height) &-box { height: calc(#{$height-small} + #{$float-label-band-in}); }
+  &._float-in._multiline &-box { min-height: calc(#{$min-height-multiline} + #{$float-label-band-in}); }
+  &._float-in._multiline._small &-box { min-height: calc(#{$min-height-multiline-small} + #{$float-label-band-in}); }
+  &._float-in._auto-height &-box { min-height: calc(#{$height} + #{$float-label-band-in}); }
+  &._float-in._auto-height._small &-box { min-height: calc(#{$height-small} + #{$float-label-band-in}); }
+
+  // on: rides the top border and notches it. The fill follows the box surface, so
+  // a field laid on another background needs `--form-high-surface-*` retuned with it.
+  &._float-on {
+    --_float-raise: calc((#{$stroke-width} - #{$float-label-height}) / 2);
+
+    // The raised label straddles the trait, so half of it hangs above the box:
+    // reserved here rather than left to overlap whatever sits before the field.
+    padding-block-start: calc((#{$float-label-height} - #{$stroke-width}) / 2);
+  }
+  &._float-on &-float-label {
+    // Padding shifts the text, so the start edge gives it back: the label stays
+    // aligned on the control whether the fill shows or not.
+    inset-inline-start: calc(var(--_float-inset) - #{$float-label-padding-x});
+    padding-inline: $float-label-padding-x;
+    background-color: var(--_surface);
+  }
+
   // --- Footer (message + optional counter) ---------------------------
   &-footer {
     display: flex;
@@ -111,3 +291,7 @@ $min-height-multiline-small: var(--ui-field-min-height-multiline-small, #{utils.
     gap: $footer-gap;
   }
 }
+
+// `:host-context` (not a plain ancestor selector): with emulated encapsulation
+// the attribute lands on the ancestor too, which never matches.
+:host-context([dir='rtl']) .ui-field-float-label { transform-origin: 100% 50%; }
diff --git a/projects/ui-kit/forms/ui-field/src/lib/ui-field.ts b/projects/ui-kit/forms/ui-field/src/lib/ui-field.ts
index 992c5bf3..fb4f7977 100644
--- a/projects/ui-kit/forms/ui-field/src/lib/ui-field.ts
+++ b/projects/ui-kit/forms/ui-field/src/lib/ui-field.ts
@@ -1,7 +1,7 @@
 import { booleanAttribute, Component, computed, input } from '@angular/core';
 import { UiLabel } from '@4sh/ui-kit/forms/ui-label';
 import { UiHelper } from '@4sh/ui-kit/informative/ui-helper';
-import { FieldLevel, FieldSize } from '@4sh/ui-kit/forms';
+import { FieldFloatLabel, FieldLevel, FieldSize } from '@4sh/ui-kit/forms';
 
 /**
  * ui-field — shared presentational shell for "box" fields.
@@ -15,6 +15,12 @@ import { FieldLevel, FieldSize } from '@4sh/ui-kit/forms';
  * Purely visual (no `ControlValueAccessor`): the concrete components
  * (`ui-input`, `ui-input-number`, `ui-input-mask`) own the value and provide the
  * computed `id`/`level`/`message` (via `BaseFormField`).
+ *
+ * `floatLabel` switches the label into the box, where it plays the placeholder
+ * role and rises on focus or once `filled` is set. The raised state is CSS-only
+ * for focus (`:focus-within`) and autofill; the "has a value" half cannot be
+ * expressed in CSS for every control (a `<button>` trigger has no `value`), so
+ * the concrete component reports it through `filled`.
  */
 @Component({
   selector: 'ui-field',
@@ -33,6 +39,10 @@ export class UiField {
   size = input<FieldSize>('default');
   /** Effective level (drives the border + message color). */
   level = input<FieldLevel>('default');
+  /** Floating label placement (`over` | `in` | `on`). Unset = classic label above the box. */
+  floatLabel = input<FieldFloatLabel>();
+  /** The control holds a value: keeps the floating label raised once focus leaves. */
+  filled = input(false, { transform: booleanAttribute });
   /** Disabled state (visual). */
   disabled = input(false, { transform: booleanAttribute });
   /** Read-only state (visual). */
@@ -50,6 +60,12 @@ export class UiField {
   messageId = input<string>();
   /** Renders the footer row even without a message (e.g. to host a `[uiFieldFooter]` counter). */
   hasFooter = input(false, { transform: booleanAttribute });
+  /**
+   * An affix is projected into `[uiFieldPrefix]` (left icon…). Only read in
+   * `floatLabel` mode, to indent the floating label past it: the prefix is
+   * projected content, so no scoped selector here can see it.
+   */
+  hasPrefix = input(false, { transform: booleanAttribute });
 
   /** @ignore */
   protected onBoxMouseDown(event: MouseEvent): void {
@@ -64,6 +80,9 @@ export class UiField {
     control.focus();
   }
 
+  /** @ignore The label is rendered inside the box, as a floating label. */
+  protected readonly isFloating = computed(() => !!this.floatLabel() && !!this.label());
+
   /** @ignore */
   protected readonly classes = computed(() => {
     const c = ['ui-field', `_${this.level()}`];
@@ -72,6 +91,11 @@ export class UiField {
     if (this.readonly()) c.push('_readonly');
     if (this.multiline()) c.push('_multiline');
     if (this.autoHeight()) c.push('_auto-height');
+    if (this.isFloating()) {
+      c.push('_float', `_float-${this.floatLabel()}`);
+      if (this.filled()) c.push('_filled');
+      if (this.hasPrefix()) c.push('_has-prefix');
+    }
     return c.join(' ');
   });
 }
diff --git a/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.html b/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.html
index 52866503..1660ebf4 100644
--- a/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.html
+++ b/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.html
@@ -4,6 +4,9 @@
   [required]="required()"
   [size]="size()"
   [level]="effectiveLevel()"
+  [floatLabel]="floatLabel()"
+  [filled]="isFilled()"
+  [hasPrefix]="!!iconLeft()"
   [disabled]="isDisabled()"
   [readonly]="readonly()"
   [message]="displayMessage()"
@@ -26,7 +29,7 @@
     type="text"
     [id]="resolvedId()"
     [value]="text()"
-    [placeholder]="placeholder() ?? ''"
+    [placeholder]="effectivePlaceholder()"
     [disabled]="isDisabled()"
     [readOnly]="readonly()"
     [required]="required()"
diff --git a/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.ts b/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.ts
index c1687df1..679807ee 100644
--- a/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.ts
+++ b/projects/ui-kit/forms/ui-input-mask/src/lib/ui-input-mask.ts
@@ -70,6 +70,12 @@ export class UiInputMask extends BaseFormField<string> {
   private readonly inputEl = viewChild.required<ElementRef<HTMLInputElement>>('inputEl');
   /** @ignore Masked displayed text. */
   protected readonly text = signal('');
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(() => this.text() !== '');
+  /** @ignore At rest the floating label already holds that spot. */
+  protected readonly effectivePlaceholder = computed(() =>
+    this.hasFloatLabel() ? '' : (this.placeholder() ?? ''),
+  );
 
   /** @ignore */
   protected readonly iconSize = computed<UiIconSize>(() => (this.size() === 'small' ? 'sm' : 'md'));
diff --git a/projects/ui-kit/forms/ui-input-mask/ui-input-mask.mdx b/projects/ui-kit/forms/ui-input-mask/ui-input-mask.mdx
index 21c2cc19..549047ea 100644
--- a/projects/ui-kit/forms/ui-input-mask/ui-input-mask.mdx
+++ b/projects/ui-kit/forms/ui-input-mask/ui-input-mask.mdx
@@ -86,6 +86,20 @@ atteignable par préfixe (`0` est accepté sur `1-31`, en attente du `1`-`9` sui
 > (`9_:__`) reste possible : la complétude relève de la validation du formulaire (`required`, ou un
 > validateur dédié), pas du masque.
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+
+<Canvas of={MaskStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Exemples
 
 <Canvas of={MaskStories.Date} />
diff --git a/projects/ui-kit/forms/ui-input-mask/ui-input-mask.stories.ts b/projects/ui-kit/forms/ui-input-mask/ui-input-mask.stories.ts
index bd41b3cf..ebdf3715 100644
--- a/projects/ui-kit/forms/ui-input-mask/ui-input-mask.stories.ts
+++ b/projects/ui-kit/forms/ui-input-mask/ui-input-mask.stories.ts
@@ -50,6 +50,14 @@ const meta: Meta<UiInputMask> = {
       options: ['default', 'small'],
       table: { defaultValue: { summary: '"default"' } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     level: {
       control: 'inline-radio',
       options: ['default', 'success', 'error'],
@@ -80,7 +88,7 @@ const TEMPLATE = `<div style="width:240px"><ui-input-mask
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [errorText]="errorText" [placeholder]="placeholder"
     [mask]="mask" [ranges]="ranges" [slotChar]="slotChar" [unmask]="unmask"
-    [size]="size" [level]="level" [iconLeft]="iconLeft"
+    [size]="size" [level]="level" [floatLabel]="floatLabel" [iconLeft]="iconLeft"
     [required]="required" [disabled]="disabled" [readonly]="readonly" [invalid]="invalid"
     (valueChange)="valueChange($event)" /></div>`;
 
@@ -172,3 +180,23 @@ export const SignalForms: Story = {
   render: () => ({ template: `<demo-input-mask-signal-forms />` }),
   decorators: [moduleMetadata({ imports: [SignalFormsDemo] })],
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: '', b: '', c: '0612345678' },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(3, 200px); gap:28px 20px; align-items:start;">
+        <ui-input-mask floatLabel="over" label="Over label" mask="(999) 999-9999" [(ngModel)]="a" />
+        <ui-input-mask floatLabel="in" label="In label" mask="(999) 999-9999" [(ngModel)]="b" />
+        <ui-input-mask floatLabel="on" label="On label" mask="(999) 999-9999" [(ngModel)]="c" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.html b/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.html
index 6f2243be..b9a7213f 100644
--- a/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.html
+++ b/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.html
@@ -4,6 +4,8 @@
   [required]="required()"
   [size]="size()"
   [level]="effectiveLevel()"
+  [floatLabel]="floatLabel()"
+  [filled]="isFilled()"
   [disabled]="isDisabled()"
   [readonly]="readonly()"
   [message]="displayMessage()"
@@ -17,7 +19,7 @@
     inputmode="decimal"
     [id]="resolvedId()"
     [value]="text()"
-    [placeholder]="placeholder() ?? ''"
+    [placeholder]="effectivePlaceholder()"
     [disabled]="isDisabled()"
     [readOnly]="readonly()"
     [required]="required()"
diff --git a/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.ts b/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.ts
index f80fc820..dda95a92 100644
--- a/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.ts
+++ b/projects/ui-kit/forms/ui-input-number/src/lib/ui-input-number.ts
@@ -79,6 +79,12 @@ export class UiInputNumber extends BaseFormField<number | null> {
   private readonly inputEl = viewChild.required<ElementRef<HTMLInputElement>>('inputEl');
   /** @ignore Raw displayed text (independent from the model while typing). */
   protected readonly text = signal('');
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(() => this.text() !== '');
+  /** @ignore At rest the floating label already holds that spot. */
+  protected readonly effectivePlaceholder = computed(() =>
+    this.hasFloatLabel() ? '' : (this.placeholder() ?? ''),
+  );
 
   /** @ignore Suffix unit, ignored when `currency` is set (the formatted value already carries it). */
   protected readonly displayUnit = computed(() => (this.currency() ? null : (this.unit() ?? null)));
diff --git a/projects/ui-kit/forms/ui-input-number/ui-input-number.mdx b/projects/ui-kit/forms/ui-input-number/ui-input-number.mdx
index 1065cef6..5bfdc8e5 100644
--- a/projects/ui-kit/forms/ui-input-number/ui-input-number.mdx
+++ b/projects/ui-kit/forms/ui-input-number/ui-input-number.mdx
@@ -28,6 +28,22 @@ Autonome, `[(ngModel)]`, reactive forms ou Signal Forms (`[formField]`).
 <Canvas of={NumberStories.Small} />
 <Canvas of={NumberStories.Error} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+En variante `in`, le spinner garde toute la hauteur de la boîte et l'unité y reste centrée :
+seule la valeur saisie descend sous la bande du libellé.
+
+<Canvas of={NumberStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Formatage (Intl.NumberFormat)
 
 Le format riche (groupement des milliers, devise, décimales) est appliqué **au blur** ; au
diff --git a/projects/ui-kit/forms/ui-input-number/ui-input-number.stories.ts b/projects/ui-kit/forms/ui-input-number/ui-input-number.stories.ts
index ca20a201..0581fb6f 100644
--- a/projects/ui-kit/forms/ui-input-number/ui-input-number.stories.ts
+++ b/projects/ui-kit/forms/ui-input-number/ui-input-number.stories.ts
@@ -25,6 +25,14 @@ const meta: Meta<UiInputNumber> = {
       options: ['default', 'small'],
       table: { defaultValue: { summary: '"default"' } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     level: {
       control: 'inline-radio',
       options: ['default', 'success', 'error'],
@@ -84,7 +92,7 @@ type Story = StoryObj<UiInputNumber>;
 const TEMPLATE = `<div style="width:220px"><ui-input-number
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [placeholder]="placeholder"
-    [size]="size" [level]="level" [min]="min" [max]="max" [step]="step"
+    [size]="size" [level]="level" [floatLabel]="floatLabel" [min]="min" [max]="max" [step]="step"
     [allowDecimals]="allowDecimals" [unit]="unit" [showButtons]="showButtons"
     [locale]="locale" [currency]="currency" [useGrouping]="useGrouping"
     [required]="required" [disabled]="disabled" [readonly]="readonly" [invalid]="invalid"
@@ -159,3 +167,23 @@ export const SignalForms: Story = {
   render: () => ({ template: `<demo-input-number-signal-forms />` }),
   decorators: [moduleMetadata({ imports: [SignalFormsDemo] })],
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: null, b: null, c: 42 },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(3, 180px); gap:28px 20px; align-items:start;">
+        <ui-input-number floatLabel="over" label="Over label" [(ngModel)]="a" />
+        <ui-input-number floatLabel="in" label="In label" [(ngModel)]="b" />
+        <ui-input-number floatLabel="on" label="On label" [(ngModel)]="c" unit="kg" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.html b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.html
index 05e95a93..6a4bc274 100644
--- a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.html
+++ b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.html
@@ -94,6 +94,8 @@
     [required]="required()"
     [size]="size()"
     [level]="effectiveLevel()"
+    [floatLabel]="floatLabel()"
+    [filled]="isFilled()"
     [disabled]="isDisabled()"
     [readonly]="readonly()"
     [autoHeight]="true"
diff --git a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.scss b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.scss
index b6c2a043..b92743b8 100644
--- a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.scss
+++ b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.scss
@@ -59,6 +59,7 @@ $input-min-width: var(--ui-input-tags-input-min-width, #{utils.rem-calc(80)});
     gap: $tag-gap;
     min-width: 0;
     @include utils.field-inset-edges;
+    @include utils.field-float-inset;
   }
 
   // Accessibility wrapper only (role="listbox" around the tags): no box of its
diff --git a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.ts b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.ts
index 14dec0ed..b2b4b383 100644
--- a/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.ts
+++ b/projects/ui-kit/forms/ui-input-tags/src/lib/ui-input-tags.ts
@@ -315,9 +315,14 @@ export class UiInputTags<T = unknown> extends BaseFormField<T[]> {
   protected readonly canType = computed(
     () => !this.isDisabled() && !this.readonly() && !this.isFull(),
   );
-  /** @ignore The placeholder is shown only while there is no tag. */
+  /** @ignore The placeholder is shown only while there is no tag, and never
+   *  under a floating label at rest: it already holds that spot. */
   protected readonly effectivePlaceholder = computed(() =>
-    this.tagValues().length ? '' : (this.placeholder() ?? ''),
+    this.hasFloatLabel() || this.tagValues().length ? '' : (this.placeholder() ?? ''),
+  );
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(
+    () => this.tagValues().length > 0 || this.inputText() !== '',
   );
 
   /** @ignore Flat entries (no groups). */
diff --git a/projects/ui-kit/forms/ui-input-tags/ui-input-tags.mdx b/projects/ui-kit/forms/ui-input-tags/ui-input-tags.mdx
index 359c415c..c515907d 100644
--- a/projects/ui-kit/forms/ui-input-tags/ui-input-tags.mdx
+++ b/projects/ui-kit/forms/ui-input-tags/ui-input-tags.mdx
@@ -95,6 +95,21 @@ Tailles `default` et `small`.
 
 <Canvas of={InputTagsStories.Sizes} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+La boîte grandissant avec les tags, le libellé se cale sur la première rangée.
+
+<Canvas of={InputTagsStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Formulaires (ngModel / Reactive / Signal Forms)
 
 `ui-input-tags` est un `ControlValueAccessor` standard : sa valeur est un `string[]` (ou `T[]`).
diff --git a/projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories.ts b/projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories.ts
index a0a7ebe5..8f629110 100644
--- a/projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories.ts
+++ b/projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories.ts
@@ -111,6 +111,14 @@ const meta: Meta<UiInputTags> = {
       description: 'Taille du champ.',
       table: { type: { summary: "'default' | 'small'" }, defaultValue: { summary: "'default'" } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     chipLevel: {
       control: 'inline-radio',
       options: ['default', 'highlight', 'success', 'warning', 'error'],
@@ -404,3 +412,23 @@ export const Sizes: Story = {
     `,
   }),
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: [] as string[], b: [] as string[], c: ['Angular', 'TypeScript'] },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(2, 260px); gap:28px 20px; align-items:start;">
+        <ui-input-tags floatLabel="over" label="Over label" [(ngModel)]="a" />
+        <ui-input-tags floatLabel="in" label="In label" [(ngModel)]="b" />
+        <ui-input-tags floatLabel="on" label="On label" [(ngModel)]="c" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-input/src/lib/ui-input.html b/projects/ui-kit/forms/ui-input/src/lib/ui-input.html
index b79bf268..638b1708 100644
--- a/projects/ui-kit/forms/ui-input/src/lib/ui-input.html
+++ b/projects/ui-kit/forms/ui-input/src/lib/ui-input.html
@@ -4,6 +4,9 @@
   [required]="required()"
   [size]="size()"
   [level]="effectiveLevel()"
+  [floatLabel]="floatLabel()"
+  [filled]="isFilled()"
+  [hasPrefix]="!!iconLeft() || !!resolvedIconLeftTemplate()"
   [disabled]="isDisabled()"
   [readonly]="readonly()"
   [message]="displayMessage()"
@@ -29,8 +32,8 @@
     [class._small]="size() === 'small'"
     [type]="type()"
     [id]="resolvedId()"
-    [value]="value() ?? displayValue()"
-    [placeholder]="placeholder() ?? ''"
+    [value]="renderedValue()"
+    [placeholder]="effectivePlaceholder()"
     [disabled]="isDisabled()"
     [readOnly]="readonly()"
     [required]="required()"
diff --git a/projects/ui-kit/forms/ui-input/src/lib/ui-input.spec.ts b/projects/ui-kit/forms/ui-input/src/lib/ui-input.spec.ts
new file mode 100644
index 00000000..90835512
--- /dev/null
+++ b/projects/ui-kit/forms/ui-input/src/lib/ui-input.spec.ts
@@ -0,0 +1,147 @@
+/**
+ * TestBed spec for the `floatLabel` mode (FSHSP-157), exercised through
+ * `ui-input`: the geometry lives in `ui-field`'s stylesheet, but everything worth
+ * asserting is the contract between the two: which classes the shell puts on the
+ * field, where the label is rendered, and the two things the concrete component
+ * has to report (`filled`, and the placeholder it must stop emitting).
+ *
+ * Follows the pattern from `base-control-value-accessor.spec.ts` (FSHSP-93):
+ * a minimal host component + `TestBed.configureTestingModule`.
+ */
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { describe, expect, it } from 'vitest';
+import { UiInput } from './ui-input';
+import { FieldFloatLabel } from '@4sh/ui-kit/forms';
+
+@Component({
+  imports: [FormsModule, UiInput],
+  template: `<ui-input
+    [label]="label()"
+    [floatLabel]="floatLabel()"
+    [placeholder]="placeholder()"
+    [iconLeft]="iconLeft()"
+    [required]="required()"
+    [(ngModel)]="value"
+  />`,
+})
+class InputHost {
+  readonly label = signal<string | undefined>('Nom');
+  readonly floatLabel = signal<FieldFloatLabel | undefined>(undefined);
+  readonly placeholder = signal<string | undefined>('Votre nom');
+  readonly iconLeft = signal<string | undefined>(undefined);
+  readonly required = signal(false);
+  value = '';
+}
+
+async function setup(initialValue = '') {
+  await TestBed.configureTestingModule({ imports: [InputHost] }).compileComponents();
+  const fixture: ComponentFixture<InputHost> = TestBed.createComponent(InputHost);
+  fixture.componentInstance.value = initialValue;
+  fixture.detectChanges();
+  await fixture.whenStable();
+  const el = (selector: string) => fixture.nativeElement.querySelector(selector) as HTMLElement;
+  const settle = async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+  };
+  return { fixture, host: fixture.componentInstance, el, settle };
+}
+
+describe('ui-input floatLabel', () => {
+  it('renders the classic label above the box by default', async () => {
+    const { el } = await setup();
+    expect(el('.ui-field-label')).not.toBeNull();
+    expect(el('.ui-field-float-label')).toBeNull();
+    expect(el('.ui-field').className).not.toContain('_float');
+    expect((el('input') as HTMLInputElement).placeholder).toBe('Votre nom');
+  });
+
+  it('keeps the box inside its positioning wrapper in both modes', async () => {
+    const { el, host, settle } = await setup();
+    expect(el('.ui-field-control > .ui-field-box')).not.toBeNull();
+    host.floatLabel.set('over');
+    await settle();
+    expect(el('.ui-field-control > .ui-field-box')).not.toBeNull();
+  });
+
+  it.each(['over', 'in', 'on'] as const)('moves the label into the box (%s)', async (variant) => {
+    const { el, host, settle } = await setup();
+    host.floatLabel.set(variant);
+    await settle();
+
+    const field = el('.ui-field');
+    expect(field.className).toContain('_float');
+    expect(field.className).toContain(`_float-${variant}`);
+    expect(el('.ui-field-label')).toBeNull();
+    expect(el('.ui-field-control > .ui-field-float-label')).not.toBeNull();
+  });
+
+  it('neutralises the placeholder, which the resting label now stands in for', async () => {
+    const { el, host, settle } = await setup();
+    host.floatLabel.set('over');
+    await settle();
+    expect((el('input') as HTMLInputElement).placeholder).toBe('');
+  });
+
+  it('does nothing without a label to float', async () => {
+    const { el, host, settle } = await setup();
+    host.label.set(undefined);
+    host.floatLabel.set('over');
+    await settle();
+
+    expect(el('.ui-field').className).not.toContain('_float');
+    expect(el('.ui-field-float-label')).toBeNull();
+    expect((el('input') as HTMLInputElement).placeholder).toBe('Votre nom');
+  });
+
+  it('reports `filled` on typing, so the label stays raised once focus leaves', async () => {
+    const { el, host, settle } = await setup();
+    host.floatLabel.set('on');
+    await settle();
+    expect(el('.ui-field').className).not.toContain('_filled');
+
+    const input = el('input') as HTMLInputElement;
+    input.value = 'Robin';
+    input.dispatchEvent(new Event('input'));
+    await settle();
+    expect(el('.ui-field').className).toContain('_filled');
+
+    input.value = '';
+    input.dispatchEvent(new Event('input'));
+    await settle();
+    expect(el('.ui-field').className).not.toContain('_filled');
+  });
+
+  it('reports `filled` on a value written by the form, not just on typing', async () => {
+    const { el, host, settle } = await setup('Robin');
+    host.floatLabel.set('on');
+    await settle();
+    expect(el('.ui-field').className).toContain('_filled');
+  });
+
+  it('indents the label past a projected prefix', async () => {
+    const { el, host, settle } = await setup();
+    host.floatLabel.set('in');
+    await settle();
+    expect(el('.ui-field').className).not.toContain('_has-prefix');
+
+    host.iconLeft.set('magnifying-glass');
+    await settle();
+    expect(el('.ui-field').className).toContain('_has-prefix');
+  });
+
+  it('stays a real label: `for` association and required marker survive', async () => {
+    const { el, host, settle } = await setup();
+    host.floatLabel.set('over');
+    host.required.set(true);
+    await settle();
+
+    const label = el('.ui-field-float-label label') as HTMLLabelElement;
+    const input = el('input') as HTMLInputElement;
+    expect(label.getAttribute('for')).toBe(input.id);
+    expect(input.id).not.toBe('');
+    expect(el('.ui-field-float-label .ui-label-marker')).not.toBeNull();
+  });
+});
diff --git a/projects/ui-kit/forms/ui-input/src/lib/ui-input.ts b/projects/ui-kit/forms/ui-input/src/lib/ui-input.ts
index a345d0d7..73f0136c 100644
--- a/projects/ui-kit/forms/ui-input/src/lib/ui-input.ts
+++ b/projects/ui-kit/forms/ui-input/src/lib/ui-input.ts
@@ -110,6 +110,14 @@ export class UiInput extends BaseFormField<string> {
 
   /** @ignore Icon size aligned with the field size. */
   protected readonly iconSize = computed<UiIconSize>(() => (this.size() === 'small' ? 'sm' : 'md'));
+  /** @ignore Text rendered in the input: display-only `value` wins over the model. */
+  protected readonly renderedValue = computed(() => this.value() ?? this.displayValue());
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(() => this.renderedValue() !== '');
+  /** @ignore At rest the floating label already holds that spot. */
+  protected readonly effectivePlaceholder = computed(() =>
+    this.hasFloatLabel() ? '' : (this.placeholder() ?? ''),
+  );
   /** @ignore Input wins over the projected `#iconLeft` template. */
   protected readonly resolvedIconLeftTemplate = computed(
     () => this.iconLeftTemplate() ?? this.iconLeftTemplateContent(),
diff --git a/projects/ui-kit/forms/ui-input/ui-input.mdx b/projects/ui-kit/forms/ui-input/ui-input.mdx
index 7d6751c0..4962709a 100644
--- a/projects/ui-kit/forms/ui-input/ui-input.mdx
+++ b/projects/ui-kit/forms/ui-input/ui-input.mdx
@@ -33,6 +33,71 @@ champ est en erreur (`invalid` explicite, ou automatique : contrôle invalide +
 <Canvas of={InputStories.Readonly} />
 <Canvas of={InputStories.Small} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter dès que le champ prend le focus ou porte une valeur. Trois positions
+hautes, communes à tous les champs bâtis sur `ui-field` :
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Valeur</th>
+      <th>Position haute</th>
+      <th>Effet sur la mise en page</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>over</code></td>
+      <td>Au-dessus de la boîte, sur la rangée d'un libellé classique, mais aligné
+      horizontalement sur le contrôle plutôt que sur le bord du champ.</td>
+      <td>Une bande de la hauteur du libellé est réservée au-dessus du champ : le libellé
+      sort de la boîte sans jamais recouvrir ce qui précède, et rien ne bouge autour.</td>
+    </tr>
+    <tr>
+      <td><code>in</code></td>
+      <td>Dans une bande réservée en haut de la boîte.</td>
+      <td>La boîte grandit de cette bande, de sorte que la rangée du contrôle garde sa
+      hauteur habituelle. La bande est réservée par le contrôle, pas par la boîte : seul
+      le texte saisi descend sous le libellé, tandis qu'affixes, unités, zones d'action et
+      libellé au repos restent centrés sur la boîte.</td>
+    </tr>
+    <tr>
+      <td><code>on</code></td>
+      <td>À cheval sur le trait supérieur, qu'il entaille.</td>
+      <td>Aucune. L'entaille est peinte avec le fond du champ
+      (<code>--form-high-surface-*</code>) : un champ posé sur un autre fond demande donc
+      de retoucher ce token avec lui.</td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={InputStories.FloatLabel} />
+
+```html
+<ui-input [(ngModel)]="name" floatLabel="on" label="Nom" />
+```
+
+Le libellé remonte au **focus**, dès qu'une **valeur** est présente, tant qu'un
+**panneau** ouvert retient le champ (un déclencheur comme `ui-datepicker` confie le focus
+à son calendrier, sans cesser d'être actif pour autant), et sur **autofill** du navigateur
+(qui ne déclenche aucun évènement de saisie). Il redescend quand le champ est vide, sans
+focus et sans panneau. Seuls la position et l'échelle du libellé
+changent : pas de `font-size` animée, donc aucune reprise de mise en page pendant le
+trajet, et la transition est coupée quand l'utilisateur demande moins d'animation.
+
+Avec une **icône gauche**, le libellé au repos se décale pour la laisser voir. Ce retrait est
+calé sur l'échelle des icônes (`--ui-field-float-label-indent`), pas mesuré : un glyphe plus
+large que son pas d'échelle, ou un affixe projeté d'une autre nature, se règle par ce hook.
+
+> Au repos, le libellé flottant occupe la place du `placeholder`. Celui-ci est donc
+> **neutralisé** tant que `floatLabel` et `label` sont tous les deux renseignés, deux textes
+> superposés dans la même boîte n'étant lisibles ni l'un ni l'autre. `floatLabel` sans
+> `label` ne fait rien : le champ garde son rendu habituel, placeholder compris.
+
+<Canvas of={InputStories.FloatLabelStates} />
+
 ## Slots & zone d'action
 
 L'icône droite devient une **zone d'action** (bouton carré pleine hauteur, focusable) dès qu'on
@@ -102,6 +167,10 @@ via l'interop CVA native, ainsi qu'aux formulaires template-driven (`[(ngModel)]
       <td><strong>Label</strong></td>
       <td><code>ui-label</code> natif lié à l'input par <code>for</code>/<code>id</code> (clic sur le label = focus). Sans label visible : <code>ariaLabel</code> / <code>ariaLabelledBy</code>.</td>
     </tr>
+    <tr>
+      <td><strong>Libellé flottant</strong></td>
+      <td>Reste un <code>&lt;label for&gt;</code> natif, marqueur <code>required</code> compris : c'est bien un libellé qui se déplace, pas un placeholder promu. Il n'intercepte pas le pointeur au repos (le clic va au curseur de saisie) et le récupère une fois remonté.</td>
+    </tr>
     <tr>
       <td><strong>Aide & erreur</strong></td>
       <td><code>ui-helper</code> relié par <code>aria-describedby</code>. <code>aria-invalid</code> + bordure erreur, automatique quand le contrôle est invalide et touché/modifié.</td>
diff --git a/projects/ui-kit/forms/ui-input/ui-input.stories.ts b/projects/ui-kit/forms/ui-input/ui-input.stories.ts
index 4474b095..df381f30 100644
--- a/projects/ui-kit/forms/ui-input/ui-input.stories.ts
+++ b/projects/ui-kit/forms/ui-input/ui-input.stories.ts
@@ -45,6 +45,14 @@ const meta: Meta<UiInput> = {
       options: ['default', 'success', 'error'],
       table: { type: { summary: 'FieldLevel' }, defaultValue: { summary: '"default"' } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` natif est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     unit: {
       control: 'text',
       description: 'Unité suffixe.',
@@ -100,7 +108,7 @@ type Story = StoryObj<UiInput>;
 const TEMPLATE = `<div style="width:260px"><ui-input
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [errorText]="errorText" [placeholder]="placeholder"
-    [type]="type" [size]="size" [level]="level" [unit]="unit"
+    [type]="type" [size]="size" [level]="level" [unit]="unit" [floatLabel]="floatLabel"
     [iconLeft]="iconLeft" [iconRight]="iconRight"
     [required]="required" [disabled]="disabled" [readonly]="readonly" [invalid]="invalid"
     (valueChange)="valueChange($event)" /></div>`;
@@ -151,6 +159,47 @@ export const Readonly: Story = {
   args: { label: 'Champ', readonly: true },
 };
 
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte, là où se place un libellé classique),
+ * `in` (dans une bande réservée en haut de la boîte, qui grandit d'autant) et `on` (à
+ * cheval sur le trait, qu'il entaille).
+ *
+ * Ligne du haut au repos, ligne du bas avec une valeur : c'est le même champ dans ses deux
+ * états. Cliquer dans un champ vide fait la transition.
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: '', b: '', c: '', d: 'Robin', e: 'Robin', f: 'Robin' },
+    template: `<div style="display:grid; grid-template-columns:repeat(3, 200px); gap:28px 20px; align-items:end">
+      <ui-input [(ngModel)]="a" floatLabel="over" label="Over label" />
+      <ui-input [(ngModel)]="b" floatLabel="in" label="In label" />
+      <ui-input [(ngModel)]="c" floatLabel="on" label="On label" />
+      <ui-input [(ngModel)]="d" floatLabel="over" label="Over label" />
+      <ui-input [(ngModel)]="e" floatLabel="in" label="In label" />
+      <ui-input [(ngModel)]="f" floatLabel="on" label="On label" />
+    </div>`,
+  }),
+};
+
+/**
+ * Le mode flottant ne retire rien : marqueur `required`, niveaux, message d'aide ou
+ * d'erreur, `small`, icônes et zone d'action se composent comme sur un libellé classique.
+ */
+export const FloatLabelStates: Story = {
+  render: () => ({
+    props: { a: '', b: 'robin@', c: 'Non modifiable', d: '' },
+    template: `<div style="display:grid; grid-template-columns:repeat(2, 220px); gap:28px 20px; align-items:start">
+      <ui-input [(ngModel)]="a" floatLabel="on" label="Nom" required helperText="Tel qu'il figure sur la pièce d'identité." />
+      <ui-input [(ngModel)]="b" floatLabel="on" label="Email" invalid errorText="Adresse e-mail invalide." />
+      <ui-input [(ngModel)]="c" floatLabel="in" label="Champ" disabled />
+      <ui-input [(ngModel)]="d" floatLabel="in" label="Recherche" size="small" iconLeft="magnifying-glass" />
+    </div>`,
+  }),
+};
+
 // Zone d'action droite : recherche → icône « effacer » visible seulement avec du texte, clic vide.
 export const Search: Story = {
   render: () => ({
diff --git a/projects/ui-kit/forms/ui-label/src/lib/ui-label.scss b/projects/ui-kit/forms/ui-label/src/lib/ui-label.scss
index 926928a8..805ce482 100644
--- a/projects/ui-kit/forms/ui-label/src/lib/ui-label.scss
+++ b/projects/ui-kit/forms/ui-label/src/lib/ui-label.scss
@@ -13,12 +13,22 @@ $font-size-small: var(--ui-label-font-size-small, var(--size-typography-text-sm)
   display: inline-flex;
   align-items: center;
   gap: $gap;
+  max-width: 100%;
+  min-width: 0;
   font-family: var(--fontfamily-base);
   font-weight: var(--weight-regular);
   font-size: $font-size;
   color: var(--ui-label-color, var(--form-high-content-default)); /// Couleur du texte, pilotable par un composant de formulaire parent (hover, disabled…).
   cursor: inherit;
 
+  // Truncates only where the label is actually constrained (a floating label
+  // bounded by the field box). Free-flowing, it still wraps as before.
+  &-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &-marker {
     color: var(--informative-errorlow-content-default);
   }
diff --git a/projects/ui-kit/forms/ui-label/ui-label.mdx b/projects/ui-kit/forms/ui-label/ui-label.mdx
index 3a06639f..5b594362 100644
--- a/projects/ui-kit/forms/ui-label/ui-label.mdx
+++ b/projects/ui-kit/forms/ui-label/ui-label.mdx
@@ -11,6 +11,10 @@ composants (`ui-checkbox`, `ui-radio`, `ui-input`… via `ui-field`). Le texte v
 `label` ou d'un contenu projeté via `<ng-content>` ; `for` relie le label à l'id de l'élément
 de formulaire labellisé.
 
+Le texte passe à la ligne tant que rien ne le contraint ; contraint en largeur (cas du libellé
+flottant de `ui-field`, borné par la boîte du champ), il tronque avec une ellipse plutôt que de
+déborder.
+
 <Canvas of={LabelStories.Default} />
 
 ## API
diff --git a/projects/ui-kit/forms/ui-select/src/lib/ui-select.html b/projects/ui-kit/forms/ui-select/src/lib/ui-select.html
index 541a945e..c0928728 100644
--- a/projects/ui-kit/forms/ui-select/src/lib/ui-select.html
+++ b/projects/ui-kit/forms/ui-select/src/lib/ui-select.html
@@ -180,6 +180,8 @@
     [required]="required()"
     [size]="size()"
     [level]="effectiveLevel()"
+    [floatLabel]="floatLabel()"
+    [filled]="hasValue()"
     [disabled]="isDisabled()"
     [readonly]="readonly()"
     [autoHeight]="multiple()"
@@ -197,7 +199,7 @@
         aria-autocomplete="list"
         [id]="resolvedId()"
         [value]="selectedLabel()"
-        [placeholder]="placeholder() ?? ''"
+        [placeholder]="effectivePlaceholder()"
         [disabled]="isDisabled()"
         [readOnly]="readonly()"
         [required]="required()"
@@ -266,7 +268,7 @@
         } @else if (hasValue()) {
           <span class="ui-select-value" [class._wrap]="multiple()">{{ selectedLabel() }}</span>
         } @else {
-          <span class="ui-select-placeholder">{{ placeholder() ?? '' }}</span>
+          <span class="ui-select-placeholder">{{ effectivePlaceholder() }}</span>
         }
       </button>
     }
diff --git a/projects/ui-kit/forms/ui-select/src/lib/ui-select.scss b/projects/ui-kit/forms/ui-select/src/lib/ui-select.scss
index 2b719222..0449c471 100644
--- a/projects/ui-kit/forms/ui-select/src/lib/ui-select.scss
+++ b/projects/ui-kit/forms/ui-select/src/lib/ui-select.scss
@@ -80,6 +80,7 @@ $focus-ring-width: var(--ui-select-focus-ring-width, #{utils.$form-focus-ring-wi
     color: var(--form-high-content-default);
     cursor: pointer;
     @include utils.field-inset-edges;
+    @include utils.field-float-inset;
 
     &._small { font-size: map.get($size-small, font-size); }
     &:disabled { cursor: not-allowed; color: var(--form-high-content-disabled); }
@@ -105,9 +106,11 @@ $focus-ring-width: var(--ui-select-focus-ring-width, #{utils.$form-focus-ring-wi
   &-values {
     display: flex;
     align-items: center;
+    align-self: stretch;
     flex-wrap: wrap;
     gap: $values-gap;
     min-width: 0;
+    @include utils.field-float-inset;
   }
 
   // Collapsed-count indicator (`maxSelectedLabels`).
diff --git a/projects/ui-kit/forms/ui-select/src/lib/ui-select.ts b/projects/ui-kit/forms/ui-select/src/lib/ui-select.ts
index b2553456..8edcfb5c 100644
--- a/projects/ui-kit/forms/ui-select/src/lib/ui-select.ts
+++ b/projects/ui-kit/forms/ui-select/src/lib/ui-select.ts
@@ -492,6 +492,11 @@ export class UiSelect<T = unknown> extends BaseFormField<SelectValue<T>> {
     return this.overflowCount() > 0 ? `${shown} ${this.overflowText()}` : shown;
   });
 
+  /** @ignore At rest the floating label already holds that spot. */
+  protected readonly effectivePlaceholder = computed(() =>
+    this.hasFloatLabel() ? '' : (this.placeholder() ?? ''),
+  );
+
   /** @ignore The clear action is shown. */
   protected readonly showClearButton = computed(
     () => this.showClear() && this.hasValue() && !this.isDisabled() && !this.readonly(),
diff --git a/projects/ui-kit/forms/ui-select/ui-select.mdx b/projects/ui-kit/forms/ui-select/ui-select.mdx
index cf6e36be..ebb4b6cc 100644
--- a/projects/ui-kit/forms/ui-select/ui-select.mdx
+++ b/projects/ui-kit/forms/ui-select/ui-select.mdx
@@ -206,6 +206,23 @@ dans `options`.
 
 <Canvas of={SelectStories.LazyVirtualScroll} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+En mode `multiple`, la boîte à hauteur automatique suit : le libellé se cale sur la première
+rangée de valeurs, pas au milieu d'une boîte qui a grandi. Le chevron, le bouton d'effacement
+et l'indicateur de chargement restent centrés sur la boîte dans les trois variantes.
+
+<Canvas of={SelectStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## API
 
 <ArgTypes of={SelectStories} />
diff --git a/projects/ui-kit/forms/ui-select/ui-select.stories.ts b/projects/ui-kit/forms/ui-select/ui-select.stories.ts
index 448ffdc0..82252d59 100644
--- a/projects/ui-kit/forms/ui-select/ui-select.stories.ts
+++ b/projects/ui-kit/forms/ui-select/ui-select.stories.ts
@@ -259,6 +259,14 @@ const meta: Meta<UiSelect> = {
       description: 'Taille du champ.',
       table: { type: { summary: 'FieldSize' }, defaultValue: { summary: "'default'" } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     required: {
       control: 'boolean',
       table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
@@ -325,7 +333,7 @@ export const Basic: Story = {
         <ui-select
           [(ngModel)]="city"
           [options]="cities" optionLabel="name" optionValue="code"
-          [label]="label" [placeholder]="placeholder" [size]="size"
+          [label]="label" [placeholder]="placeholder" [size]="size" [floatLabel]="floatLabel"
           [helperText]="helperText" [errorText]="errorText"
           [multiple]="multiple" [checkmark]="checkmark" [checkbox]="checkbox"
           [showClear]="showClear" [filter]="filter" [editable]="editable" [loading]="loading"
@@ -733,3 +741,29 @@ export const LazyVirtualScroll: Story = {
     };
   },
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { cities: CITIES, a: null, b: null, c: 'LYO', d: ['PAR', 'LYO'] },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(2, 240px); gap:28px 20px; align-items:start;">
+        <ui-select floatLabel="over" label="Over label" [(ngModel)]="a"
+                   [options]="cities" optionLabel="name" optionValue="code" />
+        <ui-select floatLabel="in" label="In label" [(ngModel)]="b"
+                   [options]="cities" optionLabel="name" optionValue="code" />
+        <ui-select floatLabel="on" label="On label" [(ngModel)]="c" [showClear]="true"
+                   [options]="cities" optionLabel="name" optionValue="code" />
+        <ui-select floatLabel="on" label="Villes (multiple)" [(ngModel)]="d"
+                   [options]="cities" optionLabel="name" optionValue="code"
+                   [multiple]="true" [checkmark]="true" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.html b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.html
index 10200c4e..27ad4c4b 100644
--- a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.html
+++ b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.html
@@ -5,6 +5,8 @@
   [required]="required()"
   [size]="size()"
   [level]="effectiveLevel()"
+  [floatLabel]="floatLabel()"
+  [filled]="isFilled()"
   [disabled]="isDisabled()"
   [readonly]="readonly()"
   [message]="displayMessage()"
@@ -20,7 +22,7 @@
     [id]="resolvedId()"
     [value]="displayValue()"
     [rows]="rows()"
-    [placeholder]="placeholder() ?? ''"
+    [placeholder]="effectivePlaceholder()"
     [disabled]="isDisabled()"
     [readOnly]="readonly()"
     [required]="required()"
diff --git a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.scss b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.scss
index e4b1647f..5165f8d9 100644
--- a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.scss
+++ b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.scss
@@ -25,11 +25,13 @@ $count-font-size-small: var(--ui-textarea-count-font-size-small, var(--size-typo
     line-height: $line-height;
     padding-block: $padding-block;
     max-width: 100%;
+    @include utils.field-float-inset($padding-block);
 
     &._small {
       min-height: $min-height-small;
       padding-block: $padding-block-small;
       font-size: $font-size-small;
+      @include utils.field-float-inset($padding-block-small);
     }
 
     &._auto-resize { overflow: hidden; }
diff --git a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.ts b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.ts
index 5676ddf3..a69cdcb0 100644
--- a/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.ts
+++ b/projects/ui-kit/forms/ui-textarea/src/lib/ui-textarea.ts
@@ -65,6 +65,12 @@ export class UiTextarea extends BaseFormField<string> {
   );
   /** @ignore Current character count. */
   protected readonly charCount = computed(() => (this.modelValue() ?? '').length);
+  /** @ignore Keeps a floating label raised once focus leaves. */
+  protected readonly isFilled = computed(() => this.charCount() > 0);
+  /** @ignore At rest the floating label already holds that spot. */
+  protected readonly effectivePlaceholder = computed(() =>
+    this.hasFloatLabel() ? '' : (this.placeholder() ?? ''),
+  );
   /** @ignore Over the maxlength (only reachable programmatically). */
   protected readonly overLimit = computed(() => {
     const max = this.maxlength();
diff --git a/projects/ui-kit/forms/ui-textarea/ui-textarea.mdx b/projects/ui-kit/forms/ui-textarea/ui-textarea.mdx
index a47f6ec5..118cb810 100644
--- a/projects/ui-kit/forms/ui-textarea/ui-textarea.mdx
+++ b/projects/ui-kit/forms/ui-textarea/ui-textarea.mdx
@@ -34,6 +34,22 @@ la bordure rouge et `errorText` apparaissent quand le contrôle est **invalide E
 <Canvas of={TextareaStories.Readonly} />
 <Canvas of={TextareaStories.Small} />
 
+## Libellé flottant
+
+`floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du placeholder,
+et le fait remonter au focus ou dès que le champ porte une valeur. Trois positions hautes :
+`over` (au-dessus de la boîte), `in` (dans une bande réservée en haut de la boîte, qui grandit
+d'autant) et `on` (à cheval sur le trait, qu'il entaille). Le `placeholder` est neutralisé tant
+que `floatLabel` et `label` sont tous les deux renseignés : les deux textes se superposeraient.
+
+Sur une boîte multiligne, le libellé au repos se cale **en haut**, à la même rangée dans les
+trois variantes, plutôt qu'au milieu d'une boîte qui peut être très haute.
+
+<Canvas of={TextareaStories.FloatLabel} />
+
+Le mécanisme est celui du shell partagé `ui-field`, commun à tous les champs à boîte : détail
+des trois variantes, du déclenchement et des conséquences de mise en page sur [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Validation
 
 Le composant est un `ControlValueAccessor` : il se branche sans code additionnel aux
diff --git a/projects/ui-kit/forms/ui-textarea/ui-textarea.stories.ts b/projects/ui-kit/forms/ui-textarea/ui-textarea.stories.ts
index d27c68e0..ed98ad73 100644
--- a/projects/ui-kit/forms/ui-textarea/ui-textarea.stories.ts
+++ b/projects/ui-kit/forms/ui-textarea/ui-textarea.stories.ts
@@ -60,6 +60,14 @@ const meta: Meta<UiTextarea> = {
       options: ['default', 'small'],
       table: { type: { summary: 'FieldSize' }, defaultValue: { summary: '"default"' } },
     },
+    floatLabel: {
+      control: 'select',
+      options: [undefined, 'over', 'in', 'on'],
+      labels: { undefined: 'aucun (libellé classique)' },
+      description:
+        'Libellé flottant : le libellé descend dans le champ, où il tient le rôle du placeholder, et remonte au focus ou dès que le champ porte une valeur. Le `placeholder` est alors neutralisé.',
+      table: { type: { summary: 'FieldFloatLabel' }, defaultValue: { summary: 'undefined' } },
+    },
     level: {
       control: 'inline-radio',
       options: ['default', 'success', 'error'],
@@ -105,7 +113,7 @@ const TEMPLATE = `<div style="width:280px"><ui-textarea
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [errorText]="errorText" [placeholder]="placeholder"
     [rows]="rows" [maxlength]="maxlength" [autoResize]="autoResize" [resize]="resize" [showCount]="showCount"
-    [size]="size" [level]="level"
+    [size]="size" [level]="level" [floatLabel]="floatLabel"
     [required]="required" [disabled]="disabled" [readonly]="readonly" [invalid]="invalid"
     (valueChange)="valueChange($event)" /></div>`;
 
@@ -217,3 +225,23 @@ export const SignalForms: Story = {
   render: () => ({ template: `<demo-textarea-signal-forms />` }),
   decorators: [moduleMetadata({ imports: [SignalFormsDemo] })],
 };
+
+// --- Libellé flottant ---------------------------------------------------
+/**
+ * `floatLabel` fait descendre le libellé **dans** le champ, où il tient le rôle du
+ * placeholder, puis le fait remonter au focus ou dès qu'une valeur est présente. Trois
+ * positions hautes : `over` (au-dessus de la boîte), `in` (dans une bande réservée en haut
+ * de la boîte, qui grandit d'autant) et `on` (à cheval sur le trait, qu'il entaille).
+ */
+export const FloatLabel: Story = {
+  render: () => ({
+    props: { a: '', b: '', c: 'Bonjour,\nvoici un message multiligne.' },
+    template: `
+      <div style="display:grid; grid-template-columns:repeat(3, 220px); gap:20px; align-items:start;">
+        <ui-textarea floatLabel="over" label="Over label" [(ngModel)]="a" [rows]="3" />
+        <ui-textarea floatLabel="in" label="In label" [(ngModel)]="b" [rows]="3" />
+        <ui-textarea floatLabel="on" label="On label" [(ngModel)]="c" [rows]="3" />
+      </div>
+    `,
+  }),
+};
diff --git a/projects/ui-kit/styles/component-vars.scss b/projects/ui-kit/styles/component-vars.scss
index daa8d0d4..a375c9cd 100644
--- a/projects/ui-kit/styles/component-vars.scss
+++ b/projects/ui-kit/styles/component-vars.scss
@@ -11,7 +11,7 @@
 // design token instead — it follows brand, light/dark and viewport.
 //
 // Generated by `npm run docs:config`, values read from the compiled CSS — do not
-// edit here. 598 variables; 19 more exist whose value depends on the
+// edit here. 607 variables; 19 more exist whose value depends on the
 // rendered variant, listed in each component’s “Theming” section in Storybook.
 // =====================================================================
 
@@ -190,6 +190,11 @@
   --ui-field-padding-y-auto-height:             var(--units-xs);
   // Espacements
   --ui-field-box-gap:                           var(--ui-form-field-gap, var(--units-sm));
+  --ui-field-float-label-indent:                calc(var(--ui-icon-size-md, var(--size-typography-icon-md)) + var(--ui-field-box-gap, var(--ui-form-field-gap, var(--units-sm))));
+  --ui-field-float-label-indent-small:          calc(var(--ui-icon-size-sm, var(--size-typography-icon-sm)) + var(--ui-field-box-gap, var(--ui-form-field-gap, var(--units-sm))));
+  --ui-field-float-label-offset-x:              var(--ui-form-field-padding-x, var(--units-md));
+  --ui-field-float-label-offset-y:              var(--units-2xs);
+  --ui-field-float-label-padding-x:             var(--units-2xs);
   --ui-field-footer-gap:                        var(--units-sm);
   --ui-field-gap:                               var(--units-xs);
   --ui-field-gap-small:                         var(--units-xs);
@@ -197,6 +202,12 @@
   --ui-field-focus-ring-width:                  var(--ui-focus-ring-width, var(--units-2xs));
   --ui-field-radius:                            var(--ui-form-field-radius, var(--radius-sm));
   --ui-field-stroke-width:                      var(--ui-control-stroke-width, var(--stroke-default));
+  // Typographie
+  --ui-field-float-label-font-size:             var(--size-typography-text-sm);
+  --ui-field-float-label-line-height:           1.25;
+  // Motion
+  --ui-field-float-label-scale:                 1.3333;
+  --ui-field-float-label-scale-small:           1.1667;
   // Divers
   --ui-field-box-cursor:                        text;
   --ui-field-focus-ring-opacity:                50%;
diff --git a/projects/ui-kit/styles/utils/_mixins.scss b/projects/ui-kit/styles/utils/_mixins.scss
index 872d3237..cb814cf6 100644
--- a/projects/ui-kit/styles/utils/_mixins.scss
+++ b/projects/ui-kit/styles/utils/_mixins.scss
@@ -76,6 +76,18 @@
   }
 }
 
+/// Vertical room a floating `in` label reserves at the top of the field box.
+/// Carried by the CONTROL, never by the box: affixes, actions and spinners then
+/// keep centring on the box, and the control still spans it edge to edge (hit
+/// area, caret zone, autofill background). Only for a DIRECT child of the box,
+/// stretched to its height. `$extra` adds the control's own vertical inset.
+/// e.g. @include utils.field-float-inset($padding-block);
+@mixin field-float-inset($extra: 0px) {
+  // `--_field-inset-block-start` is set by `ui-field` on `.ui-field-box` in
+  // `_float-in` mode, and inherits down to the projected control.
+  padding-block-start: calc(#{$extra} + var(--_field-inset-block-start, 0px));
+}
+
 /// Bare native <input>/<textarea> filling the field box (no border/bg).
 /// `$inset` = horizontal field inset owned by the control (see
 /// `field-inset-edges`); pass `false` when the control is nested in a wrapper
@@ -94,7 +106,11 @@
   font-size: var(--size-typography-text-default);
   color: var(--form-high-content-default);
 
-  @if $inset { @include field-inset-edges('padding', $inset); }
+  // `$inset: false` = nested in a wrapper that already carries both insets.
+  @if $inset {
+    @include field-inset-edges('padding', $inset);
+    @include field-float-inset;
+  }
 
   &::placeholder {
     color: var(--form-low-content-default);