Use inline edit on screens where information may need to be updated often, such as a view issue page. This pattern can be used instead of a form.

Components that use inline editing include text fieldselect and date/time picker.

  1. Label: Labels are sentence case and are as short as possible, while clearly describing the content of the field.

  2. Text field: When in edit mode, the field snaps to the width of the column and the text remains aligned with the label. When in an empty state, this field is labeled as 'none'.

  3. Control trigger: Indicates that actions are available in the field.

  4. Controls: Always appear to the right of the field.

  5. Validation icon: Select an appropriate icon.

Inline edit wraps around any standard text field. Any styling of text field component is handled outside of this component. If you are placing a custom inline edit on something like a header, ensure that the font and box size line up properly.

The appearance of the inline edit will vary depending on which components it is used with.

Inline edits also have the option to remove the controls and save the contents in a field when the field loses focus.

Since inline edit is used when entering content, it is optimized for use with keyboard inputs (return to save and esc to cancel). When using a mouse, controls should always display on the bottom right of the field.