Form Select

The <d-form-select> component is a wrapper over Bootstrap's custom select component.

Alias

The <d-form-select> component is also available as <d-select>.

Basic Examples

The easiest way of using the <d-form-select> component would be by using the options prop to pass an Array or Object for the options.

<template>
    <d-form-select v-model="selected" :options="options" />
    Selected: {{ selected }}
</template>

<script>
export default {
    data() {
        return {
            selected: null,
            options: [
                { value: null, text: 'Please select an option' },
                { value: 'first', text: 'This is the first option' },
                { value: 'second', text: 'This is the second option' },
                { value: 'disabled', text: 'This one is disabled', disabled: true }
            ]
        }
    }
}
</script>

<!-- select-1.vue -->

Sizing

You can control the form-control's size using the size prop which accepts sm for small or lg for large.

Manual Options

You can also define your options manually:

<template>
  <div>
    <d-form-select v-model="selected" class="mb-3">
      <option :value="null">Select an option</option>
      <option value="pizza">🍕Pizza</option>
      <option value="pasta" disabled>🍝 Pasta (disabled)</option>
      <optgroup label="Breakfast">
        <option value="eggs">🍳 Eggs</option>
        <option value="bacon">🥓 Bacon</option>
        <option value="tea">🍵 Tea</option>
      </optgroup>
    </d-form-select>
    <div>Selected: {{ selected }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: null
    }
  }
}
</script>

<!-- select-2.vue -->

Mixed Options

You can also mix both using the options prop and usin manual options.

<template>
  <div>
    <d-form-select v-model="selected" :options="options" class="mb-3">
      <optgroup label="Breakfast">
        <option value="eggs">🍳 Eggs</option>
        <option value="bacon">🥓 Bacon</option>
      </optgroup>
    </d-form-select>
    <div>Selected: {{ selected }}</div>
  </div>
</template> 

<script>
export default {
  data () {
    return {
        selected: null,
        options: [
            { value: null, text: 'Select an option' },
            { value: 'pizza', text: '🍕 Pizza' },
            { value: 'pasta', text: '🍝 Pasta', disabled: true },
        ]
    }
  }
}
</script>

<!-- select-3.vue -->

Select Sizing

Using the select-size prop you can switch the custom select into a select list box. The prop accepts a number larger than 1 to control how many options are visible.

<template>
    <d-form-select v-model="selected" :options="options" :select-size="2" />
    Selected: {{ selected }}
</template>

<script>
export default {
    data() {
        return {
            selected: null,
            options: [
                { value: null, text: 'Please select an option' },
                { value: 'first', text: 'This is the first option' },
                { value: 'second', text: 'This is the second option' },
                { value: 'disabled', text: 'This one is disabled', disabled: true }
            ]
        }
    }
}
</script>

<!-- select-4.vue -->

Multiple Selections

Using the multiple prop you can allow users to select multiple values from the <d-form-select> component.

Note: Using the multiple mode requires an Array reference for your v-model.

<template>
    <d-form-select multiple :select-size="4" v-model="selected" :options="options" />
    Selected: {{ selected }}
</template>

<script>
export default {
    data() {
        return {
            selected: [],
            options: [
                { value: 'first', text: 'This is the first option' },
                { value: 'second', text: 'This is the second option' },
                { value: 'third', text: 'This is the third option' },
                { value: 'fourth', text: 'This is the fourth option' }
            ]
        }
    }
}
</script>

<!-- select-5.vue -->

Props

Prop	Description	Type	Default	Required
:id	The element ID.	`String`	null	False
:name	The element name.	`String`		False
:options	The select options.	`Array \| Object`	default() { return []; }	False
:value	The select value.	`Undefined`		False
:multiple	Whether it should allow multiple selections, or not.	`Boolean`	false	False
:select-size	How many options should be visible.	`Number`	0	False
:aria-invalid	Controls the `aria-invalid` attribute.	`Boolean \| String`	false	False
:value-field	The value field.	`String`	"value"	False
:disabled-field	The disabled field.	`String`	"disabled"	False
:text-field	The text field.	`String`	"text"	False
:disabled	The disabled state.	`Boolean`	false	False
:required	The required state.	`Boolean`	false	False
:state	The validity state (invalid, valid, true, false).	`Boolean \| String`	null	False
:size	The form control size (sm, lg).	`String`	null	False