Text input with label, floating label, error shake, and helper text
Omit label and pass aria-label: any native input attribute passes
through to the <input>.
The label sits inside the field at rest and lifts on focus or when filled.
Pure CSS — no JS, no layout shift. Uses --motion-glide + --motion-fast.
When error transitions from empty to set, the input shakes with a decaying
oscillation. Retriggerable — click "Submit invalid" again to re-shake.
Motion tokens: cubic-bezier(0.36, 0.07, 0.19, 0.97) over 450ms.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Input label text |
value | string | "" | Input value (bindable) |
placeholder | string | - | Placeholder text |
error | string | - | Error message (triggers shake on set) |
floatingLabel | boolean | false | Label floats on focus/fill |
type | string | "text" | HTML input type |
disabled | boolean | false | Disable the input |
required | boolean | false | Mark as required |
helpText | string | - | Helper text below input |