Autocomplete - Advanced
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, such as
id - The
selected value will be the option itself
<script>
export default {
data() {
return {
selected: null,
options: [
{ 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>
export default {
data() {
return {
selected: null,
options: [
{ 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>
export default {
data() {
return {
selected: null,
options: [
{ 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>
export default {
data() {
const options = [
{ 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' }
];
return {
selected: options[0].id,
options
};
}
};
</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>
export default {
data() {
const options = [
{ 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' }
];
return {
selected: options[0].id,
options
};
}
};
</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>
export default {
data() {
return {
selected: null,
options: [
{ id: 1, name: 'Richard Hendricks' },
{ id: 2, name: 'Bertram Gilfoyle' },
{ id: 3, name: 'Dinesh Chugtai' },
{ id: 4, name: 'Jared Dunn' },
{ id: 5, name: 'Erlich Bachman' }
]
};
}
};
</script>
<template>
<ISelect v-model="selected" :options="options" label="name" placeholder="Choose something..">
<template #prefix>
<span>@</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" label="name" placeholder="Choose something..">
<template #suffix>
<span>@</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" label="name" 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>
export default {
data() {
return {
selected: null,
options: [
{ id: 1, name: 'Richard Hendricks' },
{ id: 2, name: 'Bertram Gilfoyle' },
{ id: 3, name: 'Dinesh Chugtai' },
{ id: 4, name: 'Jared Dunn' },
{ id: 5, name: 'Erlich Bachman' }
]
};
}
};
</script>
<template>
<ISelect v-model="selected" :options="options" label="name" placeholder="Choose something..">
<template #prepend>
<span>I choose</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" label="name" placeholder="Choose something..">
<template #append>
<span>as an example</span>
</template>
</ISelect>
<ISelect v-model="selected" :options="options" label="name" placeholder="Choose something..">
<template #prepend>
<span>I choose</span>
</template>
<template #append>
<span>as an example</span>
</template>
</ISelect>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [
{ id: 1, name: 'Richard Hendricks' },
{ id: 2, name: 'Bertram Gilfoyle' },
{ id: 3, name: 'Dinesh Chugtai' },
{ id: 4, name: 'Jared Dunn' },
{ id: 5, name: 'Erlich Bachman' }
]
};
}
};
</script>
<template>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #append>
<IButton>Button</IButton>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
<template #append>
<IButton>Button</IButton>
</template>
</IInput>
</template>
You can use the color property to set a light or dark color for your select.
<script>
export default {
data() {
return {
selected: null,
options: [
{ 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>
export default {
data() {
return {
selected: null,
options: [
{ 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>
export default {
data() {
return {
selected: null,
options: [
{ 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>