Select

Example

<vega-input-select 
    id ="my-select"
    required=false
    placeholder="placeholder text"
    max-height="400"
    select-type="single"
    auto-validation="true">
</vega-input-select>

      const vegaInputSelect = document.getElementById("my-select");
      vegaInputSelect.source = [
        {id: "id1", displayName: "name1"},
        {id: "id2", displayName: "name2"},
        {id: "id3", displayName: "name3"},
        {id: "id4", displayName: "name4"},
        ];

Small Example

<vega-input-select 
    id ="my-select"
    size="small"
    required=false
    placeholder="placeholder text"
    max-height="400"
    auto-validation="true">
</vega-input-select>

      const vegaInputSelect = document.getElementById("my-select");
      vegaInputSelect.source = [
        {id: "id1", displayName: "name1"},
        {id: "id2", displayName: "name2"},
        {id: "id3", displayName: "name3"},
        {id: "id4", displayName: "name4"},
        ];

Multiple Select Example

<vega-input-select 
    id ="my-select"
    required=false
    placeholder="placeholder text"
    max-height="400"
    select-type="multiple"
    auto-validation="true">
</vega-input-select>

      const vegaInputSelect = document.getElementById("my-select");
      vegaInputSelect.source = [
        {id: "id1", displayName: "name1"},
        {id: "id2", displayName: "name2"},
        {id: "id3", displayName: "name3"},
        {id: "id4", displayName: "name4"},
        ];

Note: The above example uses Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-input-select element is an option select box. It allows choosing an item from a list. It is usually used when there is a long list of entries where a single selection must be made.

The vega-input-select element also allows typing in the name of the selection which uses autocomplete to fill the input field.

Note: Populating values into vega-input-select requires inputting them into a JavaScript array.

Properties

All Parameters

<vega-input-select
	required=true|false
	label={label}
	max-height={maximum height}
	data-id=xxx
	data-label=xxx
	form-validation=0
	value=xxx
	position-relative-to="#{id} | .{class} ..."
	selected-label="(value: string[]) => '{value.length} of 4 Selected'"
>
</vega-input-select>

Adding Options

Adding options to vega-select requires providing them through an array. For example:

const vegaInputSelect = document.getElementById('my-select');
vegaInputSelect.source = [
    { id: 'id1', displayName: 'name1' },
    { id: 'id2', displayName: 'name2' },
    { id: 'id3', displayName: 'name3' },
];

Validation

The validation for vega-input-select is automatically triggered either through the search input event or through blur. In addition, you can also call the valid() method to trigger validation manually.

• Method 1: Using the valid() method. Note: due to StencilJS requirements, the valid() method returns a promise object. To get the fulfilled value of this promise object, use the await operator. These values are boolean; a result of true indicates validity.

document.getElementById('submit-btn').addEventListener('click', async () => {
    const vegaInputSelect = document.getElementById('id-for-vega-input-select');
    if (await vegaInputSelect.valid()) {
        // valid
    } else {
        // invalid
    }
});

Value

The value property in vega-input-select behaves the same as the value attribute in standard HTML. You may access it in the same way:

<vega-input-select id="select-id" value="CA" ></vega-input>

<script>
    const value = document.getElementById("select-id").value
</script>

Events

The following events are dispatched as part of vega-input-select.

• onVegaChange: Dispatched when the value of vega-input-select is changed.

document.getElementById("select_id").addEventListener("vegaChange", (e) => {
console.log(e.currentTarget.value) })

• vegaValidate: Dispatched when the validation result of vega-input-select is changed.

document.getElementById("select_id").addEventListener("vegaValidate", (e) => {
console.log(e.currentTarget.isValid) })

Methods

The following methods are available for vega-input-select.

• doOpen opens the select dropdown.
• doClose closes the select dropdown and closes the element ref.
• doChange will change the selected id.

<vega-input-select id="vega-input-select"></vega-input-select>;
// display dropdown
document.querySelector('#vega-input-select').doOpen();
// hide dropdown
document.querySelector('#vega-input-select').doClose();
// change selected id
document.querySelector('#vega-input-select').doChange('id-of-source-item');

For more details, view in Storybook.

Accessibility

• Ensure the autocomplete attribute is correct and suitable for the form field.
• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
• Ensures every id attribute value is unique.
• Ensures form field does not have multiple label elements.
• Ensures that every form element is not solely labeled using the title or aria-describedby attributes.
• Ensures every form element has a label.

Best Practices

• The select list has the advantage of reducing the amount of screen real estate that must be used in a form. That said, the select box should generally be used only if there are more than five options. In cases where there are fewer, the vega-radio element may work better.
• If it is easier to type the answer than to select it (e.g. a state abbreviation from a long list of states), it might make more sense to use an input box.

Do

Don't

• For numeric options, it may make more sense to use the stepper to allow people to either enter or select a specific number from a list.
• The select should be used if there are a selection of options that a user would not know straightaway.