FloatLabel

FloatLabel appears on top of the input field when focused.

Click to see the floating label
PREVIEW

FloatLabel is used by wrapping the input and its label.

basic-demo

The variant property defines the position of the label. Default value is over, whereas in and on are the alternatives.

variants-demo

When the form element is invalid, the label is also highlighted.

invalid-demo

Screen Reader

FloatLabel does not require any roles and attributes.

Keyboard Support

Component does not include any interactive elements.