CleenUI · Forms · Input

Input

The standard text input — sized, labeled, validatable, with built-in error and help-text slots.

storybook.cleenui.com · forms-input--controlled
Open in new window

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

Prop
Type
Description
type
"text" | "email" | "tel" | "url" | "password" | "number"
HTML input type.
size
"sm" | "md" | "lg"
Visual size variant.
label
string
Field label rendered above the input.
error
string
Error message; flips the field into error styling when set.
leadingIcon
string
Icon name rendered inside the input on the left.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with