Text input
The staple field. CompactInput with kind="text" — single-line text capture with hover, focus, and post-blur validation states.
Same component renders email / phone / number / date / textarea variants by changing the kind prop. Each variant has its own page with the relevant validation behavior.
import from @halwel/ui/components/forms/CompactInput
Variants
Narrow (default)
132px wide. Used in tight inline layouts (e.g. metric rows).
Wide
100% Up to 436px. Used as the standard onboarding field width.
With helper text
With suffix
kg
Suffix renders right-aligned inside the field.