When to use Editor inputs:

• Space is a premium
• Edit and view screens need to be combined
• Data entry needs are short, simple, and predictable
  • Use Repeater for more complex data entry
  • Use textarea elements or WYSIWYG plugins for long-form data entry
  • Note: Long text inside an Editor input will be truncated with ellipsis
• Button actions are supplimentary (they will only be shown on hover over an Editor)
• Users can understand inputs without the use of label elements

How to use Editor inputs:

• Include placeholder text on all inputs
  • Example: placeholder="Email Address"
• Add labels for screen readers using sr-only CSS class
  • Example: <label class="sr-only">Email Address</label>
• Use Tooltips to suppliment hidden labels
• Use Grid rows and columns to align Editor inputs on to the same row
• Use Input size classes to control the size of inputs
• Use Button size classes to control the size of buttons
• Nest multiple editor elements inside Grid columns, but avoid placing single editor elements
• Add your own styling to limit the width of each editor using max-width

Note: The examples below is for visual reference only; the inputs do not save and the dropdown items do not save or change.

Base