Radio

Use radio buttons when users must pick exactly one option from a mutually exclusive set.

Usage

Visitors use radios when choices exclude each other (for example one year or one profile type). Labels must make each option distinct. Authors use radio-style fields where the CMS stores a single value; published HTML is built per component.

Behaviour

Choosing one option clears the others in the same group.
URL or model state often restores the selected option on reload.
Pill layouts may hide the native circle; selection must still be clear.

Anatomy

Radio control (one per option).
Label for each option.
Group label or heading so people understand what they are choosing.

Replace with a vertical radio list and a pill-style group.

Content guidelines

Parallel wording across options (all short phrases or all single words).
Order options in a logical sequence (for example year descending, or “All” first if present).

Best practices

Do

Give the whole group context (heading, legend, or aria-labelledby).
Use one name value per group on the web; pair unique id with each label for.

Don't

Don't use radios when multiple selections are allowed; use checkboxes.
Don't reuse the same id on more than one input.

When to use

Mutually exclusive choices in filters or forms.

When not to use

Multi-select; use checkboxes or a multi select.

Design

Accessibility

Code

Instances on the published site

Grouped by feature (representative paths under apps/concordia/components/).

Filters and faceted UI

Area	Location (pattern)	Notes
Individual profile list	`individual-profile-list/individual-profile-list.html`	`name="profile-type"`; radios inside `label.c-pills__input`; optional `id` on Students and Alumni; “All” uses empty `value`.
News list (faceted)	`news-events/news-list/filters/years.jsp`	Five consecutive `year` radios (current year minus `i`); `form-check` per row; `id`/`for` pair `year-<year>`.
News list (faceted form)	`news-events/news-list/format_faceted_search.jsp`	Client script listens for `.form-check input` change; `clearForm` resets radio and checkbox selections on reset.

Forms and directory

Area	File	Notes
Department search	`directory/department-search/department-search.html`	`name="type"`; three radios with `form-check` / `form-check-label`; restores `checked` from model.

AEM authoring (page properties, not visitor markup)

Area	File	Notes
Tab banner	`page/concordia/tab_banner_properties.xml`	`type="radio"` fields for author choices.
Degree program detail	`page/concordia/academics/degree-program-detail/tab_summary.xml`	`type="radio"` fields (for example duration-related options).

Author dialogs often use xtype="selection" (radio groups) rather than a literal type="radio" string in dialog.xml. To find selection-based radio groups:

rg 'xtype="selection"' apps/concordia --glob '**/dialog.xml'

To find literal type="radio" in apps:

rg 'type="radio"' apps/concordia

Implementation

Layer	Files
Bootstrap	`clientlibs/vendor/bootstrap/less/bootstrap.css.less` (`.form-check-input[type=radio]`, checked state).
Base pills	`clientlibs/base/less/pills.less` (`c-pills__input`; checkbox and radio)
Individual profile list	`clientlibs/.../individual-profile-list` (component markup and styles as authored)
Department search	`clientlibs/.../directory-search` (if present for form layout)
News faceted	`news-list/filters/years.jsp`, `format_faceted_search.jsp` (scripts)

Markup patterns

Bootstrap row (typical):

<div class="form-check">
  <input class="form-check-input" type="radio" name="year" id="year-2025" value="2025">
  <label class="form-check-label" for="year-2025">2025</label>
</div>

Pill-wrapped (profile type):

<label class="c-pills__input c-pills__input--students ${model.classForStudentFilter} p-0">
  <input type="radio" name="profile-type" id="students" value="Student" data-sly-attribute.checked="${model.checkedForStudentFilter}">
  <span class="c-pills__filter-pill">…</span>
</label>

Grouping rules

One name per logical group; one checked per group for a valid default (or none if the UI allows).
Do not reuse the same id on multiple inputs; pair each id with one label for.

Dependencies

List filters often restore selection from GET query parsing.
News faceted sidebar may use script on .form-check input to submit the filter form.

Checkbox (multi-select).
Pills (pill-wrapped radio and checkbox).
Search (keyword fields beside faceted filters).

	Resource
!AEM	Component paths in Instances; author radios in page XML and `dialog.xml` as noted above.