Related Pages: << Links to related pages, if relevant >>
| Table of Contents | ||||
|---|---|---|---|---|
|
...
Inline inputs are components that switch between reading and editing modes on the same page.
Inline inputs They should be used where information often needs to be quickly and frequently updated, and when it would be undesirable to change the user’s view.
...
Where inline inputs are used, changes are persisted every time an input is edited. There is no need for a global Save and Cancel.
...
Types
Type | Usage | Input | Regular ( |
|---|
Reading Mode) | Active ( |
|---|
Editing Mode) |
|---|
Inline |
Text Inputs | Inline text inputs are variants of the standard Text Field and Text Area components. |
Text Field |  |  | |
Text Area |  |  | |
Inline Selection Inputs | Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker. |
Drop-down Menu |  |  | |
Date Picker |  |  |
Usage & Behavior
Structure
...
A label, containing either the current content or informative placeholder text. For example:
An input field, corresponding to the standard Text Area or Text Field component.
Save and cancel actions. For example:
Cancel action buttons.
A progress indicator, to show changes being saved. For example:
Inline selection inputs consist of:
A text label, containing either the current content or informative placeholder text. For example:
A trigger icon, to indicate that the field is interactive. For example:
An input field, corresponding to the standard component, such as the Date Picker or Drop-down Menu.
A progress indicator, to show changes being saved. For example:
Placement and Positioning
Inline text areas should push content that is below down when activeAny content below an inline text area should be pushed down the page when the field is active, so that all content is still visible. For example:
...
Before | After |
|---|---|
 |  |
Inline text fields and selection inputs should overlay any content below when active. For example:
...
Before | After |
|---|---|
 |  |
Default State
Inline inputs may include assistive placeholder text by default. For example:
...
Otherwise, any previously-entered content will be displayed. For example:
...
States
State | Inline Text | |
|---|---|---|
Inputs |
|---|
Selection Input
Regular
Hover
Active
Saving
Error
Warning
Focused
Inline Selection Inputs | ||||
|---|---|---|---|---|
Text Area | Text Field | Drop-down menu | Date Picker | |
Regular (Reading Mode) |  |  |  |  |
Hover |  |  |  |  |
Active (Editing Mode) |  |  |  |  |
Saving |  |  |  |  |
Read Only |  |  |  |  |
Error |  |  |  |  |
Warning |  |  |  |  |
Focused |  |  |  |  |
Interaction
Text Inputs
When the input field is active, Save and Cancel actions options will be revealedshown.
When save Save is selected:
a spinning progress indicator is shown,
the changes are applied, and
the input returns to the regular state.
When cancel Cancel is selected:
unapplied changes are discarded, and
the input returns to the regular state.
Clicking outside of the text input field:
returns it to the regular state, and
applies any changes.
All other interactions should follow the standard Text Area or Text Field components.
Selection Inputs
When a selection is made:
a spinning progress indicator is shown in place of the trigger icon,
the selection is applied, and
the input returns to the regular state.
Clicking outside of an active input closes it.
All other interactions should follow the standard component 's behavior.
Validations and errors
Please refer to the Field Validation page for more information.
...
Please refer to the Progress Indicator page for more information.
Best practices
Use:
On on screens where information needs to be updated frequently.
For for forms which have previously been completed, and only some fields subsequently need to be edited.
Where where it would be undesirable to change the user’s view.
Don’t use:
For for critical tasks or blank forms on first creation → use the standard component version instead.
Where where there’s lots of non-interactive guiding text on the same page.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Enter = performs the save action.
Esc = performs the cancel action.
See the individual component pages for more information.
Responsive Design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).
For more information, including recommended breakpoints, see the general Responsive Design guidelines.
Keyboard | Regular (Reading Mode) | Active (Editing Mode) |
|---|---|---|
Tab | Navigates to the next component | Navigates to the next action, including Cancel and Save |
Shift + Tab | Navigates to the previous component | Navigates to the previous action |
Enter | Enters editing mode | Saves, and returns input to reading mode |
Esc | N/A | Cancels, and returns input to reading mode |
Design
Zeplin link | Screen thumbnail |
|---|---|
Inline Text Field - https://zpl.io/Q0L0nKn |
 |
Inline Text Area - https://zpl.io/O0M0nEl |
 |
Inline Date Picker - https://zpl.io/L484no6 |
 |
Inline Dropdown Menu - https://zpl.io/9qgqzXw |
 |
Code
...
...