Vuersatile Components

Appearance

On this page

InputSelect ​

A plain an simple input select.

Implements mixins RequiredInputMixin and BasicInputMixin.

We will use the following options:

js
const selectOptions = [
  { value: { id: 1, text: "WORKER" }, text: "I'm a worker" },
  { value: { id: 2, text: "FREELANCE" }, text: "I'm a freelance" },
  { value: { id: 3, text: "COMPANY" }, text: "I'm a company" },
  { value: { id: 4, text: "OTHER" }, text: "None of the above" }
]
html
<Card>
    <Form>
        <InputSelect name="select" label="Select an option" placeholder="Select a job..." required :options="selectOptions" />
    </Form>
</Card>

Props ​

  • options. Changes selectable options.
  • optionValueKey (default value) and optionDefaultKey (default text). Changes which values from options will pick-up.
  • allowClear (default false): allows for clearing selected value with a top button.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            required
            allowClear
            :options="selectOptions" />
    </Form>
</Card>
  • allowEmpty (default false): allow empty selection. Similar to required, but allowEmpty has priority.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            allowEmpty
            :options="selectOptions" />
    </Form>
</Card>
  • readOnly (default false): if value is read-only and input select is not selectable.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            readOnly
            :options="selectOptions"
            :initialValue="selectOptions[0].value" />
    </Form>
</Card>
  • resetValueOnOptionsChange (default false): wether to reset selected value if selectable options prop changes.
  • allowSearch (default false): if allow search in selectable options.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            allowSearch
            :options="selectOptions" />
    </Form>
</Card>
  • allowAddOptions (default false): if allow to add a new selectable option from search input.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            allowSearch
            allowAddOptions
            :options="selectOptions" />
    </Form>
</Card>
  • clearWhenDisable (default false): wether to reset selected value if disabled prop changes to enabled.
  • clearWhenOptionsChange (default false): wether to reset selected value if selectable options prop changes.
  • placeholder (default null): text shown when no selected value.
html
<Card>
    <Form>
        <InputSelect name="select" label="Select an option" placeholder="Select your current job status..." required :options="selectOptions" />
    </Form>
</Card>
  • mountOptionsOutside (default false): wether to mount selectable values drop-down outside or inside the component. Inside should be faster, but outside can prevent some glitches when input is on a modal or inside a box with overflow: hidden;.
html
<Card>
    <Form>
        <InputSelect
            name="select"
            label="Select an option"
            placeholder="Select a job..."
            mountOptionsOutside
            :options="selectOptions" />
    </Form>
</Card>

Emits ​

  • changeField. Custom change event.