Input

Animated form field with a floating label, a focus glow, and a shake-on-error animation.

@akex/input

Installation

npm install @akex/input

Usage

import { Input } from "@akex/input";

<Input label="Email" type="email" />
<Input label="Password" error="Too short" />
<Input label="Username" helperText="Letters and numbers only" />

Try it — type an email without an @

We'll never share your email

Full name

As it appears on your ID

Variants

Default

Filled

Ghost

Sizes

Small

Default

Large

Props

Prop	Type	Default	Description
label	string	—	Floating label rendered inside the field
error	string	—	Error message — triggers shake + destructive styling
helperText	string	—	Hint shown below the field when there is no error
variant	string	"default"	"default" \| "filled" \| "ghost"
inputSize	string	"default"	"sm" \| "default" \| "lg"
...props	InputHTMLAttributes	—	All native input attributes (value, onChange, type…)

Back