Input Field
Joule / Components / Input Field
Intro
The input field is the area where users type their text input to communicate with Joule.
Joule mock-up (left) and input field (right)
Usage
Do
- Allow users to enter up to 2000 characters within up to 6 lines of text. Any text beyond this limit will be cut off.
- Automatically save the text in the input field if users leave the input field without sending their message.
Don't
- Don’t send a message that doesn’t contain any text input.
- Don’t allow typing when the character limit is reached.
Anatomy
A. Text Input Box
The text input box is the container for the text input.
B. Placeholder Text
The placeholder text prompts users to enter text. For example: “Message Joule”.
C. “Send” Button
The “Send” button sends out the message to Joule.
D. User Input
User input is the text that is displayed as live input from users.
E. Character Limit (Optional)
The character limit shows the live count of characters entered and the number of characters allowed. This helper text is displayed when the input reaches 1800 characters.
F. Cursor
The cursor indicates the location of the user’s text input.
Regular input field (top) and expanded input field with the character count and limit (bottom)
Behavior and Interaction
Tapping on the Input Field to Type
Tapping on the input field
Keeping the User Input in the Input Field
Text input kept in the input field after tapping outside of the input field
Expanded Input Field
When the input is longer than the default, the input field expands to up to 6 lines of text. The user can scroll inside of the input field to view their typed text.
When the input reaches 1800 characters, a word count is displayed. Upon reaching 2000 characters, the input field stops logging additional text.
Scrolling in the input field
Adaptive Design
The width of the input field is determined by the panel width.
Input field on a compact screen (left) and an expanded screen (right)
Variations
The input field for Joule has various states. They depend on either user action or the state of the chat.
Enabled
Joule is active and the input field is ready for users to enter any input.
Focused – Active Empty
The input field is tapped on, but no input has been entered yet.
Disabled
The input field is not available for users to enter anything. This may be because the conversation has expired or failed to initiate.
Input field in enabled (top), focused - active empty (middle), and disabled (bottom) state
Focused – Typing
The input field is active and the user is typing.
Filled
The input field is still enabled, but not in a focused state. It shows the input that was previously typed.
Input field in focused – typing (top) and filled (bottom) state
Extended
When the input is longer than one line, the input field grows vertically. It can extend to accommodate up to six lines of text.
Input field in extended state with character count and limit