Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

The following table lists the XUL user interface controls. For a step-by-step guide on how to use these controls, see the XUL Tutorial. For more reference information, see the XUL Reference.

<button>

A button that can be pressed by the user.

<button label="Save" accesskey="S"/>
Image:Controlsguide-button.gif
<button type="menu">

A button that has a drop down menu attached to it. Pressing the button opens the menu.

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu.gif
<button type="menu-button">

A button that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu-button.gif
<checkbox>

A control that may be turned on and off, typically used to create options which may be enabled or disabled.

<checkbox label="Show Toolbar Labels" checked="true"/>
Image:Controlsguide-checkbox.gif
<colorpicker>

A control that may be used to select a color.

<colorpicker color="#FF0000"/>
Image:Controlsguide-colorpicker.png
<colorpicker type="button">

A specialized type of color picker which shows only a button. Pressing the button displays a color picker popup window.

<colorpicker type="button" color="#CC0080"/>
Image:Controlsguide-colorpicker-button.png
<datepicker>

A set of textboxes which may be used to allow the entry of a date.

<datepicker value="2007/03/26"/>
Image:Controlsguide-datepicker.gif
<datepicker type="grid">

A datepicker which displays a calendar grid for selecting a date.

<datepicker type="grid" value="2007/02/20"/>
Image:Controlsguide-datepicker-grid.png
<datepicker type="popup" >

A datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.

<datepicker type="popup" value="2008/08/24"/>
Image:Controlsguide-datepicker-popup.png
<description>

The description element is used for descriptive text.

<description>
  Select a time for the event to start
</description>
Image:Controlguide-description.gif
<groupbox>

A groupbox displays a labelled box around other user interface controls.

<groupbox>
  <caption label="Network"/>
</groupbox>
Image:Controlguide-groupbox.png
<filefield>

Allows the user to select a file.

<filefield/>
  • Filefield Reference
 
<image>

An image specified by a URL.

<image src="start.png"/>
Image:Controlguide-image.png
<label>

Adds a text label to a nearby control.

<label control="volume" value="Volume:"/>
Image:Controlguide-label.gif
<listbox>

The listbox is used to select an item from a list of labelled items.

<listbox>
  <listitem label="Chocolate"/>
  <listitem label="Jelly Beans"/>
</listbox>
Image:Controlguide-listbox.gif
<menulist>

A menulist (or combobox) is used to create a control with a drop down to select a value.

<menulist>
  <menupopup>
    <menuitem label="Lions" value="l"/>
    <menuitem label="Tigers" value="t"/>
    <menuitem label="Bears" value="b"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist.gif
<menulist editable="true">

An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.

<menulist editable="true">
  <menupopup>
    <menuitem label="Elephants"/>
    <menuitem label="Kangaroos"/>
    <menuitem label="Bats"  />
  </menupopup>
</menulist>
Image:Controlguide-menulist-editable.png
<progressmeter>

A progress meter is used to display the progress of a lengthy task.

<progressmeter value="40"/>
Image:Controlguide-progressmeter.png
<radio>

A radio button is used when only one of a set of options may be selected at a time.

<radiogroup>
  <radio label="Light" value="light"/>
  <radio label="Heavy" value="heavy"/>
<radio label="Heay" value="hea"/>
</radiogroup>
Image:Controlguide-radio.png
<richlistbox>

The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display fixed size rows, the richlistbox may display any type of content.

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>
Image:Controlguide-richlistbox.gif
<scale>

A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.

<scale min="1" max="10"/>
Image:Controlguide-scale.png
<splitter>

Allows the user to adjust the division of space between elements.

<splitter collapse="before">
  <grippy/>
</splitter>
 
<tab>

Description goes here.

<tab label="firefox"/>
 
<textbox>

A textbox which allows a single line of text to be entered.

<textbox value="firefox"/>
Image:Controlguide-textbox.png
<textbox multiline="true">

A textbox which allows multiple lines of text to be entered.

<textbox multiline="true"/>
Image:Controlguide-textbox-multiline.gif
<textbox type="autocomplete">

A textbox that provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.

<textbox type="autocomplete" autocompletesearch="history"/>
 
<textbox type="number">

A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.

<textbox type="number" min="1" max="20"/>
Image:Controlguide-textbox-number.png
<textbox type="password">

A textbox that hides the characters typed, used for entering passwords.

<textbox type="password"/>
Image:Controlguide-textbox-password.png
<textbox type="search">

A textbox for searching.

<textbox type="search"/>
 
<textbox type="timed">

Deprecated in Gecko 1.9.1

A textbox for responding to user input. The command event is fired after the user stops typing, or if the user tabs away or hits Enter.

<textbox type="timed"/>
 
<timepicker>

A timepicker displays a set of textboxes for entering a time.

<timepicker value="12:05"/>
Image:Controlguide-timepicker.gif
<toolbarbutton>

A button that is displayed on a toolbar.

<toolbarbutton label="Reload"/>
Image:Controlguide-toolbarbutton.png
<toolbarbutton type="menu">

A button that is displayed on a toolbar with a drop down menu attached to it.

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="Toolbars"/>
    <menuitem label="Status Bar"/>
  </menupopup>
</toolbarbutton>
 
<toolbarbutton type="menu-button">

A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="Open Changed Files"/>
    <menuitem label="Open All"/>
  </menupopup>
</toolbarbutton>
 
<tree>

A tree displays a hierarchy of items in multiple columns.

<tree>
  <treecols>
    <treecol label="Name" flex="1"/>
    <treecol label="Size" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Popcorn"/>
        <treecell label="Large"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Root Beer"/>
        <treecell label="Small"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>
Image:Controlguide-tree.gif

Document Tags and Contributors

 Last updated by: rwhogg,