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
xfCompactGroup matches an Element that represents a XForms group element with 'compact' appearance
xfGroupLabel matches the label of a group
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

# Compact group

A compact group renders the labels of any containing control above the actual control and therefore provides a very narrow layout of a group.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Group with compact appearance invalid 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
readonly relevant valid

## XForms Markup

    <xf:group id="group1" ref="grouped-data/group" appearance="compact">
        <xf:label>Group with compact appearance</xf:label>
        <xf:alert>invalid group</xf:alert>
        <xf:input id="input1" 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 id="input2" 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 id="input3" 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 id="input4" 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>

## Limitations

There is no way to show the invalidity of a group currently as the xfInvalid class sits on the group element itself.