Post Image

How to Make a Select List Interactive

by
Ben Gremillion
Ben Gremillion

Select lists, also called drop-down menus, are common web form elements that let people choose one item from a set. They’re handy for letting users choose, say, a method of shipping. But with a quick interaction they can also reveal additional information.

For example, if someone chooses an option for “PayPal” during the checkout phase of an ecommerce flow, the form might display a PayPal login. And if they choose “credit card,” a long number field and short CVV field might appear instead.

Same for shipping. Not every delivery method will take the same number of days. Giving people an estimate will help them choose the best option for their needs.

Choose a shipping message

Building your own options

UXPin has a HTML-like select or “drop-down” element — just search for “selectlist”. But it’s a little-known fact that you can create actions based on which item the user selects. You can use this to hide or reveal information and other form elements as required. Here’s how it works.

  • Create a multistate element whose states hold the various types of information you want to show.
  • Create a select list by searching for “selectlist”.
  • Add a new interaction to that select list.
    • Trigger: Option select
    • Action: Set state

Shipping with dates

Other ideas

You can apply this to many other use cases depending on what your users want to accomplish. For example:

  • How long will it take? The user chooses expedited shipping, and a time estimate appears.
  • PayPal or credit card? Make additional fields appear if the user opts to pay with Visa or Mastercard.
  • Do you have a promo code? Make a form field appear to accept the discount.
  • Shipping overseas? Hide domestic U.S. shipping options if the user’s sending a package to, say, Poland.

Get a free UXPin trial to build interactive forms today.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you