A passive list or native single-select listbox. Use cem-tree for hierarchy and cem-chip for compact toggles.
Full examples and variation matrix · Property playground · Automated stories
Tab focuses the native select; arrows browse enabled options and commit the native value. The passive list has no selection or keyboard owner.
{slice @name=label | Asset types}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=value | document}
{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=size | 3}
{cem-field @label="size" @value="{$datadom.slices.size}" @slice=size @slice-event=input @slice-value="$target.value"}
{slice @name=aria-label | }
{cem-field @label="aria-label" @value="{$datadom.slices.aria-label}" @slice=aria-label @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=dir | ltr}
{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}
{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=selectable | present}
{fieldset @role=group @aria-label="selectable" @slice=selectable @slice-event=change @slice-value="$target.value" | {legend | selectable}{cem-radio @name="property-selectable" @value="absent" @label="absent" @checked={if datadom.slices.selectable == "absent" {true} else {null}}}{cem-radio @name="property-selectable" @value="present" @label="present" @checked={if datadom.slices.selectable == "present" {true} else {null}}}}
{slice @name=disabled | absent}
{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{cem-list @label="{$datadom.slices.label}" @value="{$datadom.slices.value}" @size="{$datadom.slices.size}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @aria-label={if datadom.slices.aria-label {datadom.slices.aria-label} else {null}} @selectable={if datadom.slices.selectable == "present" {true} else {null}} @disabled={if datadom.slices.disabled == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:choose | {cem:when @test='datadom.slices.selectable == "present"' | {cem-list-option @value=image @selected=true | Image}{cem-list-option @value=document | Document}{cem-list-option @value=archive @disabled=true | Archive}}{cem:otherwise | {li | Image}{li | Document}}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-list/cem-list.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}}