formstext input

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 @klera/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.