Click or press Space to select. Radio arrow keys move among peers with the same name and form. Tab skips disabled controls. Checked controls contribute their value to the form; reset restores the authored checked attribute. Boolean flags use presence, including the text false. Busy is descriptive and permits interaction. Empty value and required-marker text are preserved; other blank optional controls omit the attribute.
Referenced choice
Supporting choice instructions.
Choose an option to continue.
{slice @name=label | Choice}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=name | choice}
{cem-field @label="name" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}
{slice @name=value | yes}
{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=required-marker | *}
{cem-field @label="required-marker" @value="{$datadom.slices.required-marker}" @slice=required-marker @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=aria-labelledby | }
{cem-field @label="aria-labelledby" @value="{$datadom.slices.aria-labelledby}" @slice=aria-labelledby @slice-event=input @slice-value="$target.value"}
{slice @name=aria-describedby | }
{cem-field @label="aria-describedby" @value="{$datadom.slices.aria-describedby}" @slice=aria-describedby @slice-event=input @slice-value="$target.value"}
{slice @name=aria-errormessage | }
{cem-field @label="aria-errormessage" @value="{$datadom.slices.aria-errormessage}" @slice=aria-errormessage @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=checked | }
{fieldset @slice=checked @slice-event=change @slice-value="$target.value" | {legend | checked}{cem-radio @name="cem-switch-checked" @value="" @checked=true | absent}{cem-radio @name="cem-switch-checked" @value="present" | present}}
{slice @name=disabled | }
{fieldset @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="cem-switch-disabled" @value="" @checked=true | absent}{cem-radio @name="cem-switch-disabled" @value="present" | present}}
{slice @name=required | }
{fieldset @slice=required @slice-event=change @slice-value="$target.value" | {legend | required}{cem-radio @name="cem-switch-required" @value="" @checked=true | absent}{cem-radio @name="cem-switch-required" @value="present" | present}}
{slice @name=busy | }
{fieldset @slice=busy @slice-event=change @slice-value="$target.value" | {legend | busy}{cem-radio @name="cem-switch-busy" @value="" @checked=true | absent}{cem-radio @name="cem-switch-busy" @value="present" | present}}
{slice @name=invalid | }
{fieldset @slice=invalid @slice-event=change @slice-value="$target.value" | {legend | invalid}{cem-radio @name="cem-switch-invalid" @value="" @checked=true | absent}{cem-radio @name="cem-switch-invalid" @value="true" | true}{cem-radio @name="cem-switch-invalid" @value="false" | false}}
{slice @name=indicator | outline}
{fieldset @slice=indicator @slice-event=change @slice-value="$target.value" | {legend | indicator}{cem-radio @name="cem-switch-indicator" @value="outline" @checked=true | outline}{cem-radio @name="cem-switch-indicator" @value="underline" | underline}{cem-radio @name="cem-switch-indicator" @value="unsupported" | unsupported}}
{slice @name=hidden | }
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="cem-switch-hidden" @value="" @checked=true | absent}{cem-radio @name="cem-switch-hidden" @value="present" | present}}
{slice @name=dir | ltr}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="cem-switch-dir" @value="ltr" @checked=true | ltr}{cem-radio @name="cem-switch-dir" @value="rtl" | rtl}}
{form | {cem-switch @label={if datadom.slices.label != "" { datadom.slices.label } else { null }} @name={if datadom.slices.name != "" { datadom.slices.name } else { null }} @form={if datadom.slices.form != "" { datadom.slices.form } else { null }} @aria-label={if datadom.slices.aria-label != "" { datadom.slices.aria-label } else { null }} @aria-labelledby={if datadom.slices.aria-labelledby != "" { datadom.slices.aria-labelledby } else { null }} @aria-describedby={if datadom.slices.aria-describedby != "" { datadom.slices.aria-describedby } else { null }} @aria-errormessage={if datadom.slices.aria-errormessage != "" { datadom.slices.aria-errormessage } else { null }} @class={if datadom.slices.class != "" { datadom.slices.class } else { null }} @checked={if datadom.slices.checked == "present" { true } else { null }} @disabled={if datadom.slices.disabled == "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 != "" { datadom.slices.invalid } else { null }} @indicator={if datadom.slices.indicator != "" { datadom.slices.indicator } else { null }} @hidden={if datadom.slices.hidden == "present" { true } else { null }} @dir={if datadom.slices.dir != "" { datadom.slices.dir } else { null }} | {attribute @name=value @value={datadom.slices.value}}{attribute @name=required-marker @value={datadom.slices.required-marker}}}{cem-action @type=reset @label="Reset choice"}}Projected choiceRequired{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-switch/cem-switch.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}}