Touch First Controls

Touch in IE10 is a great experience. This demo shows off a few of IE's native controls and explains how they work great with touch.

If you're viewing this demo in IE10 for Windows 8 on a touch device, try playing around with the controls via touch. Otherwise, check out the videos.

In IE11, we extended the touch-friendly experience to datalist feature.

Datalist

Try it out or watch video:

Tap on the input box and pick an option with touch. You can also pan the list with touch.



Touch Benefits (new in IE11):

  • Options are further apart for a larger hit target
  • Scrollable list can pan with touch

Select Control

Try it out or watch video:

Open the select control and pan the list up and down.



Touch Benefits:

  • Options are further apart for a larger hit target
  • List spins naturally after flicking up or down
  • Carousels through all options, allowing continuous scrolling

Text Input Boxes

Try it out or watch video:

Click on the text boxes and notice the soft keyboard provided with each. Type some text in the text fields and use the clear button. Misspell a word in the textarea to correct it via touch.


Touch Benefits:

  • Specialized soft keyboards for important input types
  • Button to quickly clear entire fields
  • Spelling error corrections available quickly via touch

Scroll Bars

Try it out or watch video:

Scroll the entire page via touch and notice the panning indicators. Also try scrolling this sub area.

long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text, long text


Touch Benefits:

  • Scroll the page by flicking anywhere
  • Panning indicators will appear when you scroll the page via touch in the Metro style browser
  • Scrollable sub areas of the page also scroll via touch
  • Traditional scroll bar is still available if you also have a mouse

Range Control

Try it out or watch video:

Use touch to manipulate these range controls. Notice the feedback when you move off the control.




Touch Benefits:

  • Easy to manipulate via touch
  • Continuous feedback on the selected value
  • Additional feedback if your finger moves off the track

Buttons

Try it out or watch video:

Touch the button and notice the immediate highlight. Move off the button to cancel the click.

Touch Benefits:

  • Immediate feedback on touch
  • Move off the button to cancel the click

Radio Buttons and Checkboxes

Try it out or watch video:

Try selecting and unselecting a checkbox or radio button.




Touch Benefits:

  • Optimized hit targeting makes it easier to hit small targets
  • Touch an element's label to activate

Tooltips

Try it out or watch video:

Compare the tooltip placement when you touch one of these links versus when you hover the mouse over one.

Bing.com

MSN.com

Microsoft.com

Touch Benefits:

  • Tooltips placed slightly further away when you touch a link than when you use a mouse
  • Move off a link to cancel the click
  • Larger tooltips
Close