Select

Select produces a prettier HTML select. It can handle an array of strings, as shown in the example, below. It works best if all values are unique.

Code Example

<script setup lang="ts">
const value = ref('Homer')
const options = ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
</script>

<template>
  <Select v-model="value" :options="options" />
</template>

Components

Select is a standalone component.

Select

Select can be customized with the following props:

Prop	Type	Description
`model-value`	string	Controls the selected item. Use with `v-model`
`options`	number	An array of objects, strings, or numbers to show as options.
`value`	function	A function to use with objects to return the value to be assigned to each option.
`label`	function	A function to use with objects to return the display value of each option.
`resultAsObject`	boolean	Emits the whole object instead of the value.
`join`	boolean	Use inside Join to group items together.
`bordered`	boolean	Enables the bordered style.
`ghost`	boolean	Enables the ghost style.
`disabled`	boolean	Disables the component.
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Options as Objects

The options can also be provided as an array of objects. If the object has any of these prop names (in this order) it will be automatically used as the value: value, id, or _id

These prop names will be used (in order) for the label: label, name, or title.

Note: the default v-model returns the property used as the object's value. See the Result as Object section to learn how to customize this.

Code Example

<script setup lang="ts">
const value = ref('A')
const options = [
  { value: '1', label: 'Homer' },
  { value: '2', label: 'Marge' },
  { value: '3', label: 'Bart' },
  { value: '4', label: 'Lisa' },
  { value: '5', label: 'Maggie' },
]
</script>

<template>
  <Select v-model="value" :options="options" disabled />
</template>

The value and label props accept functions to customize the respective values to match the shape of the records. Each function will receive each item in the array and must return the value to be used as the value or label.

Code Example

<script setup lang="ts">
const value = ref('A')
const options = [
  { dsid: 'A', songName: 'Overture' },
  { dsid: 'B', songName: 'Infinity' },
  { dsid: 'C', songName: 'I\'m Ready' },
  { dsid: 'D', songName: 'Woody Allen' },
  { dsid: 'E', songName: 'Livin\' On Love' },
]
</script>

<template>
  <Select 
    v-model="value" 
    :options="options" 
    :value="(item) => item.dsid"
    :label="(item) => item.songName"
  />
</template>

Null & Disabled Values

Since the HTML select element doesn't support placeholder, it's a common practice to use the first option in the list for non-selected state. If an object with value of null is selected, the v-model value will be null, not the matching object.

Note: null values are not supported when using primitive strings for options. To support null values you must use objects.

It's also pretty common to disabled individual items in the list, which can be done by adding disabled: true to an individual record.

{
  "value": null,
  "label": "No Song Selected"
}

Code Example

<script setup lang="ts">
const value = ref({ value: null, label: 'No Song Selected' })
const options = [
  { value: null, label: 'No Song Selected' },
  { value: 'A', label: 'Overture' },
  { value: 'B', label: 'Infinity' },
  { value: 'C', label: 'I\'m Ready' },
  { value: 'D', label: 'Woody Allen', disabled: true },
  { value: 'E', label: 'Livin\' On Love' },
  { value: 'F', label: 'Sonic the Hedgehog', disabled: true },
  { value: 'G', label: 'Chrono Cross - Time\'s Scar' },
]
</script>

<template>
  <Select
    v-model="value"
    :options="options"
    result-as-object
  />
</template>

Result as Object

Use the result-as-object prop to make the v-model expect an object and return the entire selected object. The below code uses the data from the previous example:

{
  "value": "1",
  "label": "Homer"
}

Code Example

<script setup lang="ts">
const value = ref({ value: '1', label: 'Homer' })
const options = [
  { value: '1', label: 'Homer' },
  { value: '2', label: 'Marge' },
  { value: '3', label: 'Bart' },
  { value: '4', label: 'Lisa' },
  { value: '5', label: 'Maggie' },
]
</script>

<template>
  <Select
    v-model="value"
    :options="options"
    result-as-object
  />
</template>

Bordered

The bordered variant adds a gray border around the Select

Code Example

<script setup lang="ts">
const value = ref({ value: null, label: 'No Song Selected' })
const options = [
  { value: null, label: 'No Song Selected' },
  { value: 'A', label: 'Overture' },
  { value: 'B', label: 'Infinity' },
  { value: 'C', label: 'I\'m Ready' },
  { value: 'D', label: 'Woody Allen', disabled: true },
  { value: 'E', label: 'Livin\' On Love' },
  { value: 'F', label: 'Sonic the Hedgehog', disabled: true },
  { value: 'G', label: 'Chrono Cross - Time\'s Scar' },
]
</script>

<template>
  <Select v-model="value" :options="options" bordered />
</template>

Ghost

The ghost variant makes the Select disappear until focused.

Code Example

<script setup lang="ts">
const value = ref({ value: null, label: 'No Song Selected' })
const options = [
  { value: null, label: 'No Song Selected' },
  { value: 'A', label: 'Overture' },
  { value: 'B', label: 'Infinity' },
  { value: 'C', label: 'I\'m Ready' },
  { value: 'D', label: 'Woody Allen', disabled: true },
  { value: 'E', label: 'Livin\' On Love' },
  { value: 'F', label: 'Sonic the Hedgehog', disabled: true },
  { value: 'G', label: 'Chrono Cross - Time\'s Scar' },
]
</script>

<template>
  <Select v-model="value" :options="options" ghost />
</template>

Disabled

As with any HTML selecte element, you can use the disabled attribute to disable the input.

Code Example

<script setup lang="ts">
const value = ref('Homer')
const options = ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
</script>

<template>
  <Select v-model="value" :options="options" disabled />
</template>

Color

There are two ways of specifying Select color:

The primary, secondary, and accent boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<script setup lang="ts">
const value = ref({ value: null, label: 'No Song Selected' })
const options = [
  { value: null, label: 'No Song Selected' },
  { value: 'A', label: 'Overture' },
  { value: 'B', label: 'Infinity' },
  { value: 'C', label: 'I\'m Ready' },
  { value: 'D', label: 'Woody Allen', disabled: true },
  { value: 'E', label: 'Livin\' On Love' },
  { value: 'F', label: 'Sonic the Hedgehog', disabled: true },
  { value: 'G', label: 'Chrono Cross - Time\'s Scar' },
]
</script>

<template>
  <Select v-model="value" :options="options" primary />
</template>

Size

Use size props to change size.

Code Example

<Select v-model="value" :options="options" lg />

Prev Rating

Next TextInput