Input

A text input field with support for labels, icons, and validation.

Installation

tsx

import { Input } from "madagent";

Default

With Label

With Helper Text

Username

Must be 3-20 characters

With Error

Invalid email address

With Icons

Disabled

Prop	Type	Default	Description
`label`	`string`	-	Label displayed above the input
`helperText`	`string`	-	Helper text displayed below the input
`errorText`	`string`	-	Error message displayed below the input
`iconLeft`	`ReactNode`	-	Icon rendered inside the input on the left
`iconRight`	`ReactNode`	-	Icon rendered inside the input on the right
`disabled`	`boolean`	`false`	Disables the input

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

البريد الإلكتروني

كلمة المرور

Usage

tsx

<div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 300 }}>
  <Input label="البريد الإلكتروني" placeholder="أدخل بريدك الإلكتروني" />
  <Input label="كلمة المرور" type="password" placeholder="أدخل كلمة مرورك" />
</div>