# Dropdown / Select
Selects an option from a list
Alias: "Select"
<winui-dropdown> and <winui-select> can be used interchangeably.
# Usage
<template>
<winui-dropdown value="burger">
<option value="burger">🍔 Burger</option>
<option value="fries">🍟 Fries</option>
<option value="pizza">🍕 Pizza</option>
</winui-dropdown>
</template>
# Props
# options optional
- Type:
Array<{ label: string, value: any }> - Default:
undefined
The options to display in the dropdown. Each option must have a label and value property.
# value optional
- Type:
number|string - Default:
undefined
The value of the selected option.
# placeholder optional
- Type:
string - Default:
undefined
The placeholder text to be displayed when no option is selected.
# Customization
Use the class name .winui-dropdown to override/customize the component's styles.
# Examples
# Using options as prop
<template>
<winui-dropdown value="milk" :options="options" />
</template>
<script>
export default {
data() {
return {
options: [
{ label: "🥛 Milk", value: "milk" },
{ label: "🍷 Wine", value: "wine" },
{ label: "🧃 Juice", value: "juice" },
],
};
},
};
</script>
# Using slot for options
<template>
<winui-dropdown value="burger">
<option value="burger">🍔 Burger</option>
<option value="fries">🍟 Fries</option>
<option value="pizza">🍕 Pizza</option>
</winui-dropdown>
</template>
# Handling two-way binding
Dog is my best friend!
<template>
<div>
<winui-dropdown v-model="value">
<option value="Dog">🐶 Dog</option>
<option value="Cat">🐱 Cat</option>
<option value="Mouse">🐭 Mouse</option>
</winui-dropdown>
<span>{{ value }} is my best friend!</span>
</div>
</template>
<script>
export default {
data() {
return {
value: "Dog",
};
},
};
</script>
# Using placeholder
<template>
<winui-dropdown placeholder="Choose your favorite food">
<option value="burger">🍔 Burger</option>
<option value="fries">🍟 Fries</option>
<option value="pizza">🍕 Pizza</option>
</winui-dropdown>
</template>