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>
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>
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>
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>
Multiple
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>
CSelect API
The select value. Can be used with v-model
.
Determine whether the select can have multiple selected options or not.
Determine whether the select's value can be cleared by a clear icon or not.
Determine whether the select is disabled or not.
Determine whether the select has a rounded border or not.