On this page

Select menu

  • Item 1
  • Item 2

Props

PropTypeDefault/Notes
@inputFunc()Handle event emitted from the component, ex: @input={funcName}
SelectTextStringFormat: [{ icon: String, label: String, key: String | Number }, {divider: Boolean}] Pass an array of objects containing an optional icon, option name and key (value). Pass {divider: true} to create a divider
placeholderString/NumberDefault: undefined; Default: undefined; Placeholder when no key/value is selected
valueString/NumberDefault: undefined
openBooleanDefault: undefined; Control open/close state of the select menu
disabledBooleanDefault: false

Example usage

<template>
	<Select
		:items="[
                    {
                        icon: 'heart',
                        label: 'Item 1',
                        key: 'item-1'
                    },
                    {
                        divider: true
                    },
                    {
                        icon: 'heart-fill',
                        label: 'Item 2',
                        key: 'item-2'
                    }
				]"
		v-model="selectModel"
	/>
</template>

<script>
	import { Select } from 'figma-plugin-ds-vue'

	export default {
	    data: () => ({
		    selectModel: // Value of selected Select key
	    }),
		components: {
			Select
		}
	}
</script>