Select
The most basic use case for a select component is to have all the select options predefined using the options property. This component allows you to easily choose from a set of values and display a computed option label of your choice.
Here are some considerations to be made:
- Each option must be an Object
{} - Each option must have a unique identifier field,
id by default - The selected
modelValue will be the id of the option
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." />
</template>
Setting the disabled property will disable all interactions with the select component.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." disabled />
</template>
You can also disable individual options by setting the option's disabled field to true.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn', disabled: true },
{ id: 5, label: 'Erlich Bachman', disabled: true }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." />
</template>
Setting the readonly property will disable all interactions with the select component, except being able to focus the select.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(1);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." readonly />
</template>
If you need to be able to quickly clear the value of an select, you can add the clearable property to the select component.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(1);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." clearable />
</template>
Inkline allows you to easily add a prefix or suffix to your select. Using prefixes and suffixes you can, for example, indicate
your select type using an icon or text.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prefix>
<span>@</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #suffix>
<span>@</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prefix>
<span>@</span>
</template>
<template #suffix>
<span>@</span>
</template>
</ISelect>
</template>
You can add additional content such as select fields, buttons or plain text, to either side of the select by using prepend and append slots.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prepend>
<span>I choose</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #append>
<span>as an example</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prepend>
<span>I choose</span>
</template>
<template #append>
<span>as an example</span>
</template>
</ISelect>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prepend>
<IButton>Button</IButton>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #append>
<IButton>Button</IButton>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #prepend>
<IButton>Button</IButton>
</template>
<template #append>
<IButton>Button</IButton>
</template>
</ISelect>
</template>
You can use the color property to set a light or dark color for your select.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." color="light" />
<ISelect v-model="selected" :options="options" placeholder="Choose something.." color="dark" />
</template>
You're able to use the size modifier to control the size of your select, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something.." size="sm" />
<ISelect v-model="selected" :options="options" placeholder="Choose something.." size="md" />
<ISelect v-model="selected" :options="options" placeholder="Choose something.." size="lg" />
</template>
You can provide a custom header and footer for the select menu using the header and footer slots.
<script lang="ts" setup>
import { ref } from 'vue';
import type { SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref<SelectOption[]>([
{ id: 1, label: 'Richard Hendricks' },
{ id: 2, label: 'Bertram Gilfoyle' },
{ id: 3, label: 'Dinesh Chugtai' },
{ id: 4, label: 'Jared Dunn' },
{ id: 5, label: 'Erlich Bachman' }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" placeholder="Choose something..">
<template #header> Header </template>
<template #footer> Footer </template>
</ISelect>
</template>
Expressions are strings that can be interpolated using the {{ }} syntax.
<script lang="ts" setup>
import { ref } from 'vue';
const selected = ref(null);
const options = ref([
{
id: 1,
address: {
city: 'London',
country: 'England'
}
},
{
id: 2,
address: {
city: 'New York',
country: 'United States'
}
},
{
id: 3,
address: {
city: 'Paris',
country: 'France'
}
},
{
id: 4,
address: {
city: 'Moscow',
country: 'Russia'
}
},
{
id: 5,
address: {
city: 'Tokyo',
country: 'Japan'
}
},
{
id: 6,
address: {
city: 'Dubai',
country: 'United Arab Emirates'
}
}
]);
const renderLabelExpression = `{{address.city}}, {{address.country}}`;
</script>
<template>
<ISelect
v-model="selected"
:options="options"
:label="renderLabelExpression"
placeholder="Choose something.."
/>
</template>
Render functions are functions that return a string or VNode. They receive the option being rendered as an argument.
<script lang="ts" setup>
import { ref } from 'vue';
import type { LabelRenderFunction, SelectOption } from '@inkline/inkline';
const selected = ref(null);
const options = ref([
{
id: 1,
address: {
city: 'London',
country: 'England'
}
},
{
id: 2,
address: {
city: 'New York',
country: 'United States'
}
},
{
id: 3,
address: {
city: 'Paris',
country: 'France'
}
},
{
id: 4,
address: {
city: 'Moscow',
country: 'Russia'
}
},
{
id: 5,
address: {
city: 'Tokyo',
country: 'Japan'
}
},
{
id: 6,
address: {
city: 'Dubai',
country: 'United Arab Emirates'
}
}
]);
const renderLabelFunction: LabelRenderFunction<SelectOption> = (option) => {
return `${option.address.city}, ${option.address.country}`;
};
</script>
<template>
<ISelect
v-model="selected"
:options="options"
:label="renderLabelFunction"
placeholder="Choose something.."
/>
</template>
You can also use a component to render each option. The component will receive the option being rendered as a prop named ctx (context).
<script lang="ts" setup>
import { ref, defineComponent, h, markRaw } from 'vue';
const LabelRenderComponent = markRaw(
defineComponent({
props: {
ctx: {
type: Object,
default: () => ({})
}
},
setup(props) {
return () => h('span', `${props.ctx.address.city}, ${props.ctx.address.country}`);
}
})
);
const selected = ref(null);
const options = ref([
{
id: 1,
address: {
city: 'London',
country: 'England'
}
},
{
id: 2,
address: {
city: 'New York',
country: 'United States'
}
},
{
id: 3,
address: {
city: 'Paris',
country: 'France'
}
},
{
id: 4,
address: {
city: 'Moscow',
country: 'Russia'
}
},
{
id: 5,
address: {
city: 'Tokyo',
country: 'Japan'
}
},
{
id: 6,
address: {
city: 'Dubai',
country: 'United Arab Emirates'
}
}
]);
</script>
<template>
<ISelect
v-model="selected"
:options="options"
:label="LabelRenderComponent"
placeholder="Choose something.."
/>
</template>
Each option's label field is a Renderable property. This means you can also use a render function to render each option's label.
<script lang="ts" setup>
import { h, ref } from 'vue';
const selected = ref('apple');
const options = ref([
{ id: 'apple', label: () => h('strong', { class: '_color:green' }, 'Apple') },
{ id: 'banana', label: () => h('strong', { class: '_color:yellow' }, 'Banana') },
{ id: 'strawberry', label: () => h('strong', { class: '_color:red' }, 'Strawberry') },
{ id: 'mango', label: () => h('strong', { class: '_color:orange' }, 'Mango') }
]);
</script>
<template>
<ISelect v-model="selected" :options="options" />
</template>