Language selection

Government of Canada / Gouvernement du Canada

Search

GC Combo Box Web Component

An accessible combo-box component that implements WCAG 2.1 accessibility standards and provides a modern, user-friendly interface for selecting multiple items from a dropdown list. This component supports multiple selection, keyboard navigation, and full screen reader support.

Example 1: Options from API with Label Slot

Region(s)
View code 
<gc-combobox placeholder="Region(s)..." name="regions" options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/en/regions">
	<span slot="label">Region(s)</span>
</gc-combobox>

Example 2: Options from Slot

Fruit(s)
View code 
<gc-combobox placeholder="Fruit(s)..." name="fruits">
	<span slot="label">Fruit(s)</span>
	<select slot="options">
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="orange">Orange</option>
		<option value="grape">Grape</option>
	</select>
</gc-combobox>

Example 3: Label as Attribute (Not a Slot)

View code 
<gc-combobox placeholder="Institution(s)..." name="institutions-attr" label="Institution(s)" options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/en/institutions"></gc-combobox>

Example 4: No Placeholder Provided

Institution(s)
View code 
<gc-combobox name="institutions" options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/en/institutions">
	<span slot="label">Institution(s)</span>
</gc-combobox>

Example 5: Static JSON File Provided

Institution(s)
View code 
<gc-combobox placeholder="Institution(s)..." name="institutions-json" options="institutions.json">
	<span slot="label">Institution(s)</span>
</gc-combobox>

Example 6: With Select All Options Enabled

Fruit(s)
View code 
<gc-combobox placeholder="Fruit(s)..." name="fruits-select-all" select-all-options>
	<span slot="label">Fruit(s)</span>
	<select slot="options">
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="orange">Orange</option>
		<option value="grape">Grape</option>
	</select>
</gc-combobox>

Example 7: Public API Tests

Fruit(s)
View code 
<gc-combobox id="demo-api" placeholder="Fruit(s)..." name="fruits-api">
	<span slot="label">Fruit(s)</span>
	<select slot="options">
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="orange">Orange</option>
		<option value="grape">Grape</option>
		<option value="mango">Mango</option>
	</select>
</gc-combobox>

<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
	<button type="button" onclick="console.log('getSelectedValues:', document.getElementById('demo-api').getSelectedValues())">getSelectedValues()</button>
	<button type="button" onclick="console.log('getSelectedOptions:', document.getElementById('demo-api').getSelectedOptions())">getSelectedOptions()</button>
	<button type="button" onclick="document.getElementById('demo-api').selectOption('apple')">selectOption("apple")</button>
	<button type="button" onclick="document.getElementById('demo-api').removeTag('apple')">removeTag("apple")</button>
	<button type="button" onclick="document.getElementById('demo-api').setSelectedOptions([{value:'banana',label:'Banana'},{value:'grape',label:'Grape'}])">setSelectedOptions([banana, grape])</button>
	<button type="button" onclick="document.getElementById('demo-api').selectAll()">selectAll()</button>
	<button type="button" onclick="document.getElementById('demo-api').unselectAll()">unselectAll()</button>
	<button type="button" onclick="document.getElementById('demo-api').setOptions([{value:'cat',label:'Cat'},{value:'dog',label:'Dog'},{value:'bird',label:'Bird'}])">setOptions([cat, dog, bird])</button>
</div>

<script>
	document.getElementById( "demo-api" ).addEventListener( "change", function( e ) {
		console.log( "change event fired:", e.detail.selectedOptions );
	} );
</script>

Page details

Date modified: