Appearance
Select
The FTSelect component replaces the standard html select with a design theme and a multitude of options.
Usage
Selects in their simplest form contain a list of options to choose from, and a search bar to filter them out.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTSelect } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTSelect } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTSelect } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSelect
}
}
</script><script>
import { FTSelect } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSelect
}
}
</script>Simple
INFO
Select an option
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTSelect } from '../components';
const options = ref([]);
for (let i = 1; i <= 20; i++) {
options.value.push({ value: i, label: `Option ${i}`});
}
const model = ref(undefined);
</script>
<template>
<FTSelect v-model="model" :options :showSearch="true" scrollableContainerSelector="body" placeholder="Select an option" mode="default" />
</template><script setup lang="ts">
import { ref } from 'vue';
import { FTSelect } from '../components';
const options = ref([]);
for (let i = 1; i <= 20; i++) {
options.value.push({ value: i, label: `Option ${i}`});
}
const model = ref(undefined);
</script>
<template>
<FTSelect v-model="model" :options :showSearch="true" scrollableContainerSelector="body" placeholder="Select an option" mode="default" />
</template>Props
In order to modify the default behavior, FTSelect accepts custom helper props:
| Name | Default | Description |
|---|---|---|
scrollableContainerSelector | #activityPanelBody | Selector for the scrollable container |
modelValue | undefined | Selected value(s) of the select field |
mode | undefined | Select mode (single, multiple, etc.) |
showSearch | false | Enable search inside the dropdown |
boxed | false | Display as a boxed select |
mini | false | Use a smaller size variant |
allowClear | false | Allow clearing the selection |
isRequired | false | Mark the field as required |
label | '' | Label text for the select |
disabled | false | Disable the select field |
size | 'large' | Size of the select (small, medium, large) |
placeholder | '' | Placeholder text |
className | '' | Additional CSS class for styling |
focusBorder | true | Show border on focus |
autoFocus | false | Automatically focus the select on mount |
defaultOpen | false | Open the dropdown by default |
allowNewTags | true | Allow users to create new tags |
icon | Base64 Icon | Custom icon for the dropdown |
loading | false | Show loading state |
filterOption | Custom Function | Function to filter options |
options | [] | Array of selectable options |
groupedOptions | [] | Array of grouped options |
uppercaseTags | true | Convert tags to uppercase |
tokenSeparators | [', ', ' '] | Characters that separate tokens in multi-mode |
hideArrow | false | Hide the dropdown arrow |
id | '' | Custom ID for the select element |
errorMessage | '' | Error message to display |