Inline Editable Fields

Inline editable fields help users to directly jump from read mode to edit mode.

Usage
Code

Inline editable fields enable users to edit the data right where they see it. They come handy when the users want to update a field or two without losing context and editing is not the primary intent of the page.

Types


Basic input

Inline editable input comes with two small action buttons to confirm or discard the changes.

Input with chips

Chips can be used as tags in inputs. Enter/return key is used to input the tags.

Dropdown type does not require explicit save/discard actions, as the result is saved immediately.

Sizes

Inline editable input comes in 2 sizes - regular and small. On the other hand, inline editable dropdown comes just in the regular size.

States


Input

States of Inline editable input States of inline editable input


Input with chips

States of Inline editable input with chips States of inline editable input with chips


States of Inline editable dropdown States of inline editable dropdown



Structure

Structure of Inline editable dropdown A regular sized inline editable input



PropertyValue(s)
Height
  • 32 px (Regular input, dropdown)
  • 24 px (Small input)
Padding (right, left)12 px, 12 px
Spacing between input and actions4 px
Spacing between actions4 px

Configurations

Input



PropertyValue(s)Default value
Size
  • Regular
  • Small
Regular
Width
<width>256 px



PropertyValue(s)Default value
Width
<width>256 px

Label



PropertyValue(s)Default value
Required
  • True
  • False
False
Optional
  • True
  • False
False
Info
  • True
  • False
False

Usage


Intent

Inline editable fields are used when the users want to update a field or two without losing context and editing is not the primary intent of the page.

Using Inline editable fields

Showing error

Errors are shown using popovers alongside the inline editable field.

Showing error in inline editable fields Showing error in inline editable fields


Overflow behavior in inline editable chip input

In case of overflow the chip gets wrapped into the next line.

Overflow behavior of inline editable fields Overflow behavior in inline editable chip input


Horizontal spacing between label and field

It is recommended to have a minimum spacing of 4px between the label and the inline editable field when placed horizontally.

This spacing is recommended so that the focus ring doesn’t overlap with the label.


Recommended minimum spacing between the label and field Recommended minimum spacing between the label and field



Was this page helpful?