A native fieldset that names related form controls, links group help and disables a whole group. It preserves each control's value, validation and form owner. Compose with cem-text-field, cem-select and cem-action.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=label | Contact details}
{slice @name=description | Choose where to receive updates.}
{slice @name=disabled | absent}
{slice @name=hidden | absent}
{slice @name=direction | ltr}
{slice @name=accessibleName | }
{slice @name=externalDescription | absent}
{slice @name=externalLabel | absent}
{cem-text-field @label="Group label" @value={datadom.slices.label} @slice=label @slice-event=input @slice-value="$target.value"}
{cem-text-field @label="Group description" @value={datadom.slices.description} @slice=description @slice-event=input @slice-value="$target.value"}
{cem-text-field @label="Accessible name override" @value={datadom.slices.accessibleName} @slice=accessibleName @slice-event=input @slice-value="$target.value"}
{cem-fieldset @label="Disabled presence" @slice=disabled @slice-event=change @slice-value="$target.value" |
{cem-radio @name="property-disabled" @label="absent" @value=absent @checked={if datadom.slices.disabled == "absent" { true } else { null }}}
{cem-radio @name="property-disabled" @label="present" @value=present @checked={if datadom.slices.disabled == "present" { true } else { null }}}
}
{cem-fieldset @label="Hidden presence" @slice=hidden @slice-event=change @slice-value="$target.value" |
{cem-radio @name="property-hidden" @label="absent" @value=absent @checked={if datadom.slices.hidden == "absent" { true } else { null }}}
{cem-radio @name="property-hidden" @label="present" @value=present @checked={if datadom.slices.hidden == "present" { true } else { null }}}
}
{cem-fieldset @label="Text direction" @slice=direction @slice-event=change @slice-value="$target.value" |
{cem-radio @name="property-direction" @label="ltr" @value=ltr @checked={if datadom.slices.direction == "ltr" { true } else { null }}}
{cem-radio @name="property-direction" @label="rtl" @value=rtl @checked={if datadom.slices.direction == "rtl" { true } else { null }}}
}
{cem-fieldset @label="External label reference" @slice=externalLabel @slice-event=change @slice-value="$target.value" |
{cem-radio @name="property-externalLabel" @label="absent" @value=absent @checked={if datadom.slices.externalLabel == "absent" { true } else { null }}}
{cem-radio @name="property-externalLabel" @label="present" @value=present @checked={if datadom.slices.externalLabel == "present" { true } else { null }}}
}
{cem-fieldset @label="External description reference" @slice=externalDescription @slice-event=change @slice-value="$target.value" |
{cem-radio @name="property-externalDescription" @label="absent" @value=absent @checked={if datadom.slices.externalDescription == "absent" { true } else { null }}}
{cem-radio @name="property-externalDescription" @label="present" @value=present @checked={if datadom.slices.externalDescription == "present" { true } else { null }}}
}
{h2 @id=fieldset-preview-label | Live field group}
{p @id=fieldset-preview-help | External group description, used when its reference is selected.}
{cem-fieldset @label={datadom.slices.label} @description={datadom.slices.description}
@disabled={if datadom.slices.disabled == "present" { true } else { null }}
@hidden={if datadom.slices.hidden == "present" { true } else { null }} @dir={datadom.slices.direction}
@aria-label={if str:length(datadom.slices.accessibleName) > 0 { datadom.slices.accessibleName } else { null }}
@aria-labelledby={if datadom.slices.externalLabel == "present" { "fieldset-preview-label" } else { null }}
@aria-describedby={if datadom.slices.externalDescription == "present" { "fieldset-preview-help" } else { null }} |
{cem-text-field @label=Email @name=email @value=reader@example.test}
{cem-select @label=Channel @name=channel @value=email | {option @value=email | Email}{option @value=post | Post}}
{cem-action @variant=primary | Save contact}
}
Tab through the controls and edit the preview. Disabled uses attribute presence, including disabled="false". Removing it restores retained field values. Hidden affects the whole group; direction is inherited.
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-fieldset/cem-fieldset.xhtml"}
{cem:if @test="datadom.slices.sourceUrl" |
{p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}
{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}
}