Blazor TextArea - Floating Label

This example demonstrates the floating label functionality of the TextArea control. The floating label pattern improves clarity by transforming the placeholder into a persistent label when the field is active or contains content, preserving context for the user and reducing ambiguity.

The floating label moves above the input when the user focuses the textarea or enters a value, and it returns to its placeholder position when the field is empty (depending on the configured behavior). The sample highlights how each option affects layout, visual emphasis, and the available space for content.

• Never — The placeholder remains inside the textarea and never floats; use this when a static inline hint is preferred.
• Auto — The placeholder floats on focus or when the textarea contains a value; this is the default, adaptive behavior for most forms.
• Always — The placeholder continuously floats above the input for constant visibility, useful when persistent labels are required by design.

The sample demonstrates the visual transitions between states so you can observe spacing, label animation, and how floated labels interact with multi-line content. It also shows how each mode preserves or reclaims vertical space and changes the visual hierarchy of the control.

When applying floating labels, ensure text contrast and sizing remain legible in both placeholder and floated states, and verify keyboard and touch interactions preserve expected focus behavior so all users can discover and operate the control reliably.

Use the sample to compare modes and choose the behavior that best balances readability, layout density, and user expectations for your application.