InlineInput

Description ​

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 isn’t the main task of the interface (for example, additional information and notes in cards).

Appearance ​

Sizes ​

InlineInput itself doesn't have a set sizes. You can set its height and font size that suit your use case.

Styles ​

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);

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.

Paddings ​

Addons ​

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

Leading addon ​

• 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.

Leading addon styles

	Appearance example	Margins	Icon size and color
For components with text less than 24px (including this size)			M size, color: var(--icon-secondary-neutral)
For components with text larger than 24px			L size, color: var(--icon-secondary-neutral)

Label ​

Through the addon, you can add a label.

It's needed so that the user understands what data they need 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 addon ​

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.

Trailing addon styles

	Appearance example	Margins	Icon size
For components with text less than 24px (including this size)			M
For components with text larger than 24px			L

Tooltip ​

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

Save and Cancel buttons ​

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

Interaction ​

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.

InlineInput states

State	Appearance example	Styles
Normal		border-bottom: 1px solid var(--border-primary)
Focus		border-bottom: 1px solid var(--border-info-active), box-shadow: var(--keyboard-focus)
Invalid		border-bottom: 1px solid var(--border-danger-active)
Invalid focus		border-bottom: 1px solid var(--border-danger-active), box-shadow: var(--keyboard-focus-invalid)
Valid		border-bottom: 1px solid var(--border-success-active)
Valid focus		border-bottom: 1px solid var(--border-success-active), box-shadow: var(--keyboard-focus-valid)
Loading		Spin with XS size. The cancel button gets the disabled state while the input is loading (use --disabled-opacity token).

Save и Cancel icon buttons ​

For the default state of the icons use the following tokens:

• --icon-secondary-success
• --icon-secondary-neutral

On hover, the icons change their color to to the darker one using CSS filter.

Usage in UX/UI ​

Font size ​

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.

Using InlineInput in form ​

Use inputs as intended. We don’t 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.

Using InlineInput with Tag ​

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