Forms & Inputs

Text Input

A text field that allows users to input custom text entries, select from dropdown, or select dates from a calendar. Supports Text, Dropdown, Contact, and Date input types with full state management.

V 1.0View in Storybook
Controls
Input Type
State
Input Size
Show Hint Line
Required *
Show Info Icon
Show Type Indicator
Show Right Icon
Enter your input

Variants

All States — Medium
Enter your input
Enter your input
Enter your input
Enter your input
Hint
Enter your input
Input Types
Text
Dropdown
Contact
+91
Hint
Date
Large (Textarea)
Description
0/100
Notes
Required field
Input Title Variants
Standard label
Required field
With info
Required + info

Props

Name
Type
Default
size
'md' | 'lg'
'md'
state
'default' | 'typing' | 'typed' | 'error' | 'disabled'
'default'
extraInputIcon
'nill' | 'dropdown' | 'contact' | 'date' | 'checked'
'nill'
label
string
—
required
boolean
false
showInfoIcon
boolean
false
showHintLine
boolean
false
helperText
string
—
maxLength
number
—
showTypeIndicator
boolean
false
showRightIcon
boolean
true
prefixText
string
—

Code

import { Input } from '@/src/components/Input/Input'

// Text — Default
<Input label="Enter your input" required placeholder="Enter your input" />

// Contact with prefix
<Input
  label="Enter your contact"
  required
  extraInputIcon="contact"
  prefixText="+91"
  showRightIcon
  showHintLine
  helperText="Hint"
/>

// Dropdown
<Input label="Category" extraInputIcon="dropdown" showRightIcon placeholder="Select" />

// Error state
<Input
  label="Email"
  state="error"
  showHintLine
  helperText="Hint"
/>

// Large textarea with char count (text type only)
<Input label="Description" size="lg" showHintLine maxLength={100} />

Usage guidelines

When to use
  • Use a Text input for free-form single-line responses like names, email addresses, or short values.
  • Use the Large (textarea) variant when users need to enter multi-line content such as notes or descriptions.
  • Use the Dropdown type when the user must select from a fixed list of options.
  • Use the Contact type with a +91 prefix for phone number fields.
  • Use the Date type whenever a calendar date is required — it communicates the expected format visually.
  • Show the hint line with a helper message whenever inline validation feedback is needed.
When not to use
  • Don't use the Large textarea for short single-value inputs — use Medium instead.
  • Don't show the cross (clear) icon in Default or Typed states — it should only appear in Typing state.
  • Don't apply the Large size to Dropdown, Contact, or Date input types.
  • Avoid showing a type indicator on states other than Typing.
  • Don't use placeholder text as a substitute for a label — always include a label above the field.