Select

Select can be used with embedded Option or OptionGroup.

Demos

Size variants

Available size variants for the ui prop: xs / s / m / l.

<template>
<article>
  <veui-select
    v-model="license"
    ui="l"
    :options="options"
  />
  <veui-select
    v-model="license"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="s"
    :options="options"
  />
  <veui-select
    v-model="license"
    ui="xs"
    :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>

<style lang="less" scoped>
.veui-select {
  max-width: 120px;
  margin-right: 10px;
}
</style>

Embedded 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.

Edit this demo on GitHubEdit

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

<style lang="less" scoped>
.veui-select {
  width: 180px;
}
</style>

Searchable options

Use the searchable prop to make options searchable.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-select
    v-model="license"
    :options="options"
    searchable
  />
</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>

Multiple selections

Use the multiple prop to enable multiple selections.

Searchable

Use max to specify the max number of options that can be selected. The searchable prop can also be used here to make options searchable.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="searchable">
      Searchable
    </veui-checkbox>
  </section>
  <section>
    <veui-select
      v-model="license"
      multiple
      :options="options"
      :max="5"
      :searchable="searchable"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-select': Select,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      searchable: false,
      license: null,
      options: [
        {
          label: 'MIT',
          value: 'mit'
        },
        {
          label: 'BSD',
          value: 'bsd'
        },
        {
          label: 'Apache 2.0',
          value: 'apache2'
        },
        {
          label: 'GPL 3.0',
          value: 'gpl3'
        },
        {
          label: 'AGPL 3.0',
          value: 'agpl3'
        },
        {
          label: 'LGPL 2.1',
          value: 'lgpl2'
        },
        {
          label: 'MPL 2.0',
          value: 'mpl2'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`xs`	Extra small.
`s`	Small.
`m`	Medium.
`l`	Large.

options

Array<Object>

-

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

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`options`	`Array<Object>=`	The child options of current option. The item type is the same as the items of the `options` prop.
`disabled`	`boolean=`	Whether the option is disabled.

value

Array<*>|*

v-model

The value of the selected option.

multiple boolean false Whether users can select multiple items.

max number - The max items users can select.

placeholder string select.placeholder Placeholder text when no option is selected.

clearable boolean false Whether the select is clearable.

searchable boolean false Whether the options are searchable.

show-select-all boolean false Whether to display the “Select All” option in multi-select mode.

expanded

boolean=

false

.sync

Whether the dropdown menu is expanded.

disabled boolean= false Whether the select is disabled.

readonly boolean= false Whether the select is read-only.

overlay-class string | Array | Object= - See the overlay-class prop of the Overlay component.

overlay-style string | Array | Object= - See the overlay-style prop of the Overlay component.

match (item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]> - Custom highlighting logic, case insensitive by default. See Autocomplete.

filter (item, keyword, { ancestors, offsets }) => boolean - Custom hit logic, case insensitive by default. See Autocomplete.

Slots

Name Description

default The content of the options dropdown layer. Can be used to place Options or OptionGroupss when the options prop is not specified.

before

The content before the options in the dropdown layer. No default content.

Name	Type	Description
`value`	`*`	The value of the selected option.
`select`	`function(value: *): void`	To select a specified value.
`expanded`	`boolean`	Whether the dropdown menu is expanded or not.
`toggle`	`function(force?: boolean): void`	Used to toggle the expanded state of the dropdown menu.

after The content after the options in the dropdown layer. No default content.

label

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

Name	Type	Description
`label`	`string`	The descriptive label of the selected option.
`value`	`*`	The value of the selected option.
`selected`	`boolean`	Whether the select has a selected value.
`disabled`	`boolean=`	Whether the option is disabled.

Additionally, custom properties apart from the listed ones will also be passes into the slot props 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.

Name	Type	Description
`label`	`string`	The descriptive label of the option group.
`disabled`	`boolean=`	Whether the option group is disabled.

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

option-label

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

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the the option is selected.
`disabled`	`boolean=`	Whether the option is disabled.

Additionally, custom properties in current option, apart from the listed ones, will also be passes into the slot props 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.

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`selected`	`boolean`	Whether the the option is selected.
`disabled`	`boolean=`	Whether the option is disabled.

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

trigger

The entire drop-down trigger area. Displays the select input by default.

Name	Type	Description
`attrs`	`Object`	Attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc., can be output using `v-bind="attrs"`.
`value`	`*`	The value of the selected option.
`select`	`function(value: *): void`	To select a specified value.
`handlers`	`Object`	Event listeners that need to be bound to the trigger element, can be output using `v-on="handlers"`. The element used to bind `handlers` needs to support focus acquisition so that various keyboard interactions can still be triggered properly.
`expanded`	`boolean`	Whether the dropdown menu is expanded or not.
`toggle`	`function(force?: boolean): void`	Used to toggle the expanded state of the dropdown menu.

Events

Name	Description
`change`	`v-model` Triggers when the selected option changed. The callback parameter list is `(value: *)` and `value` is the value of the selected option.
`toggle`	Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed.

Configs

Key	Type	Default	Description
`select.placeholder`	`string`	`@@select.placeholder`	The placeholder text when no option is selected.

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

Icons

Name	Description
`expand`	Expand the dropdown panel.
`collapse`	Collapse the dropdown panel.

Edit this page on GitHubEdit