Float Input

Input with floating label that animates on focus

import { FloatingLabelInput } from "@plexui/ui/components/FloatingLabelInput";

Examples

Overview

Filled state

With error message

Clear button

Disabled

Read only

All states

Empty
Filled
Invalid
Disabled
Read only

Password input

Reference

PropTypeDefaultDescription
labelstringFloating label text
errorMessagestringValidation message below input; sets invalid state
disabledbooleanfalseDisable input interactions
invalidbooleanfalseInvalid visual state
readOnlybooleanfalseRead-only input state
onClear() => voidShows a clear button when input has value