# Listbox

Selects an item from a visible list

# Usage

<template>
  <winui-listbox :items="items" />
</template>

<script>
export default {
  data() {
    return {
      items: [
        { label: "Item 1", value: 1 },
        { label: "Item 2", value: 2 },
        { label: "Item 3", value: 3 },
        { label: "Item 4", value: 4 },
        { label: "Item 5", value: 5 },
      ],
    };
  },
};
</script>

# Props

# `items` required

Type: Array<{ label: string, value: any }>
Default: undefined

The list of items to display in the listbox. Each item must have a label and value property.

# `value` optional

Type: number | string
Default: undefined

The value of the selected item.

# `@change` optional

Type: (value: number | string) => void
Default: undefined

The function to call when the selected item changes. The function will be called with the newly selected value as an argument.

# Customization

Use the class name .winui-listbox to override/customize the component's styles.

# Examples

# Using the `@change` event

My spirit animal is: _____

<template>
  <div>
    <winui-listbox :items="items" @change="handleChange" />
    <div>My spirit animal is: {{ animal }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animal: "_____",
      items: [
        { label: "🐭 Mouse", value: "mouse" },
        { label: "🐨 Koala", value: "koala" },
        { label: "🐯 Tiger", value: "tiger" },
        { label: "🐰 Rabbit", value: "rabbit" },
        { label: "🐵 Monkey", value: "monkey" },
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.animal = this.items.find((item) => item.value === value).label;
    },
  },
};
</script>

# Handling two-way binding

My spirit animal is: _____

<template>
  <div>
    <winui-listbox :items="items" v-model="animal" />
    <div>My spirit animal is: {{ animal }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animal: "_____",
      items: [
        { label: "🐭 Mouse", value: "mouse" },
        { label: "🐨 Koala", value: "koala" },
        { label: "🐯 Tiger", value: "tiger" },
        { label: "🐰 Rabbit", value: "rabbit" },
        { label: "🐵 Monkey", value: "monkey" },
      ],
    };
  },
};
</script>

← Link Menu →