Design System

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

As it appears on your insurance card.

With suffix
kg

Suffix renders right-aligned inside the field.