Select

Implements the combobox design patternopen in new window, allowing the user to select an option from a collection of predefined values.

Config

The options below are to be set in the global configuration at the following location:

{
    components: {
        select: { ... },
        selectBtn: { ... },
        selectGroup: { ... },
        selectGroupLabel: { ... },
        selectOption: { ... },
        selectOptions: { ... },
    },
}

All components

class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null

Example

Using the CSelect component:

class({ open }) {
    return ['select', {
        'select--open': open,
    }]
}

API

NameTypeDefaultDescription
Props
variant string|arraynull

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

Disable class inheritance from the component config. See styling components.

modelValue anynull

Bind the Select value with the parent component.

open booleanfalse

Bind the SelectOptions opening state with the parent component.

name stringnull

Forwarded to the underlying input holding the select value.

input objectnull

Additional attributes to be applied to the hidden input holding the select value. For example: { 'data-test': 'my-input' }

itemValue func(item: unknown) => { if (isPrimitive(item)) { return item; } else if (isObject(item) && item.value) { return item.value; } return null; }

Method to resolve the currently selected item value. For example: (item) => item.value

disabled booleannull

Prevent opening the SelectOptions and therefor changing the Select value.

Events
update:modelValue
update:open
Slots
default
Binding nameTypeDescription
openboolean

true when the select is open

Examples

Simplest

<template>
  <CSelect v-model="value">
    <CSelectBtn>
      {{ value.label }}
    </CSelectBtn>
    <CSelectOptions>
      <CSelectOption v-for="item in items" :value="item">
        {{ item.label }}
      </CSelectOption>
    </CSelectOptions>
  </CSelect>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      items: [
        {
          label: 'AliceBlue',
          value: '#F0F8FF',
        },
        {
          label: 'AntiqueWhite',
          value: '#FAEBD7',
        },
        {
          label: 'Aqua',
          value: '#00FFFF',
        },
      ],
    };
  },
};
</script>