Enter characters with the mouse or keyboard.

Warning

Input is a controlled component; it always displays the Vue bound value.

Usually, handle the input event and update the component bound value (or use v-model). Otherwise, the value displayed in Input will not change.

v-model modifiers are not supported.

Basic Usage

The default decimalPlaces value is 2.

<fx-row style="margin-bottom:10px;">
  <fx-col :span="8">
    <label class="label">text: </label>
    <fx-input v-model="input" placeholder="Please enter content" maxlength="10" @change="onChange"></fx-input>
  </fx-col>
  <fx-col :span="8">
    <label class="label">number: </label>
    <fx-input v-model="input_number" type="number" placeholder="Please enter content" @change="onChange"></fx-input>{{input_number}}
  </fx-col>
  <fx-col :span="8">
    <label class="label">percent: </label>
    <fx-input v-model="percent" type="percent" :decimal-places="4" placeholder="percent">
      <span class="el-input__icon" slot="suffix">%</span>
    </fx-input>{{percent}}
  </fx-col>
</fx-row>
<fx-row style="margin-bottom:10px;">
  <fx-col :span="12">
    <label class="label">currency: </label>
    <fx-input v-model="currency" type="currency" placeholder="currency">
      <span class="el-input__icon" slot="suffix">$</span>
    </fx-input>{{currency}}
  </fx-col>
</fx-row>


<script>
export default {
  data() {
    return {
      input: '',
      input_number:22,
      currency:123.0,
      percent:'123.00',
    }
  },
  methods:{
    onChange(val){
      console.log('onChange...',val)
    }
  }
}
</script>

Display Input Values as Tags

<fx-input
  placeholder="Please enter content"
  v-model="tagInput"
  :collapse-tags="true"
  @change="onChange"
  width="240px"
  >
</fx-input>
&nbsp;&nbsp;
<!-- <fx-input
  placeholder="Please enter content"
  v-model="tagInput"
  :collapse-tags="true"
  @change="onChange"
  width="240px"
  size="medium"
  >
</fx-input>&nbsp;&nbsp;
<fx-input
  placeholder="Please enter content"
  v-model="tagInput"
  :collapse-tags="true"
  @change="onChange"
  width="240px"
  size="small"
  >
</fx-input> -->
 
<script>
export default {
  data() {
    return {
      tagInput:[]
    }
  },
  methods: {
    onChange(val){
      console.log('onChange...',val,this.tagInput)
    }
  }
}
</script>

Disabled State

<fx-input
  placeholder="Please enter content"
  v-model="input"
  :disabled="true">
</fx-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

Clearable

<fx-input
  placeholder="Please enter content"
  v-model="input"
  clearable>
</fx-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Password Box

<fx-input placeholder="Please enter password" v-model="input" show-password></fx-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

Input with Icon

Input type with icon badge

<div class="demo-input-suffix">
  Property method: 
  <fx-input
    placeholder="Please select date"
    suffix-icon="el-icon-date"
    v-model="input1">
  </fx-input>
  <fx-input
    placeholder="Please enter content"
    prefix-icon="el-icon-search"
    v-model="input2">
  </fx-input>
</div>
<div class="demo-input-suffix">
  slot method: 
  <fx-input
    placeholder="Please select date"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </fx-input>
  <fx-input
    placeholder="Please enter content"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </fx-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>

Textarea

Used to enter multi-line text. Set the value of the type property to textarea.

<fx-input
  type="textarea"
  :rows="2"
  placeholder="Please enter content"
  v-model="textarea">
</fx-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

Textarea with Adaptive Text Height

Set the autosize property to make the textarea height automatically adjust according to the text content. autosize can also be set to an object to specify the minimum and maximum number of rows.

<fx-input
  type="textarea"
  autosize
  placeholder="Please enter content"
  v-model="textarea1">
</fx-input>
<div style="margin: 20px 0;"></div>
<fx-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="Please enter content"
  v-model="textarea2">
</fx-input>

<script>
export default {
  data() {
    return {
      textarea1: '',
      textarea2: ''
    }
  }
}
</script>

Composite Input

Elements can be prepended or appended, usually labels or buttons.

<div>
  <fx-input placeholder="Please enter content" v-model="input1">
    <template slot="prepend">Http://</template>
  </fx-input>
</div>
<div style="margin-top: 15px;">
  <fx-input placeholder="Please enter content" v-model="input2">
    <template slot="append">.com</template>
  </fx-input>
</div>
<div style="margin-top: 15px;">
  <fx-input placeholder="Please enter content" v-model="input3" class="input-with-select">
    <fx-select v-model="select" :options="options" slot="prepend" placeholder="Please select"></fx-select>
    <fx-button slot="append" icon="el-icon-search"></fx-button>
  </fx-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: '',
      options: [{
        value: 'Beijing',
        label: 'Beijing',
      },
      {
        value: 'Shanghai',
        label: 'Shanghai',
        disabled: true,
      },
      {
        value: 'Nanjing',
        label: 'Nanjing',
      }]
    }
  }
}
</script>

Size

<div class="demo-input-size">
  <fx-input
    placeholder="Please enter content"
    suffix-icon="el-icon-date"
    v-model="input1">
  </fx-input>
  <fx-input
    size="medium"
    placeholder="Please enter content"
    suffix-icon="el-icon-date"
    v-model="input2">
  </fx-input>
  <fx-input
    size="small"
    placeholder="Please enter content"
    suffix-icon="el-icon-date"
    v-model="input3">
  </fx-input>
  <fx-input
    size="mini"
    placeholder="Please enter content"
    suffix-icon="el-icon-date"
    v-model="input4">
  </fx-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>

With Input Suggestions

Provides corresponding suggestions based on input content.

<fx-row class="demo-autocomplete">
  <fx-col :span="12">
    <div class="sub-title">Activate to list input suggestions</div>
    <fx-autocomplete
      class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="Please enter content"
      @select="handleSelect"
    ></fx-autocomplete>
  </fx-col>
  <fx-col :span="12">
    <div class="sub-title">Match input suggestions after typing</div>
    <fx-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="Please enter content"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></fx-autocomplete>
  </fx-col>
</fx-row>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // Call callback to return suggestion list data
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food", "address": "Changning District address" },
          { "value": "Hot honey Seoul Fried Chicken", "address": "Shanghai address" },
          { "value": "Hong Kong Cafe", "address": "Shanghai address" },
          { "value": "Longqianjia", "address": "Shanghai address" },
          { "value": "Cupcake ShopnghaiLingkong Store)", "address": "Shanghai address" },
          { "value": "Gong Cha", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Twelve Town", "address": "Shanghai address" },
          { "value": "Espresso Cafe", "address": "Shanghai address" },
          { "value": "Milk Tea Shop", "address": "Jiading District address" },
          { "value": "Dessert and Fried Chicken", "address": "Jiading District address" },
          { "value": "MonicaMotorcycle Theme Cafe", "address": "Jiading District address" },
          { "value": "Tea Shop", "address": "ShanghaiChangning District address" },
          { "value": "NONO JUICE  Fresh Juice", "address": "Shanghai address" },
          { "value": "CoCoCoCo", "address": "Shanghai address" },
          { "value": "Happy Lemon", "address": "Shanghai address" },
          { "value": "Merci Paul cafe", "address": "Shanghai address" },
          { "value": "Musang King", "address": "Shanghai address" },
          { "value": "Coffee Shop", "address": "Shanghai address" },
          { "value": "Restaurant", "address": "Yuanfeng Tianshan Garden" },
          { "value": "Qianji", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Cafe", "address": "Shanghai address" },
          { "value": "Ice Cream Shop", "address": "Changning District address" },
          { "value": "Ice Cream Shop", "address": "Shanghai address" },
          { "value": "Fresh Juice", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Changning District address" },
          { "value": "Spicy Hot Pot", "address": "Changning District address" },
          { "value": "Burger Shop", "address": "Shanghai address" },
          { "value": "Hong Kong Shop", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Beijing Dumpling Restaurant", "address": "Changning District address" },
          { "value": "Restaurant*Light Meal", "address": "Shanghai address" },
          { "value": "Joule·Sichuan Fast Food", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Changning District address" },
          { "value": "Liuyang Steamed Food", "address": "Shanghai address" },
          { "value": "Dumpling Shop", "address": "Shanghai address" },
          { "value": "Sakura Restaurant", "address": "Shanghai address" },
          { "value": "Yifenmi Hakka Rice Noodles", "address": "Shanghai address" },
          { "value": "Roast Meat Shop", "address": "Shanghai address" },
          { "value": "Braised Chicken Rice", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "(Yang Fried Dumplings", "address": "Changning District address" },
          { "value": "Yangyang Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Lobster Rice Bowl", "address": "Shanghai address" }
        ];
      },
      handleSelect(item) {
        console.log(item,this.state1);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

Custom Template

The display of input suggestions can be customized.

<fx-autocomplete
  popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="Please enter content"
  @select="handleSelect">
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</fx-autocomplete>

<style>
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>

<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // Call callback to return suggestion list data
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food", "address": "Changning District address" },
          { "value": "Hot honey Seoul Fried Chicken", "address": "Shanghai address" },
          { "value": "Hong Kong Cafe", "address": "Shanghai address" },
          { "value": "Longqianjia", "address": "Shanghai address" },
          { "value": "Cupcake ShopnghaiLingkong Store)", "address": "Shanghai address" },
          { "value": "Gong Cha", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Twelve Town", "address": "Shanghai address" },
          { "value": "Espresso Cafe", "address": "Shanghai address" },
          { "value": "Milk Tea Shop", "address": "Jiading District address" },
          { "value": "Dessert and Fried Chicken", "address": "Jiading District address" },
          { "value": "MonicaMotorcycle Theme Cafe", "address": "Jiading District address" },
          { "value": "Tea Shop", "address": "ShanghaiChangning District address" },
          { "value": "NONO JUICE  Fresh Juice", "address": "Shanghai address" },
          { "value": "CoCoCoCo", "address": "Shanghai address" },
          { "value": "Happy Lemon", "address": "Shanghai address" },
          { "value": "Merci Paul cafe", "address": "Shanghai address" },
          { "value": "Musang King", "address": "Shanghai address" },
          { "value": "Coffee Shop", "address": "Shanghai address" },
          { "value": "Restaurant", "address": "Yuanfeng Tianshan Garden" },
          { "value": "Qianji", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Cafe", "address": "Shanghai address" },
          { "value": "Ice Cream Shop", "address": "Changning District address" },
          { "value": "Ice Cream Shop", "address": "Shanghai address" },
          { "value": "Fresh Juice", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Changning District address" },
          { "value": "Spicy Hot Pot", "address": "Changning District address" },
          { "value": "Burger Shop", "address": "Shanghai address" },
          { "value": "Hong Kong Shop", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Beijing Dumpling Restaurant", "address": "Changning District address" },
          { "value": "Restaurant*Light Meal", "address": "Shanghai address" },
          { "value": "Joule·Sichuan Fast Food", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Changning District address" },
          { "value": "Liuyang Steamed Food", "address": "Shanghai address" },
          { "value": "Dumpling Shop", "address": "Shanghai address" },
          { "value": "Sakura Restaurant", "address": "Shanghai address" },
          { "value": "Yifenmi Hakka Rice Noodles", "address": "Shanghai address" },
          { "value": "Roast Meat Shop", "address": "Shanghai address" },
          { "value": "Braised Chicken Rice", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "(Yang Fried Dumplings", "address": "Changning District address" },
          { "value": "Yangyang Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Lobster Rice Bowl", "address": "Shanghai address" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

Remote Search

Search data from the server.

<fx-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="Please enter content"
  @select="handleSelect"
></fx-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },
    methods: {
      loadAll() {
        return [
          { "value": "Sanquan Fresh Food", "address": "Changning District address" },
          { "value": "Hot honey Seoul Fried Chicken", "address": "Shanghai address" },
          { "value": "Hong Kong Cafe", "address": "Shanghai address" },
          { "value": "Longqianjia", "address": "Shanghai address" },
          { "value": "Cupcake ShopnghaiLingkong Store)", "address": "Shanghai address" },
          { "value": "Gong Cha", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Twelve Town", "address": "Shanghai address" },
          { "value": "Espresso Cafe", "address": "Shanghai address" },
          { "value": "Milk Tea Shop", "address": "Jiading District address" },
          { "value": "Dessert and Fried Chicken", "address": "Jiading District address" },
          { "value": "MonicaMotorcycle Theme Cafe", "address": "Jiading District address" },
          { "value": "Tea Shop", "address": "ShanghaiChangning District address" },
          { "value": "NONO JUICE  Fresh Juice", "address": "Shanghai address" },
          { "value": "CoCoCoCo", "address": "Shanghai address" },
          { "value": "Happy Lemon", "address": "Shanghai address" },
          { "value": "Merci Paul cafe", "address": "Shanghai address" },
          { "value": "Musang King", "address": "Shanghai address" },
          { "value": "Coffee Shop", "address": "Shanghai address" },
          { "value": "Restaurant", "address": "Yuanfeng Tianshan Garden" },
          { "value": "Qianji", "address": "Shanghai address" },
          { "value": "Tea Shop", "address": "Shanghai address" },
          { "value": "Cafe", "address": "Shanghai address" },
          { "value": "Ice Cream Shop", "address": "Changning District address" },
          { "value": "Ice Cream Shop", "address": "Shanghai address" },
          { "value": "Fresh Juice", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Shanghai address" },
          { "value": "Fruit Store", "address": "Changning District address" },
          { "value": "Spicy Hot Pot", "address": "Changning District address" },
          { "value": "Burger Shop", "address": "Shanghai address" },
          { "value": "Hong Kong Shop", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Beijing Dumpling Restaurant", "address": "Changning District address" },
          { "value": "Restaurant*Light Meal", "address": "Shanghai address" },
          { "value": "Joule·Sichuan Fast Food", "address": "Shanghai address" },
          { "value": "Fried Chicken Shop", "address": "Changning District address" },
          { "value": "Liuyang Steamed Food", "address": "Shanghai address" },
          { "value": "Dumpling Shop", "address": "Shanghai address" },
          { "value": "Sakura Restaurant", "address": "Shanghai address" },
          { "value": "Yifenmi Hakka Rice Noodles", "address": "Shanghai address" },
          { "value": "Roast Meat Shop", "address": "Shanghai address" },
          { "value": "Braised Chicken Rice", "address": "Shanghai address" },
          { "value": "Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "(Yang Fried Dumplings", "address": "Changning District address" },
          { "value": "Yangyang Spicy Hot Pot", "address": "Shanghai address" },
          { "value": "Lobster Rice Bowl", "address": "Shanghai address" }
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  };
</script>

Input Length Limit

<fx-input
  type="text"
  placeholder="Please enter content"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</fx-input>
<div style="margin: 20px 0;"></div>
<fx-input
  type="textarea"
  placeholder="Please enter content"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</fx-input>

<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    }
  }
}
</script>

Input Attributes

Parameter	Description	Type	Optional Values	Default
type	Type	string	text, textarea, and other native input type values	text
value / v-model	Bound value. When collapse-tags is true, the value is an array	string / number/array	-	-
maxlength	Native attribute, maximum input length	number	-	-
minlength	Native attribute, minimum input length	number	-	-
show-word-limit	Whether to show input word count; only enabled when type = "text" or type = "textarea"	boolean	-	false
placeholder	Input placeholder text	string	-	-
clearable	Whether clearable	boolean	-	false
show-password	Whether to show the password toggle icon	boolean	-	false
disabled	Disabled	boolean	-	false
size	Input size, Only enabled when type!="textarea"	string	medium / small / mini	-
prefix-icon	Input prefix icon	string	-	-
suffix-icon	Input suffix icon	string	-	-
rows	Input rows; only enabled for type="textarea"	number	-	2
autosize	Adaptive content height; only enabled for type="textarea". An object can be passed, such as	boolean / object	-	false
autocomplete	Native attribute, autocomplete	string	on, off	off
auto-complete	Deprecated in the next major version	string	on, off	off
name	Native attribute	string	-	-
readonly	Native attribute, whether read-only	boolean	-	false
max	Native attribute, sets the maximum value	-	-	-
min	Native attribute, sets the minimum value	-	-	-
step	Native attribute, sets the legal number interval for the input field	-	-	-
resize	Controls whether it can be resized by the user	string	none, both, horizontal, vertical	-
autofocus	Native attribute, automatically gets focus	boolean	true, false	false
form	Native attribute	string	-	-
label	Label text associated with the input	string	-	-
tabindex	Input tabindex	string	-	-
validate-event	Whether to trigger form validation on input	boolean	-	true
collapse-tags	When set to true, input values are displayed as tags and the value is an array	boolean	-	false
is-blur-fold	After collapse-tags is set to true, setting this value to true collapses Input after it loses focus; false means no collapse	boolean	-	true
validate-when-input	Triggers Form validation on input	boolean	-	true
validate-when-blur	Triggers Form validation on blur	boolean	-	false

Input Slots

name	Description
prefix	Input prefix content; only enabled for type="text"
suffix	Input suffix content; only enabled for type="text"
prepend	Input prepend content; only enabled for type="text"
append	Input append content; only enabled for type="text"

Input Events

Event Name	Description	Callback Parameters
blur	Triggered when Input loses focus	(event: Event)
focus	Triggered when Input gains focus	(event: Event)
change	Triggered when Input value changes	(value: string | number)
clear	Triggered when clicking the clear button generated by the clearable property	-

Input Methods

Method	Description	Parameters
focus	Focuses the input	-
blur	Blurs the input	-
select	Selects the text in the input	-

Autocomplete Attributes

Parameter	Description	Type	Optional Values	Default
placeholder	Input placeholder text	string	-	-
disabled	Disabled	boolean	-	false
value-key	Key name used for display in the suggestion object	string	-	value
value	Required value, input bound value	string	-	-
debounce	Debounce delay for getting input suggestions	number	-	300
placement	Menu popup placement	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-start
fetch-suggestions	Method that returns input suggestions. Return them by calling callback(data:[]) only when your suggestion data resolves	Function(queryString, callback)	-	-
popper-class	Class name of the Autocomplete dropdown list	string	-	-
trigger-on-focus	Whether to show the suggestion list when Input is focused	boolean	-	true
name	Native attribute	string	-	-
select-when-unmatched	Whether pressing Enter triggers the select event when the input has no matching suggestions	boolean	-	false
label	Label text associated with the input	string	-	-
prefix-icon	Input prefix icon	string	-	-
suffix-icon	Input suffix icon	string	-	-
hide-loading	Whether to hide the loading icon during remote loading	boolean	-	false
popper-append-to-body	Whether to append the dropdown list to the body element. If dropdown positioning has issues, set this property to false	boolean	-	true
highlight-first-item	Whether to highlight the first remote search suggestion by default	boolean	-	false

Autocomplete Slots

name	Description
prefix	Input prefix content
suffix	Input suffix content
prepend	Input prepend content
append	Input append content

Autocomplete Scoped Slot

name	Description
-	Custom input suggestion. Parameter is

Autocomplete Events

Event Name	Description	Callback Parameters
select	Triggered when clicking to select a suggestion item	Selected suggestion item

Autocomplete Methods

Method	Description	Parameters
focus	Focuses the input	-