Reference Source
import {Select} from '@adobe/coral-spectrum'
public class | source

Select

Expression Extends:

class Select extends BaseFormField(BaseComponent(HTMLElement))

A Select component is a form field that allows users to select from a list of options. If this component is shown on a mobile device, it will show a native select list, instead of the select list styled via Coral Spectrum.

See:

Example:

Markup
<coral-select></coral-select>
JS constructor
new Coral.Select();

Static Member Summary

Static Public Members
public static

Returns Select variants.

Member Summary

Public Members
public

Whether this field is disabled or not.

public

invalid: *

Inherited from BaseFormField#invalid.

public

The item collection.

public

Inherited from BaseFormField#labelled.

public

Inherited from BaseFormField#labelledBy.

public

Indicates that the Select is currently loading remote data.

public

Indicates whether the select accepts multiple selected values.

public

Name used to submit the data in a form.

public

Returns the inner overlay to allow customization.

public

Contains a hint to the user of what can be selected in the component.

public

Whether this field is readOnly or not.

public

Whether this field is required or not.

public

Returns the first selected item in the Select.

public

Returns an Array containing the set selected items.

public

This field's current value.

  • "" by default.

public

The current selected values, as submitted during form submission.

public

The Select's variant. See SelectVariantEnum.

  • SelectVariantEnum.DEFAULT by default.
  • reflected

Method Summary

Public Methods
public

clear()

Inherited from BaseFormField#clear.

public

reset()

Inherited from BaseFormField#reset.

Static Public Members

public static variant: SelectVariantEnum: * source

Returns Select variants.

Public Members

public disabled: Boolean source

Whether this field is disabled or not.

  • false by default.
  • reflected

public invalid: * source

Inherited from BaseFormField#invalid.

public items: SelectableCollection source

The item collection.

  • read-only

public labelled: * source

Inherited from BaseFormField#labelled.

public labelledBy: * source

Inherited from BaseFormField#labelledBy.

public loading: Boolean source

Indicates that the Select is currently loading remote data. This will set the wait indicator inside the list.

  • false by default.

public multiple: Boolean source

Indicates whether the select accepts multiple selected values.

  • false by default.
  • reflected

public name: String source

Name used to submit the data in a form.

  • "" by default.
  • reflected

public overlay: Popover source

Returns the inner overlay to allow customization.

  • read-only

public placeholder: String source

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.

  • "" by default.
  • reflected

public readOnly: Boolean source

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.

  • false by default.
  • reflected

public required: Boolean source

Whether this field is required or not.

  • false by default.
  • reflected

public selectedItem: HTMLElement source

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

  • read-only

public selectedItems: Array<HTMLElement> source

Returns an Array containing the set selected items.

  • read-only

public value: String source

This field's current value.

  • "" by default.

public values: Array<String> source

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

public variant: SelectVariantEnum source

The Select's variant. See SelectVariantEnum.

  • SelectVariantEnum.DEFAULT by default.
  • reflected

Public Methods

public clear() source

Inherited from BaseFormField#clear.

public reset() source

Inherited from BaseFormField#reset.