Skip to main content

Input field styling

Change the input field styling to give extra feedback to the user when recording and processing audio.

Audio Feedback

The input field during a recording


Usage

Matching the active input field

Do - matching input field


Match the input-field's border color with the button to create a visual relation

Don't - matching input field


Avoid continuing to persist with the default active state of the text field

Providing textual feedback

Do - providing feedback


Show feedback text during the recording for improved feedback

Don't - leaving input blank


Avoid leaving the input-field blank with no textual feedback

Do - skeleton loading state


Show a skeleton loading state while processing to help understand the text will be added

Don't - blinking cursor


Do not let the cursor blink while processing the recording as it communicates the wrong message