Multiple Line Text

Multiple Line Text is designed for capturing long-form content, such as detailed descriptions, or user comments.

Default
Label
Helper text 0 / 1000
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.
Label Maximum character limit reached
Max Length Maximum character limit (1000) reached. Additional input is restricted and a helper message appears.
Behaviour
With char count
  • Shows remaining characters as users type, helping them stay within the allowed limit.
Input box resizing
  • Users can manually adjust the vertical height of the box by dragging the icon at the bottom right corner.
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 1000 char
3
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
4
Counter (Optional)
  • Shows entered characters out of maximum limit.
1 Label
2
3 Helper text 0 / 1000 4
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. Display a visible character counter if a limit exists.
  4. You may also use the helper text area to show the limit. For example: Max 300 characters allowed.