Select

The select component is a lightweight extension of the standard select element, supporting: themes, icons, states, etc.

• API
  • Props
  • Events
• Basic Select
• Themes
  • Solid
  • Outlined
• Sizes
• States
  • Disabled

API

Props

Name	Type	Default	Description
theme	String	'default'	Defines the theme of the select component. Possible values are: default, solid and outlined
variant	String	'default'	Defines the variant of the theme applied to the select component. Possible values are: default, primary, secondary, danger, warning, success, info
size	String	'md'	Defines the size of the select component. Possible values are: sm, md, lg
disabled	Boolean	false	Defines if the select component is disabled or not
label	String	'Please select an option'	Defines the text to display on the select component. Defaults to static text when no option is selected, otherwise uses the option name as the label.
value	Object|Number|String	null	Defines the value of the select component.
options	Array	[]	Defines the options to display when select is opened.
option-name	String	'name'	Defines the name of the option that will be displayed as the option text and displayed as the value of the select when the option is selected.

Events

Name	Description
update:model-value	Event emitted whenever an option from the select component is selected

Basic Select

Please select an option

<template>
	<Select v-model="value" :options="options" />
</template>

<script>
export default {
	data() {
		return {
			value: null,
			options: [
				{ key: 1, name: 'Option 1' },
				{ key: 2, name: 'Option 2' },
			],
		}
	},
}
</script>

Themes

Every select can define a theme and a variant. The theme defines the design of the select box and the variant defines the colors applied to the theme.

Solid

Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option

Outlined

Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option

<template>
	<!-- Solid theme -->
	<Select v-model="value" :options="options" theme="solid" />
	<Select v-model="value" :options="options" theme="solid" variant="primary" />
	<Select v-model="value" :options="options" theme="solid" variant="secondary" />
	<Select v-model="value" :options="options" theme="solid" variant="danger" />
	<Select v-model="value" :options="options" theme="solid" variant="warning" />
	<Select v-model="value" :options="options" theme="solid" variant="success" />
	<Select v-model="value" :options="options" theme="solid" variant="info" />

	<!-- Outlined theme -->
	<Select v-model="value" :options="options" theme="outlined" />
	<Select v-model="value" :options="options" theme="outlined" variant="primary" />
	<Select v-model="value" :options="options" theme="outlined" variant="secondary" />
	<Select v-model="value" :options="options" theme="outlined" variant="danger" />
	<Select v-model="value" :options="options" theme="outlined" variant="warning" />
	<Select v-model="value" :options="options" theme="outlined" variant="success" />
	<Select v-model="value" :options="options" theme="outlined" variant="info" />
</template>

<script>
export default {
	data() {
		return {
			value: null,
			options: [
				{ key: 1, name: 'Option 1' },
				{ key: 2, name: 'Option 2' },
			],
		}
	},
}
</script>

Sizes

The select boxes can also define their sizes, through the size prop. The available sizes are: sm, md and lg and the select component will use the md size by default.

Please select an option Please select an option Please select an option

<template>
	<Select v-model="value" :options="options" size="sm" />
	<Select v-model="value" :options="options" size="md" />
	<Select v-model="value" :options="options" size="lg" />
</template>

<script>
export default {
	data() {
		return {
			value: null,
			options: [
				{ key: 1, name: 'Option 1' },
				{ key: 2, name: 'Option 2' },
			],
		}
	},
}
</script>

States

Besides themes and sizes, every select component can define a set of props to control their visible states.

Disabled

Please select an option

Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option

Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option Please select an option

<template>
	<!-- Default theme -->
	<Select v-model="value" :options="options" theme="solid" disabled />

	<!-- Solid theme -->
	<Select v-model="value" :options="options" theme="solid" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="primary" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="secondary" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="danger" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="warning" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="success" disabled />
	<Select v-model="value" :options="options" theme="solid" variant="info" disabled />

	<!-- Outlined theme -->
	<Select v-model="value" :options="options" theme="outlined" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="primary" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="secondary" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="danger" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="warning" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="success" disabled />
	<Select v-model="value" :options="options" theme="outlined" variant="info" disabled />
</template>

<script>
export default {
	data() {
		return {
			value: null,
			options: [
				{ key: 1, name: 'Option 1' },
				{ key: 2, name: 'Option 2' },
			],
		}
	},
}
</script>