Groupbox

The tag groupbox should not be confused with a tag for grouping buttons such as radiobox, which makes the buttons radio operator alternate.
In fact it is similar to the fieldset tag of HTML and has the same goal of presentation. In practice, it is a tag box which displays a border.
It is equipped with a particular subelement, caption, which displays a title as in HTML, or displays other components.
The content may be organized of course the contents with other box tags.

Elements of groupbox

caption

Display a label or a group of XUL components within the border in top and on the left.

flex

Inherited from box, indicates the percentage of occupation and the fact that the box adapts to the size of the window.

orient

Also inherited defines a vertical or horizontal orientation contents. By default it is vertical.

Example

We will see how to organize the contents of a groupbox which presents a minimal set of components of interface for searching.
Structure of the interface:

<groupbox>
    <caption label="Search" style="background-color:white;" />
    <vbox>
        <hbox>
            ..label and input field...
        </hbox>
        <hbox>
            ...button...
        </hbox>
    </vbox>
</groupbox>

The caption is the first subelement of groupbox. An attribute of CSS style was added because the background color seems to be gray by default.
Then a vbox is used to vertically place the text field and its label, at top.
These two elements are placed on the same line with hbox.
The button is also placed into a hbox to limit the size.

• Demo code.zip.