Checkbox
Use checkboxes when users need to select none, one, or many options from a list.
Live demo
Checkboxes let people turn independent options on or off. Use them for filters (combine topic and year), multi-select preferences, and explicit consent. Each option should read clearly beside its control. In faceted search, checkboxes often sit in a sidebar with other filters.
Behaviour
Toggling a checkbox usually updates filters, form values, or consent state. On mobile and desktop, the same choices may appear in different layouts; the meaning of each option should stay consistent.
When checkboxes are grouped, a parent row can show an indeterminate state when some but not all child options are selected (for example “select all” for a category). Individual checkboxes stay selected or unselected.
Some designs wrap the control in a pill so the native box is hidden; the selected state must still be obvious without relying on colour alone.
Anatomy
- Checkbox control (checked or unchecked).
- Label that states what the option does.
- Optional group heading when several checkboxes belong to one category.
Replace with a faceted sidebar row and, if useful, a pill-wrapped example.
Content guidelines
- Keep labels parallel inside one group (for example all nouns or all short verb phrases) so the list scans easily.
- Match authoring labels to what actually changes on the page or in results.
- For required consent or validation failures, pair the control with clear error text (see Accessibility).
When to use
- Filters where people may pick several values at once.
- Opt-in agreements and other multi-select forms.
When not to use
- Exactly one choice from a short list; use radio buttons or another single-select pattern.
- Yes or no for a single setting when a toggle better matches “on or off” for the whole feature.
Best practices
Do
- Pair every checkbox with a visible label or an agreed accessible name.
- Give filter groups a clear section title so people (and assistive technology) get context.
- Show errors in text when a required box is missing or invalid.
Don't
- Rely on colour alone for checked state; use label, icon, and wording.
- Use checkboxes when only one option in a set should apply; use Radio instead.
Related
| Resource | |
|---|---|
| Radio | Exactly one option from a set. |
| Pills | Pill-wrapped checkbox styling in some filters. |
| Form controls | Broader form patterns. |
| Search | Keyword search beside faceted checkboxes. |
The base pattern follows common form-check styling. Faceted search and some features use custom sizing and brand colours. Pill treatments follow the Pills pattern. Specific overrides by area (student groups, CCE, consent, Thunderstone, and others) live in feature clientlibs; see Code for paths.
Refer to Tokens for typography on labels where the design system applies tokens.
Instances on the published site
Grouped by feature (representative paths under apps/concordia/components/).
Faceted list filters (sidebar checkboxes)
| Area | Location (pattern) | Notes |
|---|---|---|
| News list | news-events/news-list/filters/ (skill_domains.jsp, public_scholars.jsp, jmec_en.jsp, jmec_fr.jsp, ctl.jsp, chrcs.jsp, …) |
Faceted news formats; format_faceted_search.jsp can render checkbox-style filter options from configuration. |
| Program list | program-list/filters/*.jsp (campus, category, degree undergraduate/graduate, experiential learning, faculty, level, program type undergraduate/graduate, …) |
Large set of program filters. |
| Program concentrations | program-list/concentrations_undergraduate.jsp |
Checkbox list for concentrations. |
| Research awards list | academics/research-awards-list/filters/ (sponsor-level.jsp, discipline.jsp, deadline.jsp, career-stage.jsp) |
Award faceting. |
| Individual profile list | individual-profile-list.html (faculty, decade, award flags, dynamic awards) and individual-profile-list/filters/ (faculty.html, class-year.html, recognition.html) |
Mix of inline and included filter fragments. |
| Student group list | student-group-list/filters/associations.html |
Association membership; form-check-input, shared name="association", distinct value; title on inputs documents each option. |
| IT service list | it-services/service-list/filters/ (category.html, faculty.html, role.html) |
Service catalogue filters. |
| CCE offering list | cce/cce-offering-list/filters/ (topic.html, month.html, delivery-mode.html) |
Topic and month use form-check; delivery mode uses pill checkboxes (see Pills). |
| Thunderstone faceted | search/thunderstone-faceted-search/filters.jsp |
Dynamic facet tags; class="form-check-input", name="infield:<%= facetValue %>". |
Forms and interactive components
| Area | File | Notes |
|---|---|---|
| Submit event | news-events/submit-event/submit-event.html (and related submit-event.jsp) |
Fee, all-day, acceptance checkboxes; focus-custom--outline-offset-0 on inputs. |
| Newsletter sign-up | newsletter-sign-up/newsletter-sign-up.jsp |
Interest area checkboxes; logic hides the set when only one interest is configured. |
| Student consent | it-services/student-consent/student-consent.html |
Consent checkbox with form-check-input; apps.concordia.student-consent styles. |
| IT service notifications | it-services/it-service-notifications/it-service-notifications.html |
Checkboxes in notification subscription UI. |
| IITS cinemas calendar | ems/iits-cinemas-calendar/iits-cinemas-calendar.html |
Calendar UI with form-check-input (see iits-cinemas-calendar.less). |
AEM authoring dialogs (dialog.xml)
Dozens of components define type="checkbox" in dialog.xml for author toggles (examples: card, hero, news-list, events-list, accordion-panel, thunderstone-faceted-search, profile page props, colctrl, gallery, alert, faculty components, research tools, CCE components, newsletter page templates, etc.).
These are not documented line by line here. To enumerate or audit:
rg 'type="checkbox"' apps/concordia --glob '**/dialog.xml'
Implementation
| Layer | Files |
|---|---|
| Bootstrap | clientlibs/vendor/bootstrap/less/bootstrap.css.less (.form-check-input[type=checkbox], validation states). |
| Base forms | clientlibs/base/less/form.less (#boot; limited checkbox-specific rules). |
| Faceted | clientlibs/faceted-search/less/faceted-search.less |
| Thunderstone | clientlibs/thunderstone-faceted-search/less/tfs.less, filters.jsp |
| Student groups | clientlibs/student-group-list/less/student-group-list.less |
| CCE | clientlibs/cce/less/offering-template.less |
| Student consent | clientlibs/student-consent/less/student-consent.less |
| Cinemas | clientlibs/iits-cinemas-calendar/less/iits-cinemas-calendar.less |
Markup patterns
Faceted (typical):
<div class="form-check ps-0">
<label class="form-check-label">
<input class="form-check-input ms-0" type="checkbox" name="…" value="…">
<div>Label text</div>
</label>
</div>
Label association: Prefer explicit for / id when label and input are not nested.
Dependencies
- List and filter components often restore checked state from query parameters.
- Thunderstone faceted uses
tfs.jsfor AJAX behaviour alongside checkbox changes.
Related (implementation)
| Resource | |
|---|---|
| !AEM | Component paths in Instances; dialog checkboxes in dialog.xml per component. |
