aaa bbb ccc ddd

CSS
Hover the classes to see matching element(s) in the example
xfContainer matches any Element that represents a XForms group | repeat | switch element
xfGroupLabel matches the label of a group
bfVerticalTable matches an Element that represents a XForms group element with 'bf:verticalTable' appearance
bfVerticalTableLabel matches the label column of a vertical table layout
bfVerticalTableValue matches the value column of a vertical table layout
bfVerticalTableInfo matches the info column of a vertical table layout
xfGroup tbd
xfMinimalGroup tbd
xfCompactGroup tbd
xfFullGroup tbd
bfHorizontalTable tbd
bfHorizontalTableLabel tbd
bfGroupLabelLeft tbd
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control
xfReadOnly matches a xforms control that is currently readonly
xfReadWrite matches a xforms control that is currently writable
xfRequired matches a xforms control that is currently required
xfOptional matches a xforms control that is currently optional
xfEnabled matches a xforms control that is currently relevant (enabled)
xfDisabled matches a xforms control that is currently disabled (can't be visualized here as the control gets hidden)
xfValid matches a xforms control that is currently valid
xfInvalid matches a xforms control that is currently invalid

# Example of complex nested group layout

This example shows how different appearances of groups can be used for layout.

This example uses an appearance of 'bf:VerticalTable' as outer group. This contains simple controls but also some HTML elements and nested groups.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Vertical Grouprendered as HTML Table A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label
this is a simple DIV in between groups
a first nested group with no appearance at all A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label
The following two controls are part of the outer group again. Please note that the column width is maintained though there are DIVs and other groups in between.
Ccc-label a hint to Ccc-label an alert to Ccc-label Dddd-label a hint to Dddd-label an alert to Dddd-label minimal group A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label compact group A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label full group A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label horizontal group A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label
The group below uses appearance="bf:GroupLabelLeft" inside a verticalTable layout to place labels in the left column while all controls will be rendered in the right column. With CSS the control labels can be hidden if wanted.
A-label / Bb-label A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label two vertical groups wrapped in a compact group left group A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label right group C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label
readonly relevant valid

## XForms Markup

    <xf:group ref="grouped-data/group" id="VerticalGroupHTML" appearance="bf:verticalTable">
        <xf:label>
            <b>Vertical Group</b>
            rendered as HTML Table
        </xf:label>
        <xf:input ref="a">
            <xf:label>A-label</xf:label>
            <xf:hint>a hint to A-label</xf:hint>
            <xf:alert>an alert to A-label</xf:alert>
        </xf:input>
        <xf:input ref="b">
            <xf:label>B-label</xf:label>
            <xf:hint>a hint to B-label</xf:hint>
            <xf:alert>an alert to B-label</xf:alert>
        </xf:input>
        <xf:input ref="c">
            <xf:label>C-label</xf:label>
            <xf:hint>a hint to C-label</xf:hint>
            <xf:alert>an alert to C-label</xf:alert>
        </xf:input>
        <xf:input ref="d">
            <xf:label>D-label</xf:label>
            <xf:hint>a hint to D-label</xf:hint>
            <xf:alert>an alert to D-label</xf:alert>
        </xf:input>

        <div style="padding:5px;color:darkgreen;font-size:14pt;">this is a simple DIV in between groups</div>

        <xf:group>
            <xf:label>a first nested group with no appearance at all</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <div style="display:block;width:400px;font-size:10pt;margin:10px;">
            The following two controls are part of the outer group again. Please note that the column width is maintained
            though there are DIVs and other groups in between.
        </div>
        <xf:input ref="c">
            <xf:label>Ccc-label</xf:label>
            <xf:hint>a hint to Ccc-label</xf:hint>
            <xf:alert>an alert to Ccc-label</xf:alert>
        </xf:input>
        <xf:input ref="d">
            <xf:label>Dddd-label</xf:label>
            <xf:hint>a hint to Dddd-label</xf:hint>
            <xf:alert>an alert to Dddd-label</xf:alert>
        </xf:input>

        <xf:group appearance="minimal">
            <xf:label>minimal group</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <xf:group appearance="compact">
            <xf:label>compact group</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <xf:group appearance="full">
            <xf:label>full group</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <xf:group appearance="bf:horizontalTable">
            <xf:label>horizontal group</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <div style="display:block;width:400px;font-size:10pt;">The group below uses appearance="bf:GroupLabelLeft" inside a verticalTable layout to place labels
        in the left column while all controls will be rendered in the right column. With CSS the control labels can
        be hidden if wanted.</div>
        <xf:group appearance="bf:GroupLabelLeft">
            <xf:label style="border:thin solid lightsteelblue;">A-label / Bb-label</xf:label>
            <xf:input ref="a">
                <xf:label>A-label</xf:label>
                <xf:hint>a hint to A-label</xf:hint>
                <xf:alert>an alert to A-label</xf:alert>
            </xf:input>
            <xf:input ref="b">
                <xf:label>B-label</xf:label>
                <xf:hint>a hint to B-label</xf:hint>
                <xf:alert>an alert to B-label</xf:alert>
            </xf:input>
            <xf:input ref="c">
                <xf:label>C-label</xf:label>
                <xf:hint>a hint to C-label</xf:hint>
                <xf:alert>an alert to C-label</xf:alert>
            </xf:input>
            <xf:input ref="d">
                <xf:label>D-label</xf:label>
                <xf:hint>a hint to D-label</xf:hint>
                <xf:alert>an alert to D-label</xf:alert>
            </xf:input>
        </xf:group>

        <xf:group appearance="compact">
            <xf:label>two vertical groups wrapped in a compact group</xf:label>
            <xf:group appearance="bf:verticalTable">
                <xf:label>left group</xf:label>
                <xf:input ref="a">
                    <xf:label>A-label</xf:label>
                    <xf:hint>a hint to A-label</xf:hint>
                    <xf:alert>an alert to A-label</xf:alert>
                </xf:input>
                <xf:input ref="b">
                    <xf:label>B-label</xf:label>
                    <xf:hint>a hint to B-label</xf:hint>
                    <xf:alert>an alert to B-label</xf:alert>
                </xf:input>
            </xf:group>
            <xf:group appearance="bf:verticalTable">
                <xf:label>right group</xf:label>
                <xf:input ref="c">
                    <xf:label>C-label</xf:label>
                    <xf:hint>a hint to C-label</xf:hint>
                    <xf:alert>an alert to C-label</xf:alert>
                </xf:input>
                <xf:input ref="d">
                    <xf:label>D-label</xf:label>
                    <xf:hint>a hint to D-label</xf:hint>
                    <xf:alert>an alert to D-label</xf:alert>
                </xf:input>
            </xf:group>
        </xf:group>

    </xf:group>