Select is a form field that allows users to select from a list of options.

Important: If this component is shown on a mobile device, it will show a native select list, instead of the select list styled via CoralUI.

Vertical Layout

America Europe Africa Asia Oceania
America Europe Africa Asia Oceania Required Information
America Europe Africa Asia Oceania Error Message
Show Markup

                      

Aligned Layout

America Europe Africa Asia Oceania
America Europe Africa Asia Oceania Required Information
America Europe Africa Asia Oceania Error Message
Show Markup

            

Markup Examples

|

Single Selection with Preselected Item

Actions Add Add-Circle Adjust
Show Markup

                      

Multiple Selection with Preselected Items

Actions Add Add-Circle Adjust
Show Markup

                      

Quiet

Actions Add Add-Circle Adjust
Show Markup

            

Loading Remote Content

The following shows how to respond to user interaction when an item is selected in the Select component above.
Show Markup

                  

The following JavaScript manually adds content to the select component on page initialization

                        

Coral.Select API

Constructor

JavaScript:

new Coral.Select() or document.createElement('coral-select')

HTML Tag:

<coral-select>

Extends

Mixes In

Sub-components

Static Properties

Coral.Select.variant {String}

Enum for Select variant values.

Properties:

Name Type Value Description
DEFAULT String default A default, gray Select.
QUIET String quiet A Select with no border or background.

Instance Properties

instance.disabled {Boolean}

Reflected
Whether this field is disabled or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • disabled

instance.invalid {Boolean}

Reflected
Whether the current value of this field is invalid or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • invalid

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.labelledBy {String}

Reference to a space delimited set of ids for the HTML elements that provide a label for the formField. Implementers should override this method to ensure that the appropriate descendant elements are labelled using the aria-labelledby attribute. This will ensure that the component is properly identified for accessibility purposes. It reflects the aria-labelledby attribute to the DOM.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

instance.loading {Boolean}

Indicates that the Select is currently loading remote data. This will set the wait indicator inside the list.
Default Value:
  • false
HTML Attribute:
  • loading

instance.multiple {Boolean}

Whether multiple items can be selected.
Default Value:
  • false
HTML Attribute:
  • multiple

instance.name {String}

Reflected
Name used to submit the data in a form.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • name

instance.placeholder {String}

Reflected
Contains a hint to the user of what can be selected in the component. If no placeholder is provided, the first option will be displayed in the component.
Default Value:
  • ""
HTML Attribute:
  • placeholder

instance.readOnly {Boolean}

Reflected
Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control. This is ignored for checkbox, radio or fileupload.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • readonly

instance.required {Boolean}

Reflected
Whether this field is required or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • required

instance.selectedItem {HTMLElement}

Readonly
Returns the first selected item in the selectionList. The value null is returned if no element is selected.

instance.selectedItems {Array.<HTMLElement>}

Readonly
Returns an Array containing the set selected items.

instance.value {String}

This field's current value.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • value

instance.values {Array.<String>}

The current selected values, as submitted during form submission. When Coral.Select#multiple is false, this will be an array of length 1.

instance.variant {Coral.Select.variant}

The Select's variant.
Default Value:
  • Coral.Select.variant.DEFAULT
HTML Attribute:
  • variant

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-collection:add

Triggered when an item is added to the Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was added.
Inherited From:

coral-collection:remove

Triggered when an item is removed from a Collection.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.item HTMLElement The item that was removed.
Inherited From:

change

Triggered when the value has changed. This event is only triggered by user interaction.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-select:showitems

Triggered when the select could accept external data to be loaded by the user. If preventDefault() is called, then a loading indicator will be shown. Coral.Select#loading should be set to false to indicate that the data has been successfully loaded.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail Object

Detail object.

Name Type Description
event.detail.start Number The count of existing items, which is the index where new items should start.

Coral.Select.Item API

Constructor

JavaScript:

new Coral.Select.Item() or document.createElement('coral-select-item')

HTML Tag:

<coral-select-item>

Extends

Mixes In

Instance Properties

instance.content {HTMLElement}

Item content element.

instance.disabled {Boolean}

Reflected
Whether this item is disabled. When set to true, this will prevent every user interaction with the item. If disabled is set to true for a selected item it will be deselected.
Default Value:
  • false
HTML Attribute:
  • disabled

instance.selected {Boolean}

Reflected
Whether the item is selected. Selected cannot be set to true if the item is disabled.
Default Value:
  • false
HTML Attribute:
  • selected

instance.value {String}

Reflected
Value of the item. If not explicitly set, the value of Node.textContent is returned.
Default Value:
  • ""
HTML Attribute:
  • value

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: