Form field

A text input with a floating label, animated validation states, and a character counter. Every state transition uses spring physics — the error shake is a keyframe sequence fired imperatively with useAnimation.

Live demo

Idle → error → success

Full name

As it appears on your ID

With character limit

Short bio

Tell us a little about yourself

Disabled

Account ID

Why it animates

In healthcare intake and apartment applications, form errors are high-stakes moments. A field that shakes on error is harder to miss than one that just turns red — and the spring physics make the feedback feel physical rather than digital.

Usage

import { FormField } from '@/components/ui/FormField'

// Idle — just a label and helper text
<FormField
  label="Full name"
  helperText="As it appears on your ID"
/>

// Error — shakes and shows the message
<FormField
  label="Email address"
  status="error"
  errorMessage="Please enter a valid email"
/>

// Success — checkmark draws itself in
<FormField
  label="Date of birth"
  status="success"
/>