Controls list (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Windows Runtime apps using JavaScript have access to an extensive library of controls that support user interface (UI) development. Some of these controls have a visual representation; others function as the container for other controls or content, such as images and media.

This topic provides an alphabetical list of the common Windows Runtime apps using JavaScript controls.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

• a
  Designates the start or destination of a hypertext link.

  <a href="url">Your text</a>
  

  Reference: a

• app bar
  Provides a toolbar for displaying app-specific commands.

  <div data-win-control="WinJS.UI.AppBar"></div>
  

  Reference: WinJS.UI.AppBar

  Quickstart: Adding an app bar

• audio
  Specifies the sound or audio content, such as music or effects, to be played in a document.

  <audio>
      <source src="uri" type="audioType" />
  </audio>
  

  Reference: audio

B

• back button (Windows only)
  Provides backwards navigation in the form of a button.

  <div><button data-win-control="WinJS.UI.BackButton"></button></div>
  

  Reference: WinJS.UI.BackButton

• button
  

  Represents a button control.

  <button>A button</button>
  

  - or -

  <input type="button" value="A button" />
  

  Reference: button, input type=button

  Quickstart: Adding a button

C

• canvas
  Provides an object that is used for drawing, rendering, and manipulating images and graphics on a document.

  <canvas />
  

  Reference: canvas

  Quickstart: drawing to a canvas

• checkbox
  

  Represents a check box that a user can select and clear.

  <input type="checkbox" />
  

  Reference: input type=checkbox

  Quickstart: Adding checkboxes

• combo box
  See the entry for "select".

• content dialog
  Shows critical information that requires attention or explicit action from the user and temporarily blocks interactions with other elements in the app.

  <div 
    data-win-control="WinJS.UI.ContentDialog">
    <!-- Content -->
  </div
  

  Reference: ContentDialog

• context menu
  Provides a lightweight menu that gives users access to actions (like clipboard commands) on text or UI objects in Windows Store apps.

  var menu = new Windows.UI.Popups.PopupMenu();
  

  Reference: Windows.UI.Popups.PopupMenu

D

• date picker (Windows only)
  

  Sets a date.

  <div data-win-control="WinJS.UI.DatePicker"></div>
  

  Reference: DatePicker

  Quickstart: Adding a DatePicker

• drop-down list
  See the entry for "select".

E

• email input box
  A single line entry control that accepts one or more email addresses.

  <input type="email" />
  

  Reference: input type=email

F

• file upload
  Creates a file upload object with a text box and a browse button.

  <input type="file" />
  

  Reference: input type=file

• flex box
  Defines a layout in that takes the available space into account when defining box dimensions, which enables relative sizes and positioning.

  <div style="display: -ms-box;">
      <!-- Child elements -->
  </div>
  

  Reference: display

• flip view
  Displays a collection, one item at a time.

  <div data-win-control="WinJS.UI.FlipView"></div>
  

  Reference: WinJS.UI.FlipView

  Quickstart: Adding a FlipView

• flyout (Windows only)
  Displays a message that requires user interaction. (Unlike a dialog, a flyout does not create a separate window, and does not block other user interaction.)

  <div data-win-control="WinJS.UI.Flyout"></div>
  

  Reference: WinJS.UI.Flyout

  Quickstart: Adding a flyout

G

• grid
  A CSS layout that defines a flexible grid area that consists of columns and rows.

  <div style="{display: -ms-grid}">
      <!-- Child elements -->
  </div>
  

  Reference: display

• grid view
  A ListView that has a grid layout. See the entry for "list view" for more information.

  <div data-win-control="WinJS.UI.ListView" 
      data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
  

  Reference: WinJS.UI.ListView

  Quickstart: Adding a ListView

H

• Html control
  Displays content from an HTML page.

  <div data-win-control="WinJS.UI.HtmlControl"></div>
  

  Reference: WinJS.UI.HtmlControl

• hub (Windows only)
  Creates a hub navigation pattern consisting of sections that can be navigated to. Each section is defined by a hub section.

  <div data-win-control="WinJS.UI.Hub"></div>
  

  Reference: WinJS.UI.Hub

  HTML Hub control sample

• hub section (Windows only)
  Defines a section of a hub.

  <div data-win-control="WinJS.UI.HubSection"></div>
  

  Reference: WinJS.UI.HubSection

  HTML Hub control sample

• hyperlink
  See the entry for "a".

I

• iframe
  An inline floating frame that can display another document.

  <iframe src="url" />
  

  Reference: iframe

• img
  Displays an image.

  <img src="url" />
  

  Reference: img

• item container
  Defines an item that can be pressed, swiped, and dragged.

  <div data-win-control="WinJS.UI.ItemContainer"></div>
  

  Reference: WinJS.UI.ItemContainer

  HTML ItemContainer sample

J

• jump view
  See the entry for "semantic zoom".

L

• label
  Specifies a label for another element on the page.

  <label for="otherControl">Label text</label>
  <input type="text" id="otherControl" />
  

  Reference: label

• list box
  See the entry for "select".

• list view
  Displays a collection of data in a list or grid layout.

  <div data-win-control="WinJS.UI.ListView"></div>
  

  Reference: WinJS.UI.ListView

  Quickstart: Adding a ListView

M

• media element
  See the entries for "audio" and "video."

• media player
  See the entries for "audio" and "video."

• menu
  Displays a menu. (Windows only)

  <div data-win-control="WinJS.UI.Menu"></div>
  

  Reference: WinJS.UI.Menu

• menu command (Windows only)
  Represents a command to be displayed in a Menu object.

  <button data-win-control="WinJS.UI.MenuCommand" />
  

  Reference: WinJS.UI.MenuCommand

• message dialog
  Displays a message that requires an immediate user response.

  Reference: Windows.UI.Popups.MessageDialog

  Quickstart: Adding a message dialog

• multi-line text box
  See the entry for "textarea".

N

• navigation bar (Windows only)
  Displays navigation commands in a toolbar that the user can show or hide.

  <div data-win-control="WinJS.UI.NavBar"></div>
  

  Reference: WinJS.UI.NavBar

  HTML NavBar control sample

• navigation bar command (Windows only)
  Represents a navigation command in a navigation bar container.

  <div data-win-control="WinJS.UI.NavBarCommand"></div>
  

  Reference: WinJS.UI.NavBarCommand

  HTML NavBar control sample

• navigation bar container (Windows only)
  Contains a group of navigation bar commands in a navigation bar.

  <div data-win-control="WinJS.UI.NavBarContainer"></div>
  

  Reference: WinJS.UI.NavBarContainer

  HTML NavBar control sample

• number input box
  A single line entry control that accepts a numeric value.

  <input type="number" />
  

  Reference: input type=number

P

• page control
  Represents a custom control or a page in an a navigation app.

  Reference: WinJS.UI.Pages.PageControl

  Quickstart: Using single-page navigation

• panning scroll view
  See the entry for "scroll view".

• password input box
  A single-line text entry control similar to the text input control, except that text is not displayed as the user enters it.

  <input type="password" />
  

  Reference: input type=password

• pivot
  Creates a tab control that displays multiple items.

  <div data-win-control='WinJS.UI.Pivot'></div>
  

  Reference: WinJS.UI.Pivot

• pivot item
  Creates a tab within a tab control.

  <div data-win-control='WinJS.UI.PivotItem'></div>
  

  Reference: WinJS.UI.PivotItem

• popup menu
  See the entry for "context menu".

• progress bar
  

  Displays a bar that indicates that work is in progress. Indeterminate ring is unsupported on Windows Phone 8.1.

  <progress />
  

  Reference: progress

  Quickstart: Adding progress controls

• progress ring (Windows only)
  Displays a ring that indicates that work is in progress.

  <progress class="win-ring" style="width: 20px; height: 20px" />
  

  Reference: progress

  Quickstart: Adding progress controls

• push button
  See the entry for "button".

R

• radio button
  A type of selection control that limits a user's selection to a single value within a set of values. To do this, you must link together each button in a set of radio buttons by assigning each button the same name.

  <input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
  <input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
  <input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>
  

  Reference: input type=radio

• range
  See the entry for "slider".

• rating (Windows only)
  

  Enables the user to rate something or view its existing rating.

  <div data-win-control="WinJS.UI.Rating"></div>
  

  Reference: WinJS.UI.Rating

  Quickstart: Adding ratings

• repeater
  Generates HTML from a set of data. Use this control to generate lists of items.

  <div data-win-control="WinJS.UI.Repeater"></div>
  

  Reference: WinJS.UI.Repeater

  HTML Repeater control sample

• reset button
  

  Resets data in a form.

  <button type="reset">Reset</button>
  

  Reference: button, input type=reset

  Quickstart: Adding a button

• rich edit box/rich text box
  A control that provides text input functionality that resembles a text input box but can handle content that contains child elements. To create a rich text box, you set the contentEditable property of the elements that you want to edit.

  <div contentEditable="true">
      <!-- Elements to edit. -->
  </div>
  

  Reference: contentEditable

S

• scroll bar
  A container that enables you to scroll through its contents. You add this scrolling functionality by adding the setting the overflow style of an element to scroll or auto.

  <div style="overflow:scroll;">
      <!-- Contents -->
  </div>
  

  Reference: overflow

• scroll view
  Displays a view of content a user can zoom in and out of, and provides additional features, such as snap points, that enhance that experience.

  <div style=overflow:scroll;-ms-content-zooming:zoom>>
      <!-- Contents to edit. -->
  </div>
  

  Reference: overflow, ms-content-zooming

• search box (Windows only)
  Enables the user to perform search queries and select suggestions.

  <div data-win-control="WinJS.UI.SearchBox"></div>
  

  Reference: WinJS.UI.SearchBox

  SearchBox control sample

• select
  Represents a list box, combo box, or drop-down list.

  <select>
      <option>Apple</option>
      <option>Banana</option>
      <option>Grape</option>
      <option>Orange</option>
      <option>Pear</option>
      <option>Watermelon</option>
  </select>
  

  Reference: select

• semantic zoom
  Enables the user to zoom between two views of a collection of items.

  <div data-win-control="WinJS.UI.SemanticZoom">
  
    <!-- Control that provides the zoomed-in view. -->
    <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>
  
    <!-- Control that provides the zoomed-out view. -->
    <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>
  
  </div>
  

  Reference: WinJS.UI.SemanticZoom

• Settings flyout (Windows only)
  Provides access to app settings.

  <div data-win-control="WinJS.UI.SettingsFlyout"></div>
  

  Reference: SettingsFlyout

• single-line text box
  See the entry for "text box".

• slider
  Provides a range slider for selecting a numeric value.

  <input type="range" />
  

  Reference: input type=range

• split view
  Splits an area into two parts: a pane that can appear from an edge and a content area that fills the available space.

  <div data-win-control="WinJS.UI.SplitView">
  </div>
  

  Reference: SplitView

• submit button
  

  Creates a button that, when clicked, submits the form.

  <button type="submit">Submit</button>
  

  Reference: button, input type=submit

  Quickstart: Adding a button

• svg
  Defines an SVG document or document fragment that can render vector graphics.

  <svg xmlns="http://www.w3.org/2000/svg"></svg>
  

  Reference: svg

T

• text box
  A single-line text entry control.

  <input type="text" />
  

  Reference: input type=text

• text area
  A multi-line text entry control.

  <textarea></textarea>
  

  Reference: textarea

• time picker (Windows only)
  

  Lets the user specify a time.

  <div data-win-control="WinJS.UI.TimePicker"></div>
  

  Reference: WinJS.UI.TimePicker

  Quickstart: Adding a TimePicker

• toggle switch
  Represents a switch that can be toggled between two states.

  <div data-win-control="WinJS.UI.ToggleSwitch"></div>
  

  Reference: ToggleSwitch

• toolbar
  Displays a set of commands. A Toolbar can appear in any location, including in a Flyout or an AppBar.

  <div data-win-control="WinJS.UI.Toolbar">
  </div>
  

  Reference: Toolbar

• tooltip (Windows only)
  Displays a rich tooltip that can support rich content (such as images and formatted text) to show more information about something.

  <div data-win-control="WinJS.UI.ToolTip"></div>
  

  Reference: WinJS.UI.Tooltip

• tooltip, simple
  Displays a simple, text-only tooltip for an element.

  <element title="tooltip text" />
  

  Reference: title

U

• URL input box
  A single-line text entry control that accepts URLs.

  <input type="url" />
  

  Reference: input type=url

V

• video
  Specifies the video content to be played in a document.

  <video controls="controls">
     <source src="url" type="videoType" />
  </video> 
  

  Reference: video

• viewbox
  Scales a single child element to fill the available space without resizing it. This control reacts to changes in the size of the container as well as changes in size of the child element. For example, a media query may result in a change in aspect ratio.

  <div data-win-control="WinJS.UI.ViewBox"></div>
  

  Reference: WinJS.UI.ViewBox

W

• web view
  See the entry for "iframe".

Z

• zoomable scroll view
  See the entry for "scroll view".

Related topics

try.buildwinjs.com