Used for extending the limited capabilities of standard text fields, text editors allow users to chose from a set of common formatting options as well as enabling them to insert placeholders or other macros such as guest names or response templates.

Text editors scale to the size of their container but have a minimum width of 600px.

Anatomy

  1. Active / hover state of format option
  2. Default state of format option
  3. Disabled state of format option
  4. Format group divider
  5. Placeholder dropdown (optional)
  6. Text area with placeholder text

https://invis.io/F3YKSYQ9WMT#/429967142_Text_Editor_-_Anatomy

Variations

Depending on how much space there is available for the editor itself and how many formatting options it contains, the editor toolbar might take up one or two rows.

Layout