FloatingLabel: Blazor floating label component

Examples

Wrap a native input; give it a placeholder so the label knows when the field is empty.

Full name Email address

Ana Silva <no email>

website/Examples/DataInput/FloatingLabelBasicExample.razor Source

The label follows the input's size class (input-sm, input-lg).

Small Medium Large

website/Examples/DataInput/FloatingLabelSizesExample.razor Source

Works around a select, too.

Plan

Plan: pro

website/Examples/DataInput/FloatingLabelSelectExample.razor Source

DaisyBlazor

Label string
= null
The floating label text displayed above the input when focused or filled.
Class string
= null
Additional CSS classes merged onto the floating-label element.
Style string
= null
Inline styles applied to the floating-label element.

Name	Type	Default	Description
Label	string	null	The floating label text displayed above the input when focused or filled.
Class	string	null	Additional CSS classes merged onto the floating-label element.
Style	string	null	Inline styles applied to the floating-label element.

ChildContent RenderFragment
The input element (or any form control) to wrap with the floating label.

Name	Type	Description
ChildContent	RenderFragment	The input element (or any form control) to wrap with the floating label.