PubSelect

This is a select component. It is used to display a select field to select an option from a list of options.

Default Usage

Select a countryPlease select oneUnited StatesCanadaFrance

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
  />
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Sizes

Prop - size Usage

The size prop is used to set the size of the select field. It can be one of the following values: 'sm', 'md', 'lg', 'xl'.

Select a countryPlease select oneUnited StatesCanadaFrance

Select a countryPlease select oneUnited StatesCanadaFrance

Select a countryPlease select oneUnited StatesCanadaFrance

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    size="sm"
  />
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    size="md"
  />
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    size="lg"
  />
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Disabled

Prop - disabled Usage

The disabled prop is used to disable the select field. It can be a boolean value.

Select a countryPlease select oneUnited StatesCanadaFrance

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    disabled
  />
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Underlined

Prop - underlined Usage

The underlined prop is used to display the select field with an underline. It can be a boolean value.

Select a countryPlease select oneUnited StatesCanadaFrance

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    underline
  />
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Helper text

Slot - helperText Usage

The helperText slot is used to display helper text below the select field. It can be a string value.

Select a countryPlease select oneUnited StatesCanadaFrance

We'll never share your details. Read our Privacy Policy .

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
  >
    <template #helper>
      We'll never share your details. Read our
      <a
        href="#"
        class="text-blue-600 dark:text-blue-500"
      > Privacy Policy </a>.
    </template>
  </pub-select>
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Validation

Prop - validationStatus and Slot - validationMessage Usage

The validationStatus prop is used to set the visual validation state of the select field. It can be one of the following values: error, success.

The validationMessage slot is used to display a custom validation message. It can be a string value.

Select a countryPlease select oneUnited StatesCanadaFrance

Well done!

---

Select a countryPlease select oneUnited StatesCanadaFrance

Oh, snap!

<template>
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    validation-status="success"
  >
    <template #validationMessage>
      <span class="font-medium">Well done!</span>
    </template>
  </pub-select>
  <hr class="mb-2">
  <pub-select
    v-model="selected"
    :options="countries"
    label="Select a country"
    validation-status="error"
  >
    <template #validationMessage>
      <span class="font-medium">Oh, snap!</span>
    </template>
  </pub-select>
</template>

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

const selected = ref('')
const countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
]
</script>

Styling select

Prop - class, wrapperClass, labelClass Usage

The class, wrapperClass, and labelClass props are used to add additional classes to the wrapper element, outer wrapper, and label element, respectively.

Custom styled selectPlease select oneOption 1Option 2

<template>
  <pub-select
    v-model="selected"
    :options="options"
    label="Custom styled select"
    class="text-amber-600 dark:text-green-500 bg-amber-50 dark:bg-green-900 border-amber-400 dark:border-green-600 focus:ring-amber-500 dark:focus:ring-green-400"
    label-class="font-bold text-amber-900 dark:text-green-200"
    wrapper-class="border-2 border-amber-700 dark:border-green-400 bg-amber-300 dark:bg-green-800 rounded-lg p-3"
  />
</template>

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

const selected = ref('')
const options = [
    { name: 'Option 1', value: '1' },
    { name: 'Option 2', value: '2' },
]
</script>

Reference

Properties

Name	Type	Default	Description	Options
class	String	''	Additional classes for the wrapper element.
wrapperClass	String	''	Additional classes for the outer wrapper.
options	Array	[]	Options for the select field. Each option has name and value.
disabled	Boolean	false	Disables the select field.
label	String	''	Label displayed above the select field.
labelClass	String	''	Additional classes for the label element.
placeholder	String	'Please select one'	Placeholder shown as the first option.
size	String	'md'	Size of the select field.	'sm', 'md', 'lg', 'xl'
validationStatus	String	undefined	Visual validation state of the select field.	'Error', 'Success'
underline	Boolean	false	Whether the select field is underlined.

Slots

Name	Description
validationMessage	Slot for custom validation message.
helper	Slot for helper text displayed below the select field.