Skip to end of banner
Go to start of banner

Inline Inputs

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 21 Next »

Related Pages: << Links to related pages, if relevant >>

Description

Inline inputs are components that switch between reading and editing modes on the same page.

Inline inputs should be used where information often needs to be quickly updated, and it would be undesirable to change the user’s view.

Types 

Type

Usage

Regular (reading mode)

Active (editing mode)

Inline text inputs

Inline text inputs are variants of the standard Text Field and Text Area components.

Inline selection Inputs

Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker.

Usage & Behavior

Structure

Inline text inputs consist of:

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

  • 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 active. For example:

Inline text fields and selection inputs should overlay content below when active. For example:

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

Text Input

Selection Input

Regular

Hover

Active

Saving

Error

Warning

Focused

Interaction

Text Inputs

  • When the input field is active, Save and Cancel actions will be revealed.

  • When save is selected:

    • a spinning progress indicator is shown,

    • the changes are applied, and

    • the input returns to the regular state.

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

Transitions

Please refer to the Progress Indicator page for more information.

Best practices

Use:

  • On screens where information needs to be updated frequently.

  • For forms which have previously been completed, and only some fields subsequently need to be edited.

  • Where it would be undesirable to change the user’s view.

Don’t use:

  • For critical tasks or blank forms on first creation → use the standard component version instead.

  • Where there’s lots of non-interactive guiding text on the same page.

Accessibility Compliance

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.

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

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

  • No labels