type- Type
string- Default
"text"- Description
- HTML input type — text, email, password, number, tel, etc.
Components / Inputs
Input
உள்ளீடு
The Input component is a single-line text field. It wraps the native HTML input element with Tamil DS styling, focus states, and error state support.
உள்ளீடு கூறு ஒற்றை வரி உரை புலம். HTML input அலகை Tamil DS வடிவமைப்புடன் மூடுகிறது.
Default
Component preview
Basic inputஅடிப்படை உள்ளீடுStates
Component preview
Input statesஉள்ளீட்டு நிலைகள்With icon
Component preview
Icon inputsசின்னத்துடன் உள்ளீடுAnatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Input field
கொள்கலன்required<input>Native HTML input element with Tamil DS styling. Height is 40px (h-10), border uses rounded-md. On focus, shows a 2px brand ring (focus-visible:ring-ring/25). On hover, border subtly darkens (border-foreground/20). Error state triggered via aria-invalid='true' switches border to destructive red.
2
Placeholder
இடப்பிடிப்பான்Hint text shown when the field is empty, rendered at 60% opacity of muted-foreground. Should be an example value, not instructions — use 'முத்துக்குமார்' not 'Enter your name'. For bilingual, show both: 'முத்துக்குமார் / Muthukumar'.
3
Value text
மதிப்புUser-entered text inheriting the font stack — Inter for Latin characters, Noto Sans Tamil for Tamil script. Size is 14px (text-sm). The input supports all HTML types: text, email, password, number, tel, url. Use inputMode='numeric' for Aadhaar/pin fields.
4
Leading icon slot
முன்னணி சின்னம்svgAn absolutely-positioned icon inside a relative wrapper div. Requires pl-9 on the input to prevent text overlap. Sized at 16×16px. Positioned via left-3 top-1/2 -translate-y-1/2 for perfect vertical centering. Common icons: Search, Mail, Lock, User.
API
Props
placeholder- Type
string- Default
- -
- Description
- Hint text. Use Tamil examples for Tamil-primary UIs.
disabled- Type
boolean- Default
false- Description
- Disables the field.
readOnly- Type
boolean- Default
false- Description
- Makes the field non-editable but focusable.
aria-invalid- Type
"true" | "false"- Default
- -
- Description
- Set to true when the field has a validation error.
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | HTML input type — text, email, password, number, tel, etc. |
placeholder | string | - | Hint text. Use Tamil examples for Tamil-primary UIs. |
disabled | boolean | false | Disables the field. |
readOnly | boolean | false | Makes the field non-editable but focusable. |
aria-invalid | "true" | "false" | - | Set to true when the field has a validation error. |
Best practices
Use real-world examples in placeholders
உண்மையான உதாரணங்களைப் பயன்படுத்தவும்
Help users understand the expected format by showing a realistic example value.
யதார்த்தமான உதாரண மதிப்பைக் காட்டுவதன் மூலம் எதிர்பார்க்கப்படும் வடிவமைப்பு மற்றும் தகவலை பயனர்கள் புரிந்துகொள்ள உதவவும்.
Don't use instructional placeholders
அறிவுறுத்தல் வகையிலான உரையைத் தவிர்க்கவும்
Placeholders disappear on typing. Never use them for critical instructions like 'Enter your name here'.
டைப் செய்யும்போது இடப்பிடிப்பான்கள் மறைந்துவிடும். எனவே 'உங்கள் மொபைல் எண்ணை இங்கே உள்ளிடவும்' போன்ற முக்கியமான அறிவுறுத்தல்களுக்கு இவற்றை ஒருபோதும் பயன்படுத்த வேண்டாம்.
- Aadhaar fields:
maxLength=12, numeric keyboard on mobile viainputMode="numeric". - Error messages must appear in Tamil first: தவறான மின்னஞ்சல் / Invalid email.