Hop Labels, animated React component
Outlined text fields whose label sits inside like a placeholder, then lifts into the border on focus with a hop running along its letters while the outline parts to make room. The email field checks itself on blur with a shake or a tick.
- Pro
- Inputs & Controls
- Spring
Play with it
Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| accent | string | "#0071e3" | Outline and label colour while a field is focused. |
| autoplay | boolean | false | Types a name and an email into the form by itself, until someone touches it. |