Input

About Input

Input is the workhorse text field of the catalog. It accepts standard HTML input types (text, email, tel, url, password, number) and adds the design-system-consistent label, placeholder, help-text, and error-state slots that every real form needs.

Validation can be driven by HTML constraint attributes, an external form library (react-hook-form, formik), or via a `validate` prop that runs on blur or submit. Sizing, leading and trailing icons, and a clearable variant are all built in.

When to use it

• Email and password fields in auth flows.
• Name and free-text capture in onboarding.
• Search bars with a leading magnifying-glass icon.
• Numeric entry with validation for thresholds.

Common props