Controls by function (HTML)

  • Article

[ 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 offer controls that perform many functions. You can select the appropriate control for your scenario by comparing controls that offer similar functionality. (For an alphabetical list of controls, see the Controls list.)

See these features in action as part of our App features, start to finish series : Windows Store app UI, start to finish

App bars and commands

  • 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

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

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

    Reference: Windows.UI.Popups.PopupMenu

  • menu (Windows only)
    Displays a menu.

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

    Reference: Menu

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

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

    Reference: MenuCommand

  • 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

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

  • 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

Buttons

Collection/data controls

  • 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

  • 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

  • jump viewer
    See semantic zoom

  • 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

  • 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

Flyouts

  • 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
    See "popup menu".

  • flyout (Windows only)
    Displays a message that requires user interaction. (Unlike a message 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

  • menu (Windows only)
    Displays a menu.

    <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

  • popup menu
    Represents a context menu.

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

    Reference: Windows.UI.Popups.PopupMenu

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

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

    Reference: SettingsFlyout

  • 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

Graphics

  • 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

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

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

    Reference: svg

Images

  • img
    Displays an image.

    <img src="url" />

    Reference: img

Layout controls

  • flex box
    A CSS 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

  • 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

  • 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

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

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

    Reference: WinJS.UI.WinJS.UI.ItemContainer

    HTML ItemContainer sample

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

  • 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

  • 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

  • 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

  • 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

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

Media controls

  • 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

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

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

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

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

    Reference: video

  • Html control
    Displays content from an HTML page.

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

    Reference: WinJS.UI.HtmlControl

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

    <iframe src="url" />

    Reference: iframe

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

    Reference: WinJS.UI.Pages.PageControl

    Quickstart: Using single-page navigation

  • 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

  • web view
    See the entry for "iframe".

Progress controls

Rating controls

Selection controls

  • checkbox
    Several checkbox controls

    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".

  • date picker (Windows only)
    DatePicker light style

    Sets a date.

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

    Reference: DatePicker

    Quickstart: Adding a DatePicker

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

    <input type="file" />

    Reference: input type=file

  • 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

  • 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".

  • 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

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

    <input type="range" />

    Reference: input type=range

  • time picker (Windows only)
    TimePicker light style

    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

Text controls

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

    <input type="email" />

    Reference: input type=email

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

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

    <input type="number" />

    Reference: input type=number

  • 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

  • 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

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

  • 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

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

    <input type="url" />

    Reference: input type=url

User Help

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

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

    Reference: label

  • 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

Controls list

try.buildwinjs.com

Quickstart: Adding controls

Quickstart: Adding WinJS controls and styles

WinJS API changes for Windows Phone