Text Input
<Input placeholder={"Enter First Name"} title={"First Name"} type={"text"} name={"firstName"} id={"designFirstName"} color={"green"} />Email Input
<Input placeholder={"Enter Email"} title={"Email"} type={"email"} name={"email"} id={"designEmail"} color={"blue"} />Password
<Input placeholder={"Enter Password"} title={"Password"} type={"password"} name={"password"} id={"designPassword"} color={"purple"} />Input with Icon
<Input placeholder={"Enter Text"} title={"Icon Text"} type={"text"} name={"textIcon"} id={"designTextIcon"} color={"green"} icon={AlarmOnIcon} />Max Length
<Input placeholder={"Enter Text"} title={"Text Input"} type={"text"} name={"textMaxInput"} id={"designTextMaxInput"} color={"green"} maxLength={25} />Name | Description | Type | Required | Default | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
color | Input border color. | string | false | "defaultText" | ||||||||||
className | List of classes for this element. | string | array | false | "" | ||||||||||
forwardRef | Ref to component or DOM element. | function | object | false | null | ||||||||||
| ||||||||||||||
id | Unique identifier for this element. | string | true | |||||||||||
name | Name of input element. | string | true | |||||||||||
type | Type of input element. | string | false | "email" | ||||||||||
title | Title of input label. | false | null | |||||||||||
placeholder | Placeholder text if input is empty. | string | false | "" | ||||||||||
onChange | Function that executes when input changes. | func | false | null | ||||||||||
value | Initial value of input. | string | number | false | "" | ||||||||||
maxLength | Max number of characters allowed for input. | number | false | 0 | ||||||||||
icon | Icon included in input box. | element | false | null | ||||||||||
onIconClick | Function that executes when user clicks on the icon. | func | false | null | ||||||||||