Select

Select can be used with embedded Option or OptionGroup.

Demos

Size variants

Available size values for the ui prop: large/small/tiny/micro.

<template>
<article>
  <veui-select
    v-model="license"
    ui="large"
    :options="options"
  />
  <veui-select
    v-model="license"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="small"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="tiny"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="micro"
    :options="options"
  />
</article>
</template>

<script>
import { Select } from 'veui'

export default {
  components: {
    'veui-select': Select
  },
  data () {
    return {
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ]
    }
  }
}
</script>

Using embedded OptionGroups & Options

Can be used with embedded OptionGroups & Options.

Selected: -

clearable can be used to allow selected values to be discarded for Select. Set position of the embedded OptionGroups to popup to display children options inside a popup menu.

<template>
<article>
  <veui-select
    v-model="item"
    placeholder="Pick one..."
    clearable
  >
    <veui-option-group
      label="Editors"
      position="popup"
    >
      <veui-option
        value="vscode"
        label="VSCode"
      />
      <veui-option
        value="sublime"
        label="SublimeText"
      />
      <veui-option
        value="atom"
        label="Atom"
      />
    </veui-option-group>
    <veui-option-group
      label="Browsers"
      position="popup"
    >
      <veui-option-group
        label="Desktop"
        position="popup"
      >
        <veui-option
          value="ie"
          label="IE"
        />
        <veui-option
          value="edge"
          label="Edge"
        />
        <veui-option
          value="firefox"
          label="Firefox"
        />
        <veui-option
          value="chrome"
          label="Chrome"
        />
      </veui-option-group>
      <veui-option-group
        label="Mobile"
        position="popup"
      >
        <veui-option
          value="ios_safari"
          label="iOS Safari"
        />
        <veui-option
          value="android"
          label="Android Browser"
        />
        <veui-option
          value="android_chrome"
          label="Chrome for Android"
        />
      </veui-option-group>
    </veui-option-group>
  </veui-select>
  <p>Selected: {{ item || '-' }}</p>
</article>
</template>

<script>
import { Select, OptionGroup, Option } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-option-group': OptionGroup,
    'veui-option': Option
  },
  data () {
    return {
      item: null
    }
  }
}
</script>

Filterable options

Use the filter prop to filter options.

<template>
<article>
  <veui-select
    v-model="license"
    :filter="filter"
    :options="options"
  >
    <div slot="before">
      <veui-input
        v-model="keyword"
        class="filter"
        ui="tiny"
      />
    </div>
  </veui-select>
</article>
</template>

<script>
import { Select, Input } from 'veui'

export default {
  components: {
    'veui-select': Select,
    'veui-input': Input
  },
  data () {
    return {
      keyword: '',
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        }
      ],
      filter: ({ label }) => {
        return label.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1
      }
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
altAlternative style.
largeLarge size.
smallSmall size.
tinyTiny size.
microMicro size.
optionsArray<Object>=-

The list of options with the option type being {label, value, disabled, ...}.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
disabledboolean=Whether the option is disabled.
value*-

v-model

The value of the selected option.

placeholderstring=select.placeholderPlaceholder text when no option is selected.
clearablebooleanfalseWhether the select is clearable.
filterfunction-Filter function for the options. The type is function(option: Object): boolean. The type of option is the same as the options prop. The return value denotes whether the option is shown inside the options dropdown.
disabledbooleanfalseWhether the select is disabled.
readonlybooleanfalseWhether the select is read-only.
overlay-classstring|Array|Object-See the overlay-class prop of Overlay.

Slots

NameDescription
defaultThe content of the options dropdown layer. Can be used to place Options or OptionGroupss when the options prop is not specified.
beforeThe content before the options in the dropdown layer.
afterThe content after the options in the dropdown layer.
label

The content of the select button. Displays the label of selected option or the text content of the selected embedded option by default.

NameTypeDescription
labelstringThe descriptive label of the selected option.
value*The value of the selected option.
selectedbooleanWhether the select has a selected value.
disabledboolean=Whether the option is disabled.

Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind.

group-label

The label text of each option group (option with child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option group.
disabledboolean=Whether the option group is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

option-label

The label text of each option (option without child options). Displays the label of the option by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

option

The entire content area of each option (option without child options). Displays the default content of Options component by default.

NameTypeDescription
labelstringThe descriptive label of the option.
value*The value of the option.
selectedbooleanWhether the the option is selected.
disabledboolean=Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.

Events

NameDescription
change

v-model

Triggers when the selected option changed. The callback parameter list is (value: *) and value is the value of the selected option.

Global config

KeyTypeDefaultDescription
select.placeholderstring@@select.placeholderThe placeholder text when no option is selected.

@@ prefixed values denote corresponding properties in the locale settings.

Icons

NameDescription
expandExpand the dropdown layer.
collapseCollapse the dropdown layer.