Expandable Input design pattern

Join the early bird Black Friday list

Black Friday is just around the corner, and we’re excited to offer early access to our best deals of the year at shop.learningloop.io. If you’re looking to elevate your brainstorming sessions and streamline your team’s workflow, our printed card decks are here to help.

Want to get in before everyone else?
Join our Black Friday Early Bird list to be the first to know when discounts go live! We’re launching the sale early this year, so you can grab your deck and start putting it to use before 2025 even begins.

Join the list

74% of 624 votes liked this

Problem summary

The user wants to experience a main interface with as much screen real estate and with a minimum of distractions

Example

▲ Twitter.com has placed big input area, attracting important attention - with an input hint, at the top of the screen. As you click the input field, it expands - saving valuable above-the-fold screen space for content.

Usage

Use when you want the main focus to be on the main interface rather than its input controls
Use when you want to keep distractions out of the main interface

This card is part of the UI Patterns printed card deck

A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Get your deck!

Solution

Expand the size of input fields as they come in focus or are filled with content

Design your controls in two modes: expanded and contracted. As the user taps a contracted control, it expands to its larger size. This can help keeping secondary functions out of the way until the user is in need of them.

Rationale

Expandable inputs can help unclutter user interfaces by staying out of sight until needed. For multiple purpose user interfaces, it can be helpful to let optional actions, such as searching, posting, or commenting, attract a minimum of attention.