MSelect (.MSELECT)

A Vue custom Select element with search and validation.

Preview

Label1

Label2

Label3

Label4

Label5

Attributes

Name	type	optional	description
options	OptionAttrs[]	false	to specify select options
v-model	-	false	to bind the input to a variable
id	string	false	required for validating when using with MForm
required	boolean	true	use it to mark the field as required in MForm
placeholder	string	true	search placeholder
multiple	boolean	true	to allow multiple choices
bordered	boolean	true	to get the bordered looking input
pattern	RegEx	true	use it to validate the user input with a specific pattern (indicates that this input is required)
invalidMessage	string	true	write a message for invalid input
validMessage	string	true	write a message for valid input
label	string	true	to add a label to your input
transformer	(string) => string	true	to perform some transforming function on the text
maxLength	number	true	to add a maxlength and a counter
freeOptions	boolean	true	to allow users adding extra options

Usage

Make sure your data follow the OptionAttrs interface:

interface OptionAttrs {
  selected?: boolean;
  disabled?: boolean;
  value: string;
  label: string;
}

after that, you can add the data to the MSelect as in the example:

<MSelect
  id="preview-select"
  placeholder="MSelect"
  bordered
  :options="[
    { value: 'Option1', label: 'Label1', selected: true },
    { value: 'Option2', label: 'Label2', disabled: true },
    { value: 'Option3', label: 'Label3' },
    { value: 'Option4', label: 'Label4' },
    { value: 'Option5', label: 'Label5' },
  ]"
  v-model="selectedOption"
>
  <template #start>
    <i class="fas fa-caret-down"></i>
  </template>
</MSelect>