Input Field

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.

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. Cursor

The cursor indicates the location of the user’s text input.

F. 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.

Enabled input field (top) and expanded input field with the character count and limit (bottom)

When users tap on the input field, the input field changes from its idle state to an active state. The input field is pushed up by the keyboard.

Tapping on the input field

When users tap outside of the input field while it’s active, the input field returns to the bottom of the screen with the user input captured.

Text input kept in the input field after tapping outside of the input field

Joule is active and the input field is ready for users to enter any input.

The input field is not available for users to enter anything. This may be because the conversation has expired or failed to initiate.

The input field is tapped on, but no input has been entered yet.

The input field is still enabled, but not in a focused state. It shows the input that was previously typed.

The input field is active and the user is typing.

When the input is longer than one line, the input field grows vertically. It can extend to accommodate up to six lines of text.