Input Field
Input Fields are used for short, single-line inputs such as names, emails, and passwords.
Documentation
Code
Status & Change logs
4.15.26
None-breaking
Added Input Field component with 3 sizes (S, M, L) and 8 interaction states.
Added
size prop: s (40px), m (44px), l (48px).Added
state prop: empty, filled, hover, focused, success, alert, error, read-only.Added
label, labelIcon, mandatory props for the label row.Added
leftIcon and rightIcon props for leading/trailing icons inside the input.Added
caption prop to show state-appropriate helper text below the field.Added Focus ring:
box-shadow 0 0 0 4px rgba(0,108,182,0.4) on focused state.Added ELF Flutter component
ElfInputField with complete prop API.Added Raw Flutter code generation using
TextField / InputDecoration.Overview
Input Fields allow users to enter short, single-line text. They support a label with optional mandatory marker and info icon, a leading icon inside the field, a trailing icon (typically a dropdown indicator), and a contextual caption below that changes color based on state. Three sizes—Small (40px), Medium (44px), and Large (48px)—ensure flexibility across layouts.
Props size · state · label · labelIcon · leftIcon · rightIcon · mandatory · caption
Sizes S · M · L
States 8 interaction states
Focus ring 4px brand blue
Anatomy
1
2
3
4
5
6
7
Label
*
Description
1 Label text
2 Mandatory marker
3 Label info icon
4 Leading icon
5 Input / placeholder text
6 Trailing icon
7 Caption (optional)
Sizes
Label
*
Placeholder
Label
*
Placeholder
Label
*
Placeholder
States
Description
Description
Description
Description
Success message
Alert message
Error message
Description
Usage Guidelines
Do
Always provide a visible label above the field so users know what to enter before interacting.
Use the mandatory marker (*) for required fields and accompany it with a legend explaining the symbol.
Show the caption immediately after validation — success, alert, or error — so feedback is inline and contextual.
Choose a size consistent with the rest of the form. Mix sizes only when there is a clear hierarchy reason.
Use the read-only state for values the user needs to see but cannot change in that context.
Don't
Don't rely solely on placeholder text to convey the label — it disappears on input and is not a substitute for a label.
Don't trigger an error state before the user has had a chance to interact with the field (no pre-emptive errors).
Don't use the alert state and error state interchangeably — alert is a soft warning, error requires correction before submission.
Don't disable a field without communicating why. Prefer read-only or a tooltip explaining the locked state.
Input Field Variants
Size
Left Icon?
Yes
Right Icon?
Yes
Mandatory?
Yes
State
Label?
Yes
Label Icon?
Yes
Caption?
Yes
Preview