XUL controls

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,