Single Line Text

Single Line Text is used to insert a small amount (or single line) of text, such as a name, a city, or an address.

Validation
Default
Address
Helper text 0 / 255
States
Label
Helper text
Default Empty field, waiting for user interaction. Placeholder is visible.
Label
Helper text
Hover Hover state indicates interactivity when the cursor is on the input field by changing the border color.
Label
Helper text
Active/Focus Active state: Occurs during the moment an element is being activated by the user's input. Focus state: Indicates that an element is currently selected to receive user input, whether from a keyboard, mouse, or voice.
Label
Helper text
Disabled Field is inactive and cannot be focused or edited. Use when the field is not applicable to the user.
Label
Helper text
Filled Field contains user input. Placeholder is replaced by entered value.
Label
Helper text
Typing User is actively entering text. Cursor is visible and input updates in real time.
Label
Helper text
Read only Field content is visible but not editable. No cursor interaction.
Label
Input is valid
Valid Shown only after a failed form submission, on fields that already pass validation. Highlights correct inputs alongside errors on other fields. Does not show before submit or while the user is typing.
Label
This field is required
Error Triggered when validation fails. (On form submit) Red border + error message guides user to correct the input.
Address
Only letters, numbers and / ' - , . # ( ) @ are allowed
Error — Alphanumeric Triggered when an Alphanumeric field contains characters outside the permitted set. (On form submit)
Account Number
Enter numbers only
Error — Numbers only Triggered when a Numbers only field fails validation, e.g. wrong length. (On form submit) Non-numeric input is blocked at keystroke, so format errors typically come from pasted values or length rules.
Label
Maximum character limit reached
Max Length Maximum character limit reached. Additional input is restricted and helper message may appear.
Behaviour
With char count
  • Shows remaining characters as users type, helping them stay within the allowed limit.
Validation: Alphanumeric
  • Accepts letters, digits, spaces, and the permitted symbols / ' - , . # ( ) @.
  • Validation is triggered on form submit (input is not blocked while typing).
  • Use cases: address, name (e.g. Ravi s/o Kumar).
Validation: Numbers only
  • Accepts digits 0–9 only. Letters, spaces, and symbols are blocked as the user types.
  • Length rule is configurable per field: an exact length or a min–max range (e.g. bank account numbers, which vary in length by bank).
  • Length validation is triggered on form submit.
  • Use cases: bank account number, postal code.
Specs
1
Label
  • Describes the purpose of the input field.
  • Recommended max 100 char
2
Input text
  • The main area where users type in their data.
  • Max 255 char
  • Validation type (configurable): Alphanumeric (default), Numbers only
  • Numbers only: digits 0–9; exact or min–max length configurable per field
  • Alphanumeric: letters, digits, spaces, and permitted symbols / ' - , . # ( ) @
3
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
4
Field icon (Optional)
  • 20x20, SVG
  • Positioned on the right side of the field
  • When the field enters error or success validation, the decorative icon is replaced by the status icon in the same right-side slot
  • View utility icons
5
Counter (Optional)
  • Shows entered characters out of maximum limit.
1 Label
2 4
3 Helper text 0 / 255 5
Dos and Don'ts
  1. Do not use input fields without proper labels as using placeholders by themselves can confuse users.
  2. Avoid long placeholder text. If you require to include more text, please consider using the helper text area.
  3. When using Numbers only or Alphanumeric validation, state the expected format in the helper text or placeholder (e.g. 9–13 digits, no spaces).