Rich choice data consumed by cem-select, cem-autocomplete and cem-timepicker. The consuming control owns focus, selection and disabled behavior.
Full examples and variation matrix · Property playground · Automated stories
Default slot contains static rich choice content. Attribute presence enables boolean options, including the text “false”. Inert payload options take effect in the consuming component shown in the gallery. Native descendants retain keyboard behavior.
{slice @name=value | one}{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=label | One}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=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=selected | absent}{fieldset @role=group @aria-label="selected" @slice=selected @slice-event=change @slice-value="$target.value" | {legend | selected}{cem-radio @name="property-selected" @value="absent" @label="absent" @checked={if datadom.slices.selected == "absent" {true} else {null}}}{cem-radio @name="property-selected" @value="present" @label="present" @checked={if datadom.slices.selected == "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}}}}
{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=content | fallback}{fieldset @role=group @aria-label="content" @slice=content @slice-event=change @slice-value="$target.value" | {legend | content}{cem-radio @name="property-content" @value="fallback" @label="fallback" @checked={if datadom.slices.content == "fallback" {true} else {null}}}{cem-radio @name="property-content" @value="projected" @label="projected" @checked={if datadom.slices.content == "projected" {true} else {null}}}}
{cem-option @value="{$datadom.slices.value}" @label="{$datadom.slices.label}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @selected={if datadom.slices.selected == "present" {true} else {null}} @disabled={if datadom.slices.disabled == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {strong | Projected content}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-option/cem-option.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}}