Full examples and variation matrix · Automated stories
{slice @name=class | field-example}
{slice @name=form | }
{slice @name=requiredMarker | *}
{slice @name=label | Account}
{slice @name=name | account}
{slice @name=value | initial}
{slice @name=type | text}
{slice @name=placeholder | Enter account}
{slice @name=describedby | field-help}
{slice @name=error | field-error}
{slice @name=disabled | absent}
{slice @name=required | absent}
{slice @name=readonly | absent}
{slice @name=busy | absent}
{slice @name=hidden | absent}
{slice @name=invalid | absent}
{slice @name=indicator | underline}
{div @class=workspace | {section @aria-label="Field properties" | {h2 | Properties}
{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{cem-field @label="form" @value="{$datadom.slices.form}" @slice=form @slice-event=input @slice-value="$target.value"}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{cem-field @label="required-marker" @value="{$datadom.slices.requiredMarker}" @slice=requiredMarker @slice-event=input @slice-value="$target.value"}
{cem-field @label="name" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}
{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{cem-field @label="type" @value="{$datadom.slices.type}" @slice=type @slice-event=input @slice-value="$target.value"}
{cem-field @label="placeholder" @value="{$datadom.slices.placeholder}" @slice=placeholder @slice-event=input @slice-value="$target.value"}
{cem-field @label="describedby" @value="{$datadom.slices.describedby}" @slice=describedby @slice-event=input @slice-value="$target.value"}
{cem-field @label="error" @value="{$datadom.slices.error}" @slice=error @slice-event=input @slice-value="$target.value"}
{div @class=property-groups |
{fieldset @class=property-group @role=radiogroup @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled} {div @class=property-options |
{cem-radio @name=field-disabled @value=absent @checked=true | absent}
{cem-radio @name=field-disabled @value=false | false}
{cem-radio @name=field-disabled @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="required" @slice=required @slice-event=change @slice-value="$target.value" | {legend | required} {div @class=property-options |
{cem-radio @name=field-required @value=absent @checked=true | absent}
{cem-radio @name=field-required @value=false | false}
{cem-radio @name=field-required @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="readonly" @slice=readonly @slice-event=change @slice-value="$target.value" | {legend | readonly} {div @class=property-options |
{cem-radio @name=field-readonly @value=absent @checked=true | absent}
{cem-radio @name=field-readonly @value=false | false}
{cem-radio @name=field-readonly @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="busy" @slice=busy @slice-event=change @slice-value="$target.value" | {legend | busy} {div @class=property-options |
{cem-radio @name=field-busy @value=absent @checked=true | absent}
{cem-radio @name=field-busy @value=false | false}
{cem-radio @name=field-busy @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden} {div @class=property-options |
{cem-radio @name=field-hidden @value=absent @checked=true | absent}
{cem-radio @name=field-hidden @value=false | false}
{cem-radio @name=field-hidden @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="invalid" @slice=invalid @slice-event=change @slice-value="$target.value" | {legend | invalid} {div @class=property-options |
{cem-radio @name=field-invalid @value=absent @checked=true | absent}
{cem-radio @name=field-invalid @value=false | false}
{cem-radio @name=field-invalid @value=true | true}
}}
{fieldset @class=property-group @role=radiogroup @aria-label="indicator" @slice=indicator @slice-event=change @slice-value="$target.value" | {legend | indicator} {div @class=property-options |
{cem-radio @name=field-indicator @value=underline @checked=true | underline}
{cem-radio @name=field-indicator @value=outline | outline}
}}
}} {section @aria-label="Field preview" | {h2 | Preview} {form @id=field-form |
{cem-field @id=field-preview @required-marker="{$datadom.slices.requiredMarker}" @class="{$datadom.slices.class}" @form={if datadom.slices.form { datadom.slices.form } else { null }} @label="{$datadom.slices.label}" @name="{$datadom.slices.name}" @value="{$datadom.slices.value}" @type="{$datadom.slices.type}" @placeholder="{$datadom.slices.placeholder}" @describedby="{$datadom.slices.describedby}" @error="{$datadom.slices.error}" @indicator="{$datadom.slices.indicator}" @disabled={if datadom.slices.disabled == "absent" { null } else { datadom.slices.disabled }} @required={if datadom.slices.required == "absent" { null } else { datadom.slices.required }} @readonly={if datadom.slices.readonly == "absent" { null } else { datadom.slices.readonly }} @busy={if datadom.slices.busy == "absent" { null } else { datadom.slices.busy }} @hidden={if datadom.slices.hidden == "absent" { null } else { datadom.slices.hidden }} @invalid={if datadom.slices.invalid == "absent" { null } else { datadom.slices.invalid }} | {span @slot=help @id=field-help | Help text}}
{p @id=field-error | Error description}
{cem-action @type=reset | Reset}
}
{p | Disabled, required, readonly and busy use attribute presence, including the text false. The host owns form submission; Reset restores the declared value.}
}}
{form @id=external-field-form @aria-label="External form owner" | {p | Set form to external-field-form to use this form owner.}}
Account nameHelp text
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-field/cem-field.xhtml"}
{cem:if @test="datadom.slices.sourceUrl" |
{p | {a @href="{$datadom.slices.sourceUrl}" | Canonical XHTML}}
{cem-demo-element @legend="Canonical field source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}
}