An editable combobox with authoritative suggestions. Choose a person or type a new name. Option identities are submitted while labels remain visible.
Full examples and variation matrix ยท Automated stories
Arrow keys move through enabled suggestions. Enter commits; Escape, Alt+Up, outside click or Tab closes. Home, End and text editing stay native. Busy describes loading without disabling input. Required selection clears an uncommitted edit on close. Suggestions are supplied upstream; this control does not filter them.
Choose from the list or type a name.
A value is required.
{slice @name=label | Person}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=name | person}
{cem-field @label="name" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}
{slice @name=value | ada}
{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=form | }
{cem-field @label="form" @value="{$datadom.slices.form}" @slice=form @slice-event=input @slice-value="$target.value"}
{slice @name=placeholder | Choose or type}
{cem-field @label="placeholder" @value="{$datadom.slices.placeholder}" @slice=placeholder @slice-event=input @slice-value="$target.value"}
{slice @name=autocomplete | off}
{cem-field @label="autocomplete" @value="{$datadom.slices.autocomplete}" @slice=autocomplete @slice-event=input @slice-value="$target.value"}
{slice @name=describedby | }
{cem-field @label="describedby" @value="{$datadom.slices.describedby}" @slice=describedby @slice-event=input @slice-value="$target.value"}
{slice @name=error | }
{cem-field @label="error" @value="{$datadom.slices.error}" @slice=error @slice-event=input @slice-value="$target.value"}
{slice @name=class | }
{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=disabled | }
{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{label | {input @type=radio @name="property-disabled" @value="" @checked=true} absent}{label | {input @type=radio @name="property-disabled" @value=present} present}}
{slice @name=readonly | }
{fieldset @role=group @aria-label="readonly" @slice=readonly @slice-event=change @slice-value="$target.value" | {legend | readonly}{label | {input @type=radio @name="property-readonly" @value="" @checked=true} absent}{label | {input @type=radio @name="property-readonly" @value=present} present}}
{slice @name=required | }
{fieldset @role=group @aria-label="required" @slice=required @slice-event=change @slice-value="$target.value" | {legend | required}{label | {input @type=radio @name="property-required" @value="" @checked=true} absent}{label | {input @type=radio @name="property-required" @value=present} present}}
{slice @name=busy | }
{fieldset @role=group @aria-label="busy" @slice=busy @slice-event=change @slice-value="$target.value" | {legend | busy}{label | {input @type=radio @name="property-busy" @value="" @checked=true} absent}{label | {input @type=radio @name="property-busy" @value=present} present}}
{slice @name=invalid | }
{fieldset @role=group @aria-label="invalid" @slice=invalid @slice-event=change @slice-value="$target.value" | {legend | invalid}{label | {input @type=radio @name="property-invalid" @value="" @checked=true} absent}{label | {input @type=radio @name="property-invalid" @value=present} present}}
{slice @name=require-selection | }
{fieldset @role=group @aria-label="require-selection" @slice=require-selection @slice-event=change @slice-value="$target.value" | {legend | require-selection}{label | {input @type=radio @name="property-require-selection" @value="" @checked=true} absent}{label | {input @type=radio @name="property-require-selection" @value=present} present}}
{slice @name=auto-active-first | }
{fieldset @role=group @aria-label="auto-active-first" @slice=auto-active-first @slice-event=change @slice-value="$target.value" | {legend | auto-active-first}{label | {input @type=radio @name="property-auto-active-first" @value="" @checked=true} absent}{label | {input @type=radio @name="property-auto-active-first" @value=present} present}}
{slice @name=hidden | }
{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{label | {input @type=radio @name="property-hidden" @value="" @checked=true} absent}{label | {input @type=radio @name="property-hidden" @value=present} present}}
{slice @name=indicator | underline}{fieldset @role=group @aria-label="indicator" | {legend | indicator}{label | {input @type=radio @name="property-indicator" @value=underline @checked={if datadom.slices.indicator == "underline" {true} else {null}} @slice=indicator @slice-event=change @slice-value="$target.value"} underline}{label | {input @type=radio @name="property-indicator" @value=outline @checked={if datadom.slices.indicator == "outline" {true} else {null}} @slice=indicator @slice-event=change @slice-value="$target.value"} outline}{label | {input @type=radio @name="property-indicator" @value=unsupported @checked={if datadom.slices.indicator == "unsupported" {true} else {null}} @slice=indicator @slice-event=change @slice-value="$target.value"} unsupported}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" | {legend | dir}{label | {input @type=radio @name="property-dir" @value=ltr @checked={if datadom.slices.dir == "ltr" {true} else {null}} @slice=dir @slice-event=change @slice-value="$target.value"} ltr}{label | {input @type=radio @name="property-dir" @value=rtl @checked={if datadom.slices.dir == "rtl" {true} else {null}} @slice=dir @slice-event=change @slice-value="$target.value"} rtl}}
{form | {cem-autocomplete @label="{$datadom.slices.label}" @name="{$datadom.slices.name}" @form="{$datadom.slices.form}" @placeholder="{$datadom.slices.placeholder}" @autocomplete="{$datadom.slices.autocomplete}" @describedby="{$datadom.slices.describedby}" @error="{$datadom.slices.error}" @class="{$datadom.slices.class}" @indicator="{$datadom.slices.indicator}" @dir="{$datadom.slices.dir}" @disabled={if datadom.slices.disabled == "present" {true} else {null}} @readonly={if datadom.slices.readonly == "present" {true} else {null}} @required={if datadom.slices.required == "present" {true} else {null}} @busy={if datadom.slices.busy == "present" {true} else {null}} @invalid={if datadom.slices.invalid == "present" {true} else {null}} @require-selection={if datadom.slices.require-selection == "present" {true} else {null}} @auto-active-first={if datadom.slices.auto-active-first == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {attribute @name=value @value={datadom.slices.value}}{cem-option @value=ada @label="Ada Lovelace" | {strong | Ada} Lovelace}{cem-option-group @label=Engineering | {cem-option @value=grace @label="Grace Hopper" | Grace Hopper}{cem-option @value=blocked @disabled=true | Unavailable}}}{cem-action @type=reset @label="Reset person"}}Ada Lovelace{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-autocomplete/cem-autocomplete.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}}