InlineInput

InlineInput is a single-line text field for input and edit. In edit mode, it always has buttons to save or cancel entered value.

Use this component when:

• you need to switch between view-only and text editing without reloading the page (for example, edit the title, description or tag);
• data in the interface is placed tightly, you need to save space;
• transferring data to the system is not the main task of the interface (for example, additional information and notes in cards).

Do not use such an input in a form along with regular inputs (see the example in the UX/UI use section below).

InlineInput itself does not have a set sizes. You can set its height and font size that suit your use case.

align-items: center;
vertical-align: middle;
line-height: 1.1;
padding: 0 var(--spacing-1x);
border-bottom: 1px solid var(--border-primary);
background-color: var(--bg-primary-neutral);

The color of the placeholder is the same as a regular input has - --text-placeholder.

Addons are slots inside the input to the left or right of the text for additional visual or interactive elements.

• In the left addon, you can only put a non-clickable icon/flag/avatar/etc.
• Icon use --icon-secondary-neutral token for color, no hover, normal cursor.
• Notice the leading addon is underlined too.

Through the addon, you can add a label.

It's needed so that the user understands what data he needs to enter. For example, tag name, project name, etc.

The color of the placeholder is the same as a regular input has - --text-placeholder.

Trailing addons are clickable icons to save input and cancel and return to view mode. The save icon is always has --icon-secondary-success token as color, the cancel icon – --icon-secondary-neutral.

For save and cancel button icons on hover, it's important to show a tooltip that tells a user what they're doing.

In some cases, where space allows and there is a need to show regular buttons, you can hide control icons.

InlineInput can take on the same states as a normal input, except for the normal, read-only, and disabled states.

• The user has activated a trigger that opens an InlineInput.
• InlineInput immediately receives focus.
• The user enters data. Either saves the data, or using the cancel button / Esc key returns from edit mode to view mode.
• When focus is lost (for example, the user is distracted by another screen), onBlur saves the entered value.

On hover, the icons change color to the next one in the palette:

• --icon-secondary-success to --icon-secondary-success-hover-active;
• --icon-secondary-neutral to --icon-secondary-neutral-hover-active.

For InlineInput, set the same text size as in view-mode.

For example, if the heading you need to edit has 24px font-size, then it should also be 24px when you enter edit mode.

Use inputs as intended. We do not recommend mixing the normal and inline inputs in the form for sending data to the system.

An InlineInput is convenient when you need to add a note, an additional description, set your name, category, etc.

For a tag that adds another tag, use InlineInput instead of normal input. A regular input does not have the ability to change the height of the input to fit it into a compact table.