Select Default is base component which will have as default slot. value of each item will be on value prop of ROption . < template > < RSelect v-model = "selected" placeholder = "Placeholder" > < ROption v-for = "{ name, id } in items" :value = "id" :text = "name" /> const items = ref ([ { name: "Vue" , id: 1 }, { name: "React" , id: 2 }, { name: "Svelte" , id: 3 }, { name: "Nuxt" , id: 4 }, { name: "Node" , id: 5 }, ]); const selected = ref (); Custom Option Default slot of ROption components lets you render your custom item. by default only text prop is shown. If you do not pass text prop you need to use renderPlaceholder to customize the placeholder and if select is multiple you should use custom selected items ( tags ) as well. < template > < RSelect v-model = "selected" placeholder = "Custom Option" :renderPlaceholder = "renderPlaceholder" label = "single item" > < ROption v-for = "{ name, flag, id } in items" :value = "id" :context = "{ name, flag }" > < div class = "custom-option" > < img :src = "flag" > < span >{{ name }} < RSelect v-model = "selectedMultiple" multiple placeholder = "Custom Option" :renderPlaceholder = "renderMultplePlaceholder" label = "multiple item" > < ROption v-for = "{ name, flag, id } in items" :value = "id" :context = "{ name, flag }" > < div class = "custom-option" > < img :src = "flag" > < span >{{ name }} < template #selectedItem = "{ context, remove }" > < RButton class = "selected-item" textStyle @click = "remove" > < img :src = "context.flag" /> < span >{{ context.name }} < i class = "bx bx-x" > import type { ROptionProps } from 'sevue' const items = ref ([ { name: "Germany" , id: 1 , flag: "https://www.countryflagicons.com/FLAT/32/DE.png" }, { name: "Italy" , id: 2 , flag: "https://www.countryflagicons.com/FLAT/32/IT.png" }, { name: "United Kingdom" , id: 3 , flag: "https://www.countryflagicons.com/FLAT/32/GB.png" }, { name: "France" , id: 4 , flag: "https://www.countryflagicons.com/FLAT/32/FR.png" }, { name: "Greece" , id: 5 , flag: "https://www.countryflagicons.com/FLAT/32/GR.png" }, ]); const selected = ref ( '' ); const selectedMultiple = ref ([]); const renderPlaceholder = ( option : ROptionProps ) => { return option.context ! .name } const renderMultplePlaceholder = ( options : any ) => { return `${ options . length } items selected` } Custom Placeholder If you don't specify text on ROption you need to use a custom placeholder which is a function accepting selected option( when single select ) or array of selected options( when multiple select ) and returns a string to be displayed when any item is selected. defaults to: renderPlaceholder : ( option : Option | Option []) => { if (Array. isArray (option)) return `${ option . length } selected` else return option.text || '' } Custom Selected Items To show custom tags when selection is multiple you can use named slot of #selectedItem which accepts option props. context prop is used for passing custom data. < template > < RSelect v-model = "selectedMultiple" multiple placeholder = "Select Items" :renderPlaceholder = "renderPlaceholder" label = "Custom Selected Items" > < ROption v-for = "{ name, flag, id } in items" :value = "id" :context = "{ name, flag }" > < div class = "custom-option" > < img :src = "flag" > < span >{{ name }} < template #selectedItem = "{ context, remove }" > < RButton class = "selected-item" textStyle @click = "remove" > < img :src = "context.flag" /> < span >{{ context.name }} < i class = "bx bx-x" > const items = ref ([ { name: "Germany" , id: 1 , flag: "https://www.countryflagicons.com/FLAT/32/DE.png" }, { name: "Italy" , id: 2 , flag: "https://www.countryflagicons.com/FLAT/32/IT.png" }, { name: "United Kingdom" , id: 3 , flag: "https://www.countryflagicons.com/FLAT/32/GB.png" }, { name: "France" , id: 4 , flag: "https://www.countryflagicons.com/FLAT/32/FR.png" }, { name: "Greece" , id: 5 , flag: "https://www.countryflagicons.com/FLAT/32/GR.png" }, ]); const selectedMultiple = ref ([]); const renderPlaceholder = ( options : any ) => { return `${ options . length } items selected` } Custom Search By default searchable prop does search over text prop of ROption . If you don't pass text or want a different type of searching you can use customSearch prop which is a function and is called whenever the input changes accepting search query as it's parameter. < template > < RSelect v-model = "selected" placeholder = "Select Items" :renderPlaceholder = "renderPlaceholder" searchable :customSearch = "customSearh" > < ROption v-for = "{ name, flag, id } in filteredItems" :value = "id" :context = "{ name, flag }" > < div class = "custom-option" > < img :src = "flag" > < span >{{ name }} const items = ref ([ { name: "Germany" , id: 1 , flag: "https://www.countryflagicons.com/FLAT/32/DE.png" }, { name: "Italy" , id: 2 , flag: "https://www.countryflagicons.com/FLAT/32/IT.png" }, { name: "United Kingdom" , id: 3 , flag: "https://www.countryflagicons.com/FLAT/32/GB.png" }, { name: "France" , id: 4 , flag: "https://www.countryflagicons.com/FLAT/32/FR.png" }, { name: "Greece" , id: 5 , flag: "https://www.countryflagicons.com/FLAT/32/GR.png" }, ]); const filteredItems = ref (items.value) const selected = ref (); const customSearh = ( search : string ) => { filteredItems.value = items.value. filter (({ name }) => { return name. toLowerCase (). includes (search. toLowerCase ()) }) } const renderPlaceholder = ( options : any ) => { return options.context.name } Async items Here is an example of using items that are fetched from an api. noDropdownOnEmptySearch hides dropdown when there is no search query. < template > < RSelect v-model = "state.selected" placeholder = "Select Items" :renderPlaceholder = "renderPlaceholder" searchable multiple :loading = "state.loading" noDropdownOnEmptySearch :customSearch = "customSearh" > < ROption v-for = "item in state.users" :value = "item.id" :context = "item" > < div class = "custom-option" > < span >{{ item.firstName }} {{ item.lastName }} < template #selectedItem = "{ context }" > {{ context.firstName }} {{ context.lastName }} import axios from 'axios' ; interface State { users : { firstName : string , lastName : string , id : number }[] loading : boolean selected : number [] } const state = reactive < State >({ users: [], loading: false , selected: [] }) const getUsers = async ( search = '' ) => { state.loading = true const { data } = await axios. get ( 'https://dummyjson.com/users/search' , { params: { q: search } }) state.loading = false return data.users } const customSearh = async ( search : string ) => { state.users = await getUsers (search) console. log (state); } const renderPlaceholder = ( options : any ) => { return `${ options . length } users selected` } onMounted ( async () => { state.users = await getUsers () }) There are some cases where some options are pre-selected ( for example inital value of v-model is not empty ) but you don't have the list yet or values you have as initial modelValue are not on the list of your options, in this case you can use exposed method of setSelectedItems to pass the items to RSelect. The first parameter is the array of objects as you would pass props to ROption . this method does NOT modify v-model , it just updates selected items if there are any missing from options. < RSelect ref = "selectRef" >... import { RSelect } from 'sevue' const selectRef = ref < InstanceOf < typeof RSelect> | undefined >() // letting rselect know of items that are selected but are not on options list: selectRef.value. setSelectedItems ([ { value: item.id // mandatory context: {} // to pass custom data you can later use for custom templating } ]) RSelectGroup Used when items are grouped. < template > < RSelect v-model = "selected" placeholder = "Select City" > < RSelectGroup v-for = "{ title, cities } in items" :title = "title" > < ROption v-for = "{name, id} in cities" :value = "id" :text = "name" /> const items = ref ([ { title: "UK" , cities: [ { name: "London" , id: 1 }, { name: "Bristol" , id: 2 }, ], }, { title: "Russia" , cities: [ { name: "Moscow" , id: 3 }, { name: "Saint Petersburg" , id: 4 }, { name: "Novosibirsk" , id: 5 }, ], }, ]); const selected = ref (); Multiple Initial value of v-model or modelValue needs to be an array. keepOpenAfterSelection prevents the select from closing after value selection. < template > < RSelect v-model = "selected" multiple keepOpenAfterSelection > < ROption v-for = "{ name, id } in items" :value = "id" :text = "name" /> const items = ref ([ { name: "Germany" , id: 1 }, { name: "Italy" , id: 2 }, { name: "United Kingdom" , id: 3 }, { name: "France" , id: 4 }, { name: "Greece" , id: 5 }, ]); const selected = ref ([]); Disabled This prop can be passed to RSelect to disable the whole select or ROption to disable specific option/options. < template > < RSelect v-model = "selected" :disabled = "disabled" > < ROption v-for = "{ name, id } in items" :value = "id" :text = "name" /> < RButton @click = "disabled = !disabled" >{{ disabled ? 'Enable' : 'Disable' }} const items = ref ([ { name: "Germany" , id: 1 }, { name: "Italy" , id: 2 }, { name: "United Kingdom" , id: 3 }, { name: "France" , id: 4 }, { name: "Greece" , id: 5 }, ]); const selected = ref (); const disabled = ref ( true ) Optimized items You might experience some lags when there are lots of items in your options list. You can optimize rendering of items using the method below: You need to pass the main array of items to items prop of RSelect : . doing so you get a prop in default slot of RSelect called optimizedItems . you shall use this prop for rendering your list instead of myLongList . items array must have value key in each item which is mandatory for setting values if not you can use itemExtractor prop. it recieves item as it's first parameter and must return an object containing at least value which will be used as value prop for ROption . this is equalant to passing props to ROption . < template > < RSelect :items = "myLongList" :itemExtractor = "itemExtractor" > < template # default = " { optimizedItems } " > < ROption v-for = "item in optimizedItems" :value = "item.id" :text = "item.title" /> < script setup > const itemExtractor = ( item ) => { return { ... item, value: item.id, }; }; < template > < div class = "doc-item" > < RSelect v-model = "selected" :items = "items" :itemExtractor = "itemExtractor" searchable label = "Select with 10k items" > < template # default = " { optimizedItems } " > < ROption v-for = "{ itemId, itemTitle } in optimizedItems" :value = "itemId" :text = "itemTitle" /> type Item = { itemTitle : string ; itemId : number ; }; const items = ref < Array < Item >>( Array. from ({ length: 10000 }, ( _ , i ) => { return { itemTitle: `item #${ i }` , itemId: i, }; }) ); const selected = ref (); const itemExtractor = ( item : Item ) => { return { ... item, value: item.itemId, text: item.itemTitle, }; }; Controlling the optimized list The list you receive as optimizedList is being filtered based on a page state which is being increased each time user reaches end of the dropdown list. to customize the parameters you can use perPage and paginationOffset props. both are numbers and default to 10 (page) and 40 (paginationOffset) Usage for grouped items When you items are grouped ( for example Country[].City[] ) you can still use paginated list with same props described earlier plus you also need to speicfy itemsKey (default: 'items') and groupIdentifier (default: 'id') . itemsKey is the key where the nested items are located and groupIdentifier is the key to a property which is unique to each group. For example if we want to use in the following example as select items [ { title: "UK" , cities: [ { name: "London" , id: 1 }, { name: "Bristol" , id: 2 } ], }, { title: "Russia" , cities: [ { name: "Moscow" , id: 3 }, { name: "Saint Petersburg" , id: 4 }, { name: "Novosibirsk" , id: 5 } ], }, ] we should pass itemsKey="cities" and groupIdentifier="title" . so the result will look something like this: < template > < RSelect :items = "myLongItems" groupIdentifier = "title" itemsKey = "cities" :itemExtractor = "itemExtractor" > < template # default = " { optimizedItems } " > < ROption v-for = "item in optimizedItems" :value = "item.id" :text = "item.title" /> < script setup > const myLongItems = ref ([ { title: "UK" , cities: [ { name: "London" , id: 1 }, { name: "Bristol" , id: 2 } ], }, { title: "Russia" , cities: [ { name: "Moscow" , id: 3 }, { name: "Saint Petersburg" , id: 4 }, { name: "Novosibirsk" , id: 5 } ], }, ]) const itemExtractor = ( item ) => { return { ... item, value: item.id, text: item.title }; }; < template > < RSelect v-model = "selected" :items = "items" :itemExtractor = "itemExtractor" searchable label = "Select with 1k items 10 children each" groupIdentifier = "groupUniqueId" itemsKey = "children" > < template # default = " { optimizedItems } " > < RSelectGroup v-for = "item in optimizedItems" :title = "item.title" > < ROption v-for = "child in item.children" :value = "child.itemValue" :text = "child.itemText" /> type Item = { itemValue : string ; itemText : string ; }; type Group = { groupUniqueId : number ; title : string ; children : Item []; }; const items = ref < Group []>( Array. from ({ length: 1000 }, ( _ , i ) => { return { groupUniqueId: i, title: `Group ${ i }` , children: Array. from ({ length: 10 }, ( _ , childIndex ) => { return { itemValue: `${ i } - ${ childIndex }` , itemText: `Item #${ i } - ${ childIndex }` , }; }), }; }) ); const selected = ref (); const itemExtractor = ( item : Item ) => { return { ... item, value: item.itemValue, text: item.itemText, }; }; Creating Options You can allow user to create new option. to do so you need to add canCreateOption to RSelect and use the newOption prop which is a function that will be called whenever user has something typed on search input and pressed Enter. the type of function is ({newOption: string, isAlreadyInValue: boolean, isAlreadyInOptions: boolean}): Promise < boolean > | boolean newOption is what user has type in input. isAlreadyInValue looks in modelValue for the typed string and is true if there is the same item on modelValue . isAlreadyInOptions looks in options state by value key of each option and is true if there is any item. Returning true closes the dropdown and resets search (if keepOpenAfterSelection is false). Using noDropdown prop you can hide dropdown if it's only for making new items. in order to handle new items you check if item is not already a selected value which means isAlreadyInValue is false and push new items to modelValue ( if it's multiple selection ). you can push the newly create item to list of your options or use setSelectedItems exposed method for updating selected values. You need to pass either items prop or have ROption in the default slot unless noDropdown is true . const onNewOption = ({ newOption , isAlreadyInValue , isAlreadyInOptions }) => { // 1. Update v-model if ( ! isAlreadyInValue) { selectedItems.value. push (newOption); } // 2. Update list of options // if dropdown is hidden you can skip checking if there is already same item in list. items.value. push ({ text: newOption, value: newOption, }); // 2 alternative: You can also use exposed function of `setSelectedItems` if you do not care about the options. but you MUST make sure it's called after vModel is updated. for example using nextTick: // nextTick(() => { // selectRef.value.setSelectedItems([ // { // value: newOption, // text: newOption, // }, // ]); // }); // Should return a boolean to specify whether it was successfull or not return true }; < template > < div class = "item" > < div class = "description" >Without dropdown and we do not care about < code >items prop or < code >ROption < pre class = "preview" >{{ selected }} < div class = "select-container" > < RSelect v-model = "selected" label = "Create Items By Pressing Enter" multiple searchable canCreateOption :onNewOption = "onNewOption" ref = "selectRef" noDropdown > < div class = "item" > < div class = "description" >With dropdown and we add new option to list of options < pre class = "preview" >{{ selected2 }} < div class = "select-container" > < RSelect v-model = "selected2" label = "Create Items By Pressing Enter" multiple searchable canCreateOption @newOption = "onNewOption2" > < ROption v-for = "item in items2" :value = "item.value" :text = "item.text" /> interface NewOption { newOption : string ; isAlreadyInValue : boolean ; isAlreadyInOptions : boolean ; } // EXAMPLE 1: const selected = ref < string []>([]); const selectRef = ref (); const onNewOption = ({ newOption , isAlreadyInValue } : NewOption ) => { if ( ! isAlreadyInValue) { selected.value. push (newOption); } // since we are not adding `items` prop OR we are not providing `ROption` in default slot we need to use `setSelectedItems` to update the value shown to user nextTick (() => { selectRef.value. setSelectedItems ([ { text: newOption, value: newOption, }, ]); }); return true ; }; // EXAMPLE 2 const selected2 = ref < Array < string >>([]); const items2 = ref ([ { text: "item 1" , value: "item 1" }, { text: "item 2" , value: "item 2" }, { text: "item 3" , value: "item 3" }, { text: "item 4" , value: "item 4" }, ]); const onNewOption2 = ({ newOption , isAlreadyInValue , isAlreadyInOptions } : NewOption ) => { if ( ! isAlreadyInValue) { selected2.value. push (newOption); } if ( ! isAlreadyInOptions) { // isAlreadyInOptions checks the value of each existing item with the typed value by user. you can use your own comparing to check // if item is already exisiting items2.value. push ({ text: newOption, value: newOption, }); } return true ; }; The reason creating new options is not handled in RSelect itself and leaves the calculation of adding new items to developer is because it gives more flexibility to using the custom format on your v-model or list of options. State Refer to Input State Props Name Type Required Default Value Description searchable boolean No false If true, allows users to search for and select options from a dropdown menu. multiple boolean No false If true, allows users to select multiple options from the dropdown menu. modelValue array | number | string Yes undefined The selected value(s) of the dropdown menu. If multiple is set to true, an array of values is expected. placeholder string No "" The text displayed inside the dropdown menu when no options are selected. disabled boolean No false If true, disables the dropdown menu. label string No undefined The label displayed above the dropdown menu. keepOpenAfterSelection boolean No false If true, keeps the dropdown menu open after a selection has been made. color string No undefined The color of the Select. error boolean No false If true, adds error styling. message string No undefined The message displayed below the dropdown menu. inputProps object of any No undefined Props to pass down to input noDropdownOnEmptySearch boolean No undefined When search value is empty dropdown will not show (or hide of it is was open) noDropdown boolean No undefined whether do show a dropdown or not. can be usefull when user can create options by itself canCreateOption boolean No undefined if true, newOption will be visible as user starts typing on search field and newOption event will be emitted on click of new option or clicking enter loading boolean No undefined Loading state on select ( shows a spinner instead of chevron ) renderPlaceholder (parameter: Option | Option[]) => string No Custom Placeholder When some value is seleted this placeholder will be shown customSearch (parameter: string) => void No undefined called when input text changes. you can use this function to filter your items from an API or change search behaviour items any[] No undefined if provided will Optimized Items will be used itemsKey string No 'items' used for when using optimized items and list is nested ( grouped ) Usage for grouped items groupIdentifier string No 'id' used for when using optimized items and list is nested ( grouped ) Usage for grouped items paginationOffset number No 40 distance from bottom in pixels to trigger rendering new items perPage number No 10 number of items per page on optimized list itemExtractor (parameter: any) => Option No undefined used when format of item do not match the format of ROption props ( missing value ): Optimized Items dropdownClass string No undefined extra classes to pass down to dropdown ( since it's rendered on body you need to specify global styles for it. ) onNewOption (arg0: { newOption: string; isAlreadyInValue: boolean; isAlreadyInOptions: boolean }) => Promise | boolean No undefined Used for adding new items ( tags ). if returns true dropdown will close and search input resets. otherwise both will stay popperOptions - No undefined extra options to pass to popper instance Events Event Arguments Description open - Called when dropdown opens. close - Called when dropdown closes. afterTransitionEnd - Called when dropdown close transition is done. search - Called search input value changes. Exposed Name value description setSelectedItems (Option[]): void Function for setting selected items (usefull when items are not available but there are some values selected) rInput InstanceType\ The input of RSelect (can be usefull for calling methods of RInput ). open () => void function for opening dropdown close (resetSearch: boolean = true, blur: boolean = true) => void function for closing dropdown resetSearch () => void function for clearing search input RSelect Slots Name slot props description default {optimizedItems} For rendering ROption or RSelectGroup . will have optimizedItems if :items prop is available selectedItem { ...option, remove } For rendering custom tags on multiple selection noItems - When there are no options before - before slot of RInput inputIcon - icon slot of RInput toggleIcon {toggleOpen, active, loading} custom toggle icon loadingSpinner {loading} custom loading spinner newOption {addNewOption, search} will be visible if canCreateOption is true and search is not empty. ROption Props Name Type Required Default Value Description value string | number Yes 0 Value of option. text string No "" Text of option. disabled boolean no false Whether item is disabled or not. color string no undefined Color of option. context Record no undefined Any custom object to later be used. RSelectGroup Props Name Type Required Default Value Description title string No undefined Title of group keepTitleOnSearch boolean No undefined By default title hides when search input is not empty, if set to true you'd better hide it's options when there are no children available RSelectGroup Slots Name slot props description default - For rendering ROption s header - Header of group. ( will replace title and ignores both title and keepTitleOnSearch props ) .dark .ct-935781{color:#C9D1D9;} .ct-935781{color:#24292F;} .dark .ct-238295{color:#7EE787;} .ct-238295{color:#116329;} .dark .ct-081784{color:#FFA198;font-style:italic;} .ct-081784{color:#82071E;font-style:italic;} .dark .ct-998471{color:#79C0FF;} .ct-998471{color:#0550AE;} .dark .ct-667011{color:#A5D6FF;} .ct-667011{color:#0A3069;} .dark .ct-942366{color:#FF7B72;} .ct-942366{color:#CF222E;} .dark .ct-923966{color:#D2A8FF;} .ct-923966{color:#8250DF;} .dark .ct-443230{color:#FFA657;} .ct-443230{color:#953800;} .dark .ct-128513{color:#8B949E;} .ct-128513{color:#6E7781;}

Sevue