Usage

Default

Use the options prop to set the available options for the select component. The component requires id and name props to function properly.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]

const selectedValue = ref('1')
</script>

<template>
  <CLSelect
    id="default-select"
    name="default-select"
    :options="selectOptions"
    v-model="selectedValue" />
</template>

With Label

Use the label prop to add a descriptive label to the select component.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]

const selectedValue = ref('1')
</script>

<template>
  <CLSelect
    id="labeled-select"
    name="labeled-select"
    label="Choose an option"
    :options="selectOptions"
    v-model="selectedValue" />
</template>

Colors

Use the color prop to customize the component's color.

Variants

Use the variant prop to customize the component's appearance. The select component supports Outline and Ghost variants.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';
import { CLColors, CLColorVariants } from '@codeandfunction/callaloo';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]
</script>

<template>
  <CLSelect
    id="select-outline"
    name="select-outline"
    :color="CLColors.Primary"
    :variant="CLColorVariants.Outline"
    label="Outline"
    :options="selectOptions" />
  <CLSelect
    id="select-ghost"
    name="select-ghost"
    :color="CLColors.Primary"
    :variant="CLColorVariants.Ghost"
    label="Ghost"
    :options="selectOptions" />
</template>

Sizes

Use the size prop to customize the component's size.

Rounded

Use the border-radius prop to customize the border radius.

Orientation

Use the orientation prop to set the label position to be above or to the left of the select element.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';
import { CLColors, CLOrientation } from '@codeandfunction/callaloo';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]
</script>

<template>
  <CLSelect
    id="select-vertical"
    name="select-vertical"
    :color="CLColors.Primary"
    :orientation="CLOrientation.Vertical"
    label="Vertical"
    :options="selectOptions" />
  <CLSelect
    id="select-horizontal"
    name="select-horizontal"
    :color="CLColors.Primary"
    :orientation="CLOrientation.Horizontal"
    label="Horizontal"
    fluid
    :options="selectOptions" />
</template>

States

A select can have various states, which can be set via the busy, disabled, and required props.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';
import { CLColors } from '@codeandfunction/callaloo';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]
</script>

<template>
  <CLSelect
    id="select-busy"
    name="select-busy"
    :color="CLColors.Primary"
    label="Busy"
    busy
    :options="selectOptions" />
  <CLSelect
    id="select-disabled"
    name="select-disabled"
    :color="CLColors.Primary"
    label="Disabled"
    disabled
    :options="selectOptions" />
  <CLSelect
    id="select-required"
    name="select-required"
    :color="CLColors.Primary"
    label="Required"
    required
    :options="selectOptions" />
</template>

Messages

Use the messages and message-type props to display validation or helper messages below the select.

<script setup lang="ts">
import { ref } from 'vue';
import CLSelect from '@codeandfunction/callaloo/CLSelect';
import { CLColors } from '@codeandfunction/callaloo';

const selectOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
  { label: 'Option 4', value: '4' },
]
</script>

<template>
  <CLSelect
    id="select-success"
    name="select-success"
    :color="CLColors.Success"
    label="Success"
    :message-type="CLColors.Success"
    :messages="['Selection is valid']"
    :options="selectOptions" />
  <CLSelect
    id="select-error"
    name="select-error"
    :color="CLColors.Danger"
    label="Error"
    :message-type="CLColors.Danger"
    :messages="['Please select a valid option']"
    :options="selectOptions" />
</template>

Props