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
with suffix
kg
suffix renders right-aligned inside the field.