Basic Usage

0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="Select something"
    :options="options"
  />
  <c-select
    v-model="selectedValue"
    rounded
    placeholder="Rounded Select"
    :options="options"
    class="c-ml-md"
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Sizes

0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '5 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-select
        v-model="selectedValue"
        size="xs"
        placeholder="xs select"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="sm"
        placeholder="sm select"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        placeholder="md select (default)"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="lg"
        placeholder="lg select"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="xl"
        placeholder="xl select"
        :options="options"
      />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Disabled

0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const val = ref('')
const options = [
  { label: '0 - 50', value: 0 },
  { label: '5 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="val"
    :options="options"
    placeholder="Disabled select"
    disabled
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Clearable

0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="Clearable something"
    :options="options"
    clearable
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Multiple

Multiple select
0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref([])

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="Multiple select"
    :options="options"
    clearable
    multiple
  />
</template>
Click to open/fold code
Open Vue Repl Editor

CSelect API

Props
Events
placeholder
string
Default  ''

The placeholder.

size
"sm" | "md" | "lg"
Default  

The size of select.

modelValue
CSelectModelValue
*

The select value. Can be used with v-model.

options
Array<COption>
Default  () => []

The options.

multiple
boolean
Default  false

Determine whether the select can have multiple selected options or not.

clearable
boolean
Default  

Determine whether the select's value can be cleared by a clear icon or not.

disabled
boolean
Default  false

Determine whether the select is disabled or not.

rounded
boolean
Default  false

Determine whether the select has a rounded border or not.