Editable choice, free text and required selection with native focus and form submission.
Property playground · Automated stories
Attributes and defaults label — default: Autocomplete.name — default: Absent.value — default: Absent.form — default: Absent.placeholder — default: Absent.autocomplete — default: Absent.describedby — default: Absent.error — default: Absent.class — default: Absent.disabled — default: Absent.readonly — default: Absent.required — default: Absent.busy — default: Absent.invalid — default: Absent.require-selection — default: Absent.auto-active-first — default: Absent.hidden — default: Absent.indicator — default: underline.dir — default: Inherited.Label and help slots accept static markup. describedby and error reference help and error IDs. Boolean attributes use presence, including false. Value is an option identity or free text; displayValue is its label. require-selection submits only a committed option, clearing unmatched edits on close. auto-active-first previews the first enabled option without committing. The host owns form association; its input is unnamed. No filtering, fetching or ranking is performed.
light Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable dark Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable contrast-light Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable contrast-dark Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable native Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable One Two Three Unavailable Choose a person.
A value is required.
Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable Ada LovelaceGrace Hopper Unavailable {slice @name=person | }{cem-autocomplete @label="Bound person" @slice=person @slice-event=change @slice-value="$target.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}}}{p | Submitted value: {output | {$datadom.slices.person}}}