Input
V 1.0View in Storybook
Input with 4 types — text, number, textbox (multi-line) and otp. Focused / error / disabled states.
Playground
6
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-input--playground&viewMode=story&args=type%3Atext%3Blabel%3ASet+Password%3Bplaceholder%3AWrite+here%3BhelperText%3Aminimum+8+character%3Berror%3A%21false%3Bdisabled%3A%21false%3BleadingIcon%3A%21true%3BleadingIconType%3Apassword%3BtrailingIcon%3A%21true%3BtrailingIconType%3Ahide%3BcountryCode%3A%2B91%3Blength%3A6Code
<Input
type="text"
label="Set Password"
placeholder="Write here"
helperText="minimum 8 character"
error={false}
disabled={false}
leadingIcon
leadingIconType="password"
trailingIcon
trailingIconType="hide"
countryCode="+91"
length={6}
/>Props
| Name | Type | Default |
|---|---|---|
type | 'text' | 'number' | 'textbox' | 'otp' | 'text' |
label | string | 'Set Password' |
placeholder | string | 'Write here' |
helperText | string | 'minimum 8 character' |
error | boolean | false |
disabled | boolean | false |
leadingIcon | boolean | true |
leadingIconType | 'password' | 'email' | 'password' |
trailingIcon | boolean | true |
trailingIconType | 'show' | 'hide' | 'info' | 'hide' |
countryCode | string | '+91' |
length | number | 6 |
Usage guidelines
When to use
- Use text inputs for short-form data like names, emails, and passwords.
- Switch to the textbox type when multi-line input is expected (comments, descriptions).
- Use OTP type for verification codes — it controls digit count and auto-advances focus.
- Always show a helper text to set expectations about format or constraints.
When not to use
- Don't use a text input when a select dropdown would better constrain options.
- Avoid disabling inputs without explaining why in nearby copy.
- Don't show error state before the user has interacted with the field.