desktop_windows
Web
phone_iphone
Mobile

COMPONENTS

Overview
AI
keyboard_arrow_down
Avatar
Avatar Group
Badge
Breadcrumb
Button
Calendar
Cards
Chat
keyboard_arrow_down
Checkbox
Chips
Combobox
Date Pickers
Dividers
Dropdowns
Empty state
Help Text
Icon
Inline Editable Fields
Interactive Cards
Inputs
Key Value Pair
Link
Link Button
Listbox
Menu
Messages
Meta List
Meter
Modals
Navigation - Horizontal
Navigation - Vertical
Page Headers
Pagination
Pill
Popover
Progress Indicators
Radio
Rich Text Editor
Select
Sidesheet
Sliders
Status Hint
Stepper
Switch
Table
Tabs
Time Picker
Toast
Tooltip

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.

Select

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

Sizes

Inline editable field comes in 2 sizes - regular and small.

States


Basic 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


Select

States of Inline editable dropdown States of inline editable select



Structure

Basic Input and Select

Structure of Inline editable dropdown

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

Input With Chips

Structure of Inline editable dropdown

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

Configurations

Inline Editable Field



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

Label



PropertyValue(s)Default value
Size
  • Regular
  • Small
Regular
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?

CONTENTS