Skip to content
On this page

Select

Implements the combobox design pattern, allowing the user to select an option from a collection of predefined values.

Usage

See using components for detailed instructions.

js
import {
  CSelect,
  CSelectBtn,
  CSelectGroup,
  CSelectGroupLabel,
  CSelectOption,
  CSelectOptions,
} from 'chusho';

Config

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

js
{
  components: {
    select: {
      class: ({ open, modelValue, name, input, itemValue, disabled, variant }) => {},
    },
    selectBtn: {
      class: ({ active, disabled, variant }) => {},
    },
    selectGroup: {
      class: ({ variant }) => {},
    },
    selectGroupLabel: {
      class: ({ variant }) => {},
    },
    selectOption: {
      class: ({ selected, value, disabled, variant }) => {},
    },
    selectOptions: {
      class: ({ transition, variant }) => {},
      transition: {},
    },
  },
}

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

transition

Apply a common transition to all CSelectOptions. The object can contain any Vue built-in transition component props.

  • type: object
  • default: null

Example

Using the CSelect component:

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

API

NameTypeDefaultDescription
Props
variant string|array|objectundefined

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: (option) => option.value

disabled booleannull

Prevent opening the SelectOptions and therefor changing the Select value.

Events
update:modelValue
When the selected value changes.
ArgumentTypeDescription
modelValueany

The selected item value.

update:open
When the popup opens or closes.
ArgumentTypeDescription
openboolean

Whether the popup is open or not.

Slots
default
Binding nameTypeDescription
openboolean

true when the select is open

Examples

Simplest

vue
<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>

Released under the MIT License.