OcSelect component

Description

The OcSelect component displays a select input field based on Vue Select. A more detailed description can be found in the Vue Select documentation.

Accessibility

The label is required and represents the name of the input. It can be visually hidden on the screen by setting label-hidden to true, however it will still be read by screen readers.

Examples

Default

The most basic use case requires the label property and usually has a v-model to bind the selected value and some options.

<template>
  <oc-select v-model="option" label="Please select an option" :options="options" />
  <p>Selected option: {{ option }}</p>
</template>

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

const option = ref<{ value: string; label: string }>()
const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' }
]
</script>

Multiple

Multiple options can be selected by setting multiple to true.

<template>
  <oc-select
    v-model="selectedOptions"
    label="Please select one or more options"
    :options="options"
    :multiple="true"
  />
  <p>Selected options: {{ selectedOptions }}</p>
</template>

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

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

States

The component can be in a disabled or a loading state.

<oc-select
	label="Please select an option"
	disabled
	class="mb-4"
/>
<oc-select
	label="Please select an option"
	loading
	class="mb-4"
/>

Messages

There are two different types of messages that can be displayed: description-message and error-message.

<oc-select
	label="Please select an option"
	description-message="This is a description message"
	class="mb-4"
/>
<oc-select
	label="Please select an option"
	error-message="This is an error message"
	class="mb-4"
/>

Properties

Emits

Slots