Section 01
Text Input — All States
Height 56px, borderRadius 14px. Focus = gold ring. Error = coral border + message. Disabled = 38% opacity.
Core States
With Icons & Actions
Section 02
Amount Input
Large ₹ + number (72px height), denomination chips below. Tabular nums for all monetary values.
Error — Insufficient Funds
Section 03
Search Bar
48px height, 14px radius. Default on gray bg, active shows white + gold focus ring.
🔍
Search brands, offers…
Default (inactive)
🔍
zomato
✕
Active / Typing
🔍
food
12 results
✕
With Results Count
Section 04
Dropdown / Select
Closed state = input-like. Open state = bottom sheet or floating card. 56px options, 16px radius panel.
Select a brand…
▼
Closed (empty)
Zomato
▼
Closed (selected)
Select Brand
Zomato ✓
Swiggy
Zepto
Amazon
Flipkart
Open Options Panel
Section 05
Controls — Checkbox, Radio, Toggle, Slider, Star Rating
All interactive controls with full state coverage. Min 44×44pt touch area on all.
Checkbox
Unchecked
Checked
–
Select all brands
3 of 8 selected
Indeterminate
Disabled
Radio
Unselected
Selected
Disabled
Toggle / Switch
Off
Auto-invest
Rounds up to ₹10
On
Disabled
Slider
Amount Slider (single handle)
Star Rating
★
★
★
★
★
4 / 5 stars
Section 06
PIN & OTP Entry
4-box PIN for app lock. 6-box OTP for verification. Each box = 56×64px (PIN) or 48×56px (OTP). Full state coverage.
4-Box PIN
Incorrect PIN. 2 attempts left.
Error
6-Box OTP
Invalid OTP. Try again.
Error
Section 07
Text Area
Multi-line input, same token set as text input. Min height 100px, auto-grows. Character count shown at bottom-right.
Reason for cancellation
Please provide at least 20 characters
3 / 250
Error + character limit