BASuite
BAInput
A versatile input component supporting text, password, numeric, masked, and OTP formats with built-in validation options.
Example:
import { BAInput } from "basuite";
<>
<BAInput label="Email" placeholder="Enter your email" validationType="email" />
<BAInput label="Password" inputType="passwordinput" placeholder="Enter password" />
<BAInput label="Contact Number" inputType="maskinput" mask="(###) ###-####" />
<BAInput label="Amount" inputType="numericinput" prefix="$" decimalScale={2} />
<BAInput label="OTP" inputType="otpinput" length={6} otpMark="*" />
</>
Props:
| Name | Type | Description | Default |
|---|---|---|---|
| label | string | Label displayed above the input field. | |
| placeholder | string | Placeholder text for the input. | |
| disabled | boolean | Disables the input. | false |
| required | boolean | Marks input as required. | false |
| className | string | Custom CSS className for styling. | |
| onChange | function | Change event handler. | |
| onInput | function | Input event handler. | |
| onKeyDown | function | Keyboard key press handler. | |
| onBlur | function | Blur event handler. | |
| onFocus | function | Focus event handler. | |
| value | any | Controlled value of the input. | |
| type | any | HTML input type (default text). | |
| inputType | "numericinput" | "maskinput" | "passwordinput" | "otpinput" | Determines which input variation to render. | |
| mask | string | Mask format for maskinput type. | |
| textAlign | "left" | "right" | "center" | Aligns text inside the input. | "left" |
| validationType | "email" | "contactNumber" | Built-in validation mode (currently supports email). | |
| decimalScale | number | Number of decimal places for numeric input. | |
| prefix | any | Element or string to render before input value. | |
| suffix | any | Element or string to render after input value. | |
| allowNegative | boolean | Whether negative numbers are allowed in numeric input. | false |
| loading | boolean | Shows a loading indicator. | false |
| maxlength | number | Maximum character length for input. | |
| length | number | Number of digits for OTP input. | |
| otpMark | string | Character mask for OTP input fields. |