Input

Text inputs collect user data. They support labels, helper text, error validation, icons, and disabled states.

Default

We will never share your email.

tsx

<Input
  label="Email"
  placeholder="you@example.com"
  helperText="We will never share your email."
/>

Click the input below to see the focus glow effect.

Project Name

Username

Username is already taken.

tsx

<Input
  label="Username"
  error="Username is already taken."
  value="virgil"
/>

API Key

tsx

<Input label="API Key" disabled value="sk-***" />

tsx

<Input
  label="Search"
  placeholder="Search components..."
  icon={<SearchIcon />}
/>

Prop	Type	Default	Description	Required
label	`string`	-	Label displayed above the input	No
placeholder	`string`	-	Placeholder text	No
helperText	`string`	-	Helper text below the input	No
error	`string`	-	Error message; applies red styling	No
disabled	`boolean`	false	Disables the input	No
icon	`ReactNode`	-	Icon rendered inside the input, before text	No
value	`string`	-	Controlled input value	No
onChange	`(value: string) => void`	-	Change handler	No