Appearance

Input Options ​

Input options allows the user to type text and select an option at the same time

Basic Usage ​

ts
const options = [
  {
    "id": "mg",
    "name": "mg"
  },
  {
    "id": "percent",
    "name": "%"
  }
];
template
<InputOptions :options="options" />

The model value of this component yields both the <Select /> and the <Input /> selected values, as option and value respectively.

Besides that, it includes isValueChange to indicate whether the text value has changed or not, as well as the type to indicate if the change was from the select or input.

ts
modelValue:

Playground ​

Field ​

You can specify properties that will be passed down to the rendered <Field />:

Label ​

template
<InputOptions label="THC value" />

Error and Hint texts ​

template
<InputOptions error-text="I'm an error" />
<InputOptions hint-text="I'm a hint" />

Input ​

You can specify properties that will be passed down to the rendered <Input />:

Type ​

template
<InputOptions type="password" />

Placeholder ​

template
<InputOptions placeholder="Type something..." />

Select ​

You can specify properties that will be passed down to the rendered <Select />:

Options ​

The options property accepts an array of options that can be customized with trackBy and displayBy properties.

ts
const customOptions = [
  {
    "displayProp": "cm",
    "valueProp": "centimeter"
  },
  {
    "displayProp": "in",
    "valueProp": "inch"
  }
];
template
<InputOptions :options="customOptions" trackBy="valueProp" displayBy="displayProp" />

No truncate ​

vue
<template>
  <InputOptions :class="$style.trunc" :noTruncate="true" :options="truncateOptions" />
</template>

<style module>
  .trunc {
    :global(.stash-select) {
      width: 150px;
    }
  }
</style>

Disabled ​

template
<InputOptions disabled />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.