You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs

Inline Edit

Mode

There are two modes, read for displaying the value, and edit for enabling control component.

Read mode

Edit mode

In edit mode, control can be any component, recommended ones are shown in common examples.


Action

Action are default buttons shown in edit mode for save and cancel. It is displayed by default but it can also be hidden. The save and cancel function can be triggered using other components, checkout this example.

Layout

Inline (default)

Used when there is adjacent component that should be pushed when actions appear.

It can also be used with width="fluid" to fill space.

Floating

Applies popover to actions. Actions will be absolute positions.

None

Example below shows actionLayout='none' with custom button inside control for saving.

For more specific use case checkout using custom read and edit component.

Direction

The placement of the save and cancel buttons can be controlled in the same way Popover directions are handled. The most common examples are right bottom and bottom left.


Placeholder

In InlineEdit component, there is a default placeholder text is Enter value. You can override this using placeholder prop. This placeholder is both used in the read component and the edit component.


Decoration

Proximity, and Density

Decorations are used to draw attention to users for click action and when there are too many items fighting for attention, it becomes a distraction - when page has multiple Inline Edit components, be conservative of the decorations.

When the InlineEdit component is lower than tertiary action, do not use decorations.


Examples

Common

Using in Headline

Input as control

TextArea as control

Select as control

Select multiple as control

Custom

You can add custom content and complex control for the InlineEdit.

Using custom read component

Using custom read and edit component


Best Practices

  • Use to update a single pre-existing data.
  • When editing content is a primary task, use form instead.
  • Do not use InlineEdit and other form controls in the same form.