FloatingLabel

Input with a label that animates upward on focus or when the field has a value.

ExamplesCodeUsageChangelog

Default

The label sits inside the field at rest and floats to the top-left on focus.

Email address

Tailwind v4

<FloatingLabel v-model="email" label="Email address" />

Pre-filled value

When modelValue is set the label is already in the floated position.

Full name

Tailwind v4

<FloatingLabel v-model="name" label="Full name" />

Password field

Pass any valid <input> type through the type prop.

Password

Tailwind v4

<FloatingLabel v-model="password" label="Password" type="password" />

Error state

Email address

Please enter a valid email address

Tailwind v4

<FloatingLabel v-model="email" label="Email address" :error="errors.email" />

Disabled

Username

Tailwind v4

<FloatingLabel v-model="username" label="Username" :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	string	—	Input value (use with v-model)
label	string	required	The floating label text
type	string	'text'	Native input type
disabled	boolean	false	Disables the input
error	string	—	Error message below the input
id	string	auto	Explicit id for the input (auto-generated if omitted)

Events

Event	Payload	Description
update:modelValue	string	Emitted on every keystroke