TextInput
A TextInput is a single-line field for collecting user text. It inherits all native <input> behaviour from the browser.
Overview
When to use
- To collect short free-form text from the user (name, search query, amount).
- Inside forms alongside labels and validation messages.
When not to use
- For multi-line content — use a
<textarea>instead. - For selecting from a fixed set of options — use a select or combobox.
Sizes
Medium (default) — 32px height. Use in most contexts: forms, modals, inline edits.
Large — 40px height. Use for prominent standalone inputs or alongside large buttons.
Types
All standard HTML input types are supported (text, email, password, number, etc.) and passed directly to the native element. Number inputs hide the browser spinner for a cleaner look.
States
With Value
Focus
On focus, the inner bevel deepens — the top-left shadows intensify to signal the field is active. This state is CSS-driven (:focus) and not statically renderable in a story.
Motion animation — transition-[box-shadow] 150ms
Disabled
Disabled inputs reduce to 40% opacity and show a not-allowed cursor. The disabled prop is a standard HTML attribute passed directly to the native element.
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
| Property | Token |
|---|---|
| background | --color-bg-page |
| text color | --color-text-primary |
| placeholder color | --color-text-secondary |
| bevel (top-left outer) | --sunken-outer-dark |
| bevel (bottom-right outer) | --sunken-outer-light |
| bevel (top-left inner) | --sunken-inner-dark |
| bevel (bottom-right inner) | --sunken-inner-light |
Changelog
| Date | Change |
|---|---|
| 2026-03-23 | Migrated to CVA/Tailwind; added size variants (md: 32px, lg: 40px); removed hardcoded CSS file; expanded type support to all HTML input types; added stories and documentation |
| 2026-03-15 | Initial component created |