Vue Formulate

# Select

The select classification is only given to:

# Select

<FormulateInput
  v-model="value"
  :options="{first: 'First', second: 'Second', third: 'Third', fourth: 'Fourth'}"
  type="select"
  placeholder="Select an option"
  label="Which of your children is your favorite?"
/>
value:

The options prop can be an object, an array of objects, or array of strings. When using an array of objects each object must include a label and value property.

<FormulateInput
  type="select"
  :options="[
    { value: 'first', label: 'First name' },
    { value: 'last', label: 'Last name' },
    { value: 'initial', label: 'Middle Initial', id: 'name-initial' },
    { value: 'maiden', label: 'Maiden name', disabled: true },
  ]"
/>

Note

The label and value properties are required when using an array of objects, however you can also pass id, disabled, or an attrs sub-object with additional attributes to bind to each option.

When using an array of strings, the provided string will be both the value and the label.

<FormulateInput
  type="select"
  :options="['Bologna', 'Rome', 'Florence']"
/>

Note

Native select elements don’t have placeholders, but that prop is available and will inject a non-selectable option item as the initially selected value.

# Option grouping

Use the optionGroups prop when you need to use <optgroup>.

<FormulateInput
  label="Select an available meeting time"
  type="select"
  placeholder="Choose a time"
  :option-groups="{
    Morning: {
      10: '10am',
      11: '11am'
    },
    Afternoon: {
      15: '3pm',
      17: '5pm'
    }
  }"
/>

String values only

Although Vue Formulate supports non-string values, HTML select inputs only support string values. As such when using a Number as an option value the value will automatically be re-cast as a string.

← Slider →