A labeled multiline text control with help content, validation, and borderless state indicators. It shares form behavior with cem-text-field and cem-field; use cem-action to submit or reset the form.
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=selectionRequest}
{slice @name=selectionStart | 0}
{slice @name=selectionEnd | 0}
{slice @name=selectionDirection | none}
{slice @name=selectionFocus | absent}
{slice @name=rows | 4}
{slice @name=fit | content}
{slice @name=cols | 30}
{slice @name=minlength}
{slice @name=maxlength}
{slice @name=autocomplete | off}
{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 @slice=class @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.class}"}
{cem-field @label=form @slice=form @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.form}"}
{cem-field @label=label @slice=label @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.label}"}
{cem-field @label=required-marker @slice=requiredMarker @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.requiredMarker}"}
{cem-field @label=name @slice=name @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.name}"}
{cem-textarea @label=value @slice=value @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.value}"}
{cem-field @label=selection-request @slice=selectionRequest @slice-event=change
@slice-value="$target.value" @value="{$datadom.slices.selectionRequest}"}
{cem-field @label=selection-start @slice=selectionStart @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.selectionStart}"}
{cem-field @label=selection-end @slice=selectionEnd @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.selectionEnd}"}
{p | Set offsets and options, then change the request token and leave its field to apply. Use a fresh token for repeated navigation.}
{cem-field @label=rows @slice=rows @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.rows}"}
{cem-field @label=cols @slice=cols @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.cols}"}
{cem-field @label=minlength @slice=minlength @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.minlength}"}
{cem-field @label=maxlength @slice=maxlength @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.maxlength}"}
{cem-field @label=autocomplete @slice=autocomplete @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.autocomplete}"}
{cem-field @label=placeholder @slice=placeholder @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.placeholder}"}
{cem-field @label=describedby @slice=describedby @slice-event=input
@slice-value="$target.value" @value="{$datadom.slices.describedby}"}
{cem-field @label=error @slice=error @slice-event=input @slice-value="$target.value"
@value="{$datadom.slices.error}"}
{div @class=property-groups |
{fieldset @aria-label=selection-direction @class=property-group @role=radiogroup
@slice=selectionDirection @slice-event=change @slice-value="$target.value" |
{legend | selection-direction}
{div @class=property-options |
{cem-radio @checked=true @name=field-selection-direction @value=none | none}
{cem-radio @name=field-selection-direction @value=forward | forward}
{cem-radio @name=field-selection-direction @value=backward | backward}
} }
{fieldset @aria-label=selection-focus @class=property-group @role=radiogroup
@slice=selectionFocus @slice-event=change @slice-value="$target.value" |
{legend | selection-focus}
{div @class=property-options |
{cem-radio @checked=true @name=field-selection-focus @value=absent | absent}
{cem-radio @name=field-selection-focus @value=present | present}
} }
{fieldset @aria-label=disabled @class=property-group @role=radiogroup @slice=disabled
@slice-event=change @slice-value="$target.value" |
{legend | disabled}
{div @class=property-options |
{cem-radio @checked=true @name=field-disabled @value=absent | absent}
{cem-radio @name=field-disabled @value=false | false}
{cem-radio @name=field-disabled @value=true | true}
} }
{fieldset @aria-label=required @class=property-group @role=radiogroup @slice=required
@slice-event=change @slice-value="$target.value" |
{legend | required}
{div @class=property-options |
{cem-radio @checked=true @name=field-required @value=absent | absent}
{cem-radio @name=field-required @value=false | false}
{cem-radio @name=field-required @value=true | true}
} }
{fieldset @aria-label=readonly @class=property-group @role=radiogroup @slice=readonly
@slice-event=change @slice-value="$target.value" |
{legend | readonly}
{div @class=property-options |
{cem-radio @checked=true @name=field-readonly @value=absent | absent}
{cem-radio @name=field-readonly @value=false | false}
{cem-radio @name=field-readonly @value=true | true}
} }
{fieldset @aria-label=busy @class=property-group @role=radiogroup @slice=busy
@slice-event=change @slice-value="$target.value" |
{legend | busy}
{div @class=property-options |
{cem-radio @checked=true @name=field-busy @value=absent | absent}
{cem-radio @name=field-busy @value=false | false}
{cem-radio @name=field-busy @value=true | true}
} }
{fieldset @aria-label=hidden @class=property-group @role=radiogroup @slice=hidden
@slice-event=change @slice-value="$target.value" |
{legend | hidden}
{div @class=property-options |
{cem-radio @checked=true @name=field-hidden @value=absent | absent}
{cem-radio @name=field-hidden @value=false | false}
{cem-radio @name=field-hidden @value=true | true}
} }
{fieldset @aria-label=invalid @class=property-group @role=radiogroup @slice=invalid
@slice-event=change @slice-value="$target.value" |
{legend | invalid}
{div @class=property-options |
{cem-radio @checked=true @name=field-invalid @value=absent | absent}
{cem-radio @name=field-invalid @value=false | false}
{cem-radio @name=field-invalid @value=true | true}
} }
{fieldset @aria-label=indicator @class=property-group @role=radiogroup @slice=indicator
@slice-event=change @slice-value="$target.value" |
{legend | indicator}
{div @class=property-options |
{cem-radio @checked=true @name=field-indicator @value=underline | underline}
{cem-radio @name=field-indicator @value=outline | outline}
} } } }
{section @aria-label="Field preview" |
{h2 | Preview}
{form @id=field-form |
{fieldset @aria-label=fit @role=radiogroup @slice=fit @slice-event=change @slice-value="$target.value" |
{legend | fit}
{cem-radio @name=textarea-fit @value=content @checked={if datadom.slices.fit == "content" {true} else {null}} | content}
{cem-radio @name=textarea-fit @value=fill @checked={if datadom.slices.fit == "fill" {true} else {null}} | fill}
}
{div @style="block-size:60vb" |
{cem-textarea @fit={datadom.slices.fit} @autocomplete="{$datadom.slices.autocomplete}" @busy={if datadom.slices.busy == "absent" { null } else { datadom.slices.busy }}
@class="{$datadom.slices.class}" @cols="{$datadom.slices.cols}"
@describedby="{$datadom.slices.describedby}" @disabled={if datadom.slices.disabled == "absent" { null } else { datadom.slices.disabled }} @error="{$datadom.slices.error}"
@form={if datadom.slices.form { datadom.slices.form } else { null }} @hidden={if datadom.slices.hidden == "absent" { null } else { datadom.slices.hidden }} @id=field-preview @indicator="{$datadom.slices.indicator}" @invalid={if datadom.slices.invalid == "absent" { null } else { datadom.slices.invalid }}
@label="{$datadom.slices.label}" @maxlength="{$datadom.slices.maxlength}"
@minlength="{$datadom.slices.minlength}" @name="{$datadom.slices.name}"
@placeholder="{$datadom.slices.placeholder}" @readonly={if datadom.slices.readonly == "absent" { null } else { datadom.slices.readonly }} @required={if datadom.slices.required == "absent" { null } else { datadom.slices.required }}
@required-marker="{$datadom.slices.requiredMarker}" @rows="{$datadom.slices.rows}"
@selection-direction="{$datadom.slices.selectionDirection}"
@selection-end="{$datadom.slices.selectionEnd}" @selection-focus={if datadom.slices.selectionFocus == "present" { true } else { null }}
@selection-request="{$datadom.slices.selectionRequest}"
@selection-start="{$datadom.slices.selectionStart}" @value="{$datadom.slices.value}" |
{span @id=field-help @slot=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 @aria-label="External form owner" @id=external-field-form |
{p | Set form to external-field-form to use this form owner.}
}
NotesHelp text
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-textarea/cem-textarea.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}
}