Inline Input Adder

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user interface keeps simple for the users who don’t need additional input fields.
In the example video, user can add more more mail attachments one at a time by clicking an “Attach another file” link. The new input fields are exposed instantly below other fields.

Gmail: Attaching a file to an email is not a primary use case, and thus input fields for that are hidden by default. If the user wants to attach a file, input fields for that are only one click away.

What problem does the pattern solve?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

When to use it?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

How to use it?

  • Show only the minimum number of input fields needed to complete the form.
  • Show a link or a button for adding inputs at the top or/and the bottom of each input field group where additional inputs are available.
  • Link/button texts should start with “Add”-word.
  • Add new form fields below (or in some cases above or to the right) existing inputs on the fly – don’t refresh the whole page.
  • Allow user to delete additional inputs.
  • Consider using transition effects to help the user to understand what happened.

Why to use it?

Minimizing the number of input fields keeps the form more simple and clear.

Accessibility

Sources

The pattern is inspired by ‘Inline Additions’ from Luke Wroblewski’s book ‘Web Form Design: Filling in the Blanks’ .

Useful links

Example images (2 examples)

Comments

  • badoo login (www) ⋅ Sept. 26, 2016 05:17

    Thanks for sharing. I hope it will be helpful for too many people that are searching for this topic.

  • hostgator black friday (www) ⋅ Sept. 27, 2016 05:14

    Thanks for sharing. Great Post

  • big billion day (www) ⋅ Sept. 27, 2016 05:14

    Thanks, Great Post

  • us election result (www) ⋅ Sept. 27, 2016 05:15

    Thanks for sharing

  • Zapya for PC (www) ⋅ Sept. 27, 2016 12:20

    This is totally a great post

  • Suicide Squad Jacket (www) ⋅ Sept. 27, 2016 15:06

    The post is filled up with amazing points and importantly shared in timely manners.

  • Hostgator Renewals Coupons (www) ⋅ yesterday 10:44

    Thanks for the great post.

  • shareit for pc (www) ⋅ yesterday 12:35

    Good Idea

  • tell me a joke (www) ⋅ yesterday 12:36

    This is great