Select (Listbox)

Basic select

BSelect is a nice replacement for the standard select tag. Offering better styling opportunities while retaining all accessability features.

Selected value:

Durward Reynolds

<script setup lang="ts">
import { ref } from 'vue'

const options = ['Durward Reynolds', 'Kenton Towne', 'Therese Wunsch', 'Benedict Kessler', 'Katelyn Rohan']
const selected = ref(options[0])
</script>

<template>
  <BSelect
    v-model="selected"
  >
    <BOption
      v-for="option in options"
      :key="option"
      :value="option"
    >
      {{ option }}
    </BOption>
  </BSelect>
  <div class="flex items-baseline">
    <p class="text-lg font-semibold mt-4 mr-4">
      Selected value:
    </p>
    <pre>{{ selected }}</pre>
  </div>
</template>

Object selection

It's also possible to select whole objects by setting the value prop to an object. By default BSelect expects the object to contain a label property to display as the selected value. This can also be configured by setting the display prop to another key or function (as long as it returns a string)

Default display

Display value instead

With display as a function

Selected value:

{
  "id": 1,
  "label": "Durward Reynolds",
  "value": "#001"
}

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  { id: 1, label: 'Durward Reynolds', value: '#001' },
  { id: 2, label: 'Kenton Towne', value: '#002' },
  { id: 3, label: 'Therese Wunsch', value: '#003' },
  { id: 4, label: 'Benedict Kessler', value: '#004' },
  { id: 5, label: 'Katelyn Rohan', value: '#005' },
]
const selected = ref(options[0])
</script>

<template>
  <div class="space-y-6">
    <BSelect
      v-model="selected"
      label="Default display"
    >
      <BOption
        v-for="option in options"
        :key="option.id"
        :value="option"
      >
        {{ option.label }}
      </BOption>
    </BSelect>
    <BSelect
      v-model="selected"
      label="Display value instead"
      display="value"
    >
      <BOption
        v-for="option in options"
        :key="option.id"
        :value="option"
      >
        {{ option.label }}
      </BOption>
    </BSelect>
    <BSelect
      v-model="selected"
      label="With display as a function"
      :display="(value: any) => `${value.label} is employee nbr ${value.id}`"
    >
      <BOption
        v-for="option in options"
        :key="option.id"
        :value="option"
      >
        {{ option.label }}
      </BOption>
    </BSelect>
  </div>
  <div>
    <p class="text-lg font-semibold mt-4 ">
      Selected value:
    </p>
    <pre>{{ selected }}</pre>
  </div>
</template>

Multiple selection

BSelect also does multiple selections by adding the multiple prop and supplying an array as the model

Selected value:

[
  {
    "id": 1,
    "label": "Durward Reynolds",
    "value": "#001"
  },
  {
    "id": 2,
    "label": "Kenton Towne",
    "value": "#002"
  }
]

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  { id: 1, label: 'Durward Reynolds', value: '#001' },
  { id: 2, label: 'Kenton Towne', value: '#002' },
  { id: 3, label: 'Therese Wunsch', value: '#003' },
  { id: 4, label: 'Benedict Kessler', value: '#004' },
  { id: 5, label: 'Katelyn Rohan', value: '#005' },
]
const selected = ref([options[0], options[1]])
</script>

<template>
  <BSelect
    v-model="selected"
    multiple
  >
    <BOption
      v-for="option in options"
      :key="option.id"
      :value="option"
    >
      {{ option.label }}
    </BOption>
  </BSelect>
  <div>
    <p class="text-lg font-semibold mt-4 ">
      Selected value:
    </p>
    <pre>{{ selected }}</pre>
  </div>
</template>