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 ​

WARNING

If the user cannot take any action to make the field editable, the is-read-only prop should be used instead.

See Disabled vs read-only for details.

template
<InputOptions disabled />

Read Only ​

Similar to disabled fields, read-only fields cannot be edited. However, unlike disabled fields, read-only fields are able to receive focus, but are not intended to become editable.

template
<InputOptions
  is-read-only
  label="Quantity"
  :options="options"
  :model-value="{ value: 10, option: options[0] }"
/>

Custom Input Field ​

You can pass a custom input field to the component by using the default slot.

template
<InputOptions :options="options">
  <template #default="{ fieldId }">
    <CurrencyInput :id="fieldId" v-model="modelValue" hide-prepend />
  </template>
</InputOptions>

API ​

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