The LabelInput is a minimalist form input component featuring a smooth floating label animation and optional password visibility toggle. Inspired by Spell UI's clean design.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/label-input.json
Examples
Color Variants
Login Form
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "" | The floating label text for the input field. |
ringColor | RingColor | "muted" | Defines the focus ring color. Options: muted, primary, secondary, destructive, red, blue, green, yellow, purple, pink, orange, cyan, indigo, violet, rose, amber, lime, emerald, sky, slate, fuchsia. |
type | string | "text" | HTML input type (text, email, password, etc.). Password type shows visibility toggle. |
placeholder | string | "" | Placeholder text shown when input is empty and not focused. |
containerClassName | string | — | Additional CSS classes for the container wrapper. |
className | string | — | Additional CSS classes for the input element. |