A native radio for one choice in a named group. Radios share native keyboard and form ownership with ordinary inputs. Related choices: cem-checkbox · cem-switch. Use cem-field for text input.
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-radio-checked" @value="" @checked=true | absent}{cem-radio @name="cem-radio-checked" @value="present" | present}}
{slice @name=disabled | }
{fieldset @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="cem-radio-disabled" @value="" @checked=true | absent}{cem-radio @name="cem-radio-disabled" @value="present" | present}}
{slice @name=required | }
{fieldset @slice=required @slice-event=change @slice-value="$target.value" | {legend | required}{cem-radio @name="cem-radio-required" @value="" @checked=true | absent}{cem-radio @name="cem-radio-required" @value="present" | present}}
{slice @name=busy | }
{fieldset @slice=busy @slice-event=change @slice-value="$target.value" | {legend | busy}{cem-radio @name="cem-radio-busy" @value="" @checked=true | absent}{cem-radio @name="cem-radio-busy" @value="present" | present}}
{slice @name=invalid | }
{fieldset @slice=invalid @slice-event=change @slice-value="$target.value" | {legend | invalid}{cem-radio @name="cem-radio-invalid" @value="" @checked=true | absent}{cem-radio @name="cem-radio-invalid" @value="true" | true}{cem-radio @name="cem-radio-invalid" @value="false" | false}}
{slice @name=indicator | outline}
{fieldset @slice=indicator @slice-event=change @slice-value="$target.value" | {legend | indicator}{cem-radio @name="cem-radio-indicator" @value="outline" @checked=true | outline}{cem-radio @name="cem-radio-indicator" @value="underline" | underline}{cem-radio @name="cem-radio-indicator" @value="unsupported" | unsupported}}
{slice @name=hidden | }
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="cem-radio-hidden" @value="" @checked=true | absent}{cem-radio @name="cem-radio-hidden" @value="present" | present}}
{slice @name=dir | ltr}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="cem-radio-dir" @value="ltr" @checked=true | ltr}{cem-radio @name="cem-radio-dir" @value="rtl" | rtl}}
{form | {cem-radio @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-radio/cem-radio.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}}