A select component, designed to be used in forms of vue3 projects

⭐ ag-select

ag-select is a select component, designed to be used in forms of vue3 projects.

? Overview

This project is actually a part of a vue3 component library project that is under development right now. ag-select is a custom component that takes advantage of many features of Vue3 and facilitates two way data binding with v-model.

? Demo

You can check the AG Select Demo Page to see the examples in action.

? Getting Started

For ag-select to work correctly basically you need to provide options array and a placeholder. See the code example below:

<ag-select
   :options="["Ross", "Rachel", "Chandler", "Monica", "Joey", "Phoebe"]"
    placeholder="Select a Friend" v-model="friend">
</ag-select>
<div>
	Model Value : <span  class="value">{{  friend  }}</span>
</div>
<script>
export  default {
	data() {
		return { friend:'' };
	},
};
</script>

? Features

• Two way data binding with v-model capability
• Works fine with either array of objects or array of strings and numbers
• Polished UX with CSS transitions on all UI events
• Automatically positions option list according to space available above or below the select wrapper
• Optional search capabality
• Clear the state and model ✖️ button.

   

? Props

GitHub

View Github