Label Input

Input field with floating label and password visibility toggle.

tailwind-variants@lucide/svelte

Email address

Value: Waiting for input

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/label-input.json

Password

Project Name

Primary

Orange

Blue

Name	Type	Default	Description
`type`	`"text" \| "email" \| "password" \| "search" \| "tel" \| "url" \| "number" \| "hidden"`	`"text"`	Controls the input type and enables the password visibility toggle when set to `password`.
`label`	`string`	`""`	`The floating label text rendered inside the field container.`
`ringColor`	`RingColor \| undefined`	`"muted"`	`Selects the focus ring color variant for the input.`
`value`	`string \| number \| undefined`	`undefined`	Controlled field value. Supports `bind:value`.
`placeholder`	`string \| undefined`	`""`	`Hidden by default and revealed during focus to avoid competing with the label.`
`containerClassName`	`string \| undefined`	`undefined`	`Custom classes applied to the outer wrapper element.`
`inputClassName`	`string \| undefined`	`undefined`	`Custom classes applied directly to the input element.`
`disabled`	`boolean \| undefined`	`false`	`Disables typing, focus styles, and the password toggle button.`
`class`	`string \| undefined`	`undefined`	`Custom classes merged onto the wrapper root.`