Documentation
Documentation Hub

Radius

Autocomplete can have different radius factors. The default radius is sm but you can also use md, lg or full.

Default props of all <BaseAutocomplete> can be set in your <app>/app.config.ts.
Show code
vue

Size

Autocomplete can have different sizes. Use the size prop to change the size of the autocomplete.

Show code
vue

Contrast:default+

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Show code
vue

Contrast:muted

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Show code
vue

Contrast:muted+

Autocomplete can have different contrasts. Use the contrast prop to change the contrast of the autocomplete.

Show code
vue

Error

Autocomplete can have an error state using the error prop. Use the error prop to display an error message.

Please select a framework
Please select a framework
Please select a framework
Show code
vue

Icon

Autocomplete can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

Show code
vue

Clearable

Clearable autocomplete have a clear icon that appears on the right side using the clearable prop. The clear icon is also configurable using the clearIcon prop.

Show code
vue

Allow create

You can allow the user to create new items by setting the allow-create prop to true. When the user types a new value and presses Enter, a new item is created.

Show code
vue

Multiple

Autocomplete can be configured to allow multiple values and item selection using the multiple prop.

  • Nuxt
  • Vue.js
Show code
vue

Country:single

Autocomplete can be used as a country selector using the items prop. The items prop accepts an array of objects with a text and value property.

Show code
vue

Country:multiple

Autocomplete can be used as a country selector using the items prop. The items prop accepts an array of objects with a text and value property.

Show code
vue

Label:float

Autocomplete can have a material design style floating label using the labelFloat prop.

Show code
vue

Loading

Autocomplete can be showed in a loading state using the loading prop.

Show code
vue

Disabled

Autocomplete can be disabled using the disabled prop.

Show code
vue

#<BaseAutocomplete>

•Model

v-model
Show example
vue

•Properties

allow-create
Allow custom entries by the user
Show example
vue
chip-clear-icon
The icon to show in the chip buttons
Show example
vue
classes
Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
Show example
vue
clearable
Whether the component can be cleared by the user.
Show example
vue
clear-icon
The icon to show in the clear button
Show example
vue
clear-value
Value used when clearing the component value.
Show example
vue
color-focus
Wether the border should change color when focused
Show example
vue
disabled
Whether the component is disabled.
Show example
vue
display-value
A function used to render the items as strings in either the input or the tag when multiple is true.
Show example
vue
dropdown
Display a chevron icon to open suggestions
Show example
vue
dropdown-icon
The icon to show in the dropdown button
Show example
vue
error
Error text to display when the component is in an error state.
Show example
vue
filter-debounce
The debounce time for the filterItems method.
Show example
vue
filter-items
A function to filter the items when query is changed. You can use this method to implement your own filtering logic or to fetch items from an API.
Show example
vue
fixed
Used a fixed strategy to float the component
Show example
vue
hide-create-prompt
Hide the create custom prompt (just set the model to the value entered)
Show example
vue
icon
An icon to display for the component.
Show example
vue
items
The items to display in the component.
Show example
vue
label
The label to display for the component.
Show example
vue
label-float
If the label should be floating.
Show example
vue
loading
Whether the component is in a loading state.
Show example
vue
multiple
Whether the component allows multiple selections.
Show example
vue
placeholder
Placeholder text to display when the component is empty.
Show example
vue
placement
The placement of the component via floating-ui.
Show example
vue
properties
The properties to use for the value, label, sublabel, media, and icon of the options items.
Show example
vue

•Properties (with app.config)

rounded
The radius of the component.

@since

2.0.0

Show example
vue
contrast
The contrast of autocomplete component.
Show example
vue
i18n
Translation strings.
Show example
vue
size
The size of the autocomplete component.
Show example
vue

•Events

@keydown
Show example
vue

•Slots

#item
Show example
vue
#label
Show example
vue
#pending
Show example
vue
#empty
Show example
vue
#start-item
Show example
vue
#end-item
Show example
vue
#create-item
Show example
vue
#autocomplete-multiple-list-item
Show example
vue
#icon
Show example
vue
#clear-icon
Show example
vue
#dropdown-icon
Show example
vue

Results:icon

Autocomplete can render results with icons using the <BaseAutocompleteItem> component. The component accepts an icon prop that is displayed in the results list.

Show code
vue

Results:media

Autocomplete can render results with images using the <BaseAutocompleteItem> component. The component accepts a media prop that is displayed in the results list.

Show code
vue

#<BaseAutocompleteItem>

•Properties

active
Whether the item is focus/hover or not.
Show example
vue
item
The items to display in the component.
Show example
vue
mark
CSS Class applied to the matching part of the text.
Show example
vue
properties
The properties to use for the value, label, sublabel, media, and icon of the options items.
Show example
vue
selected
Whether the item is selected or not.
Show example
vue
selected-icon
The icon to show when the component is selected.
Show example
vue

•Properties (with app.config)

rounded
The radius of the component.

@since

2.0.0

Show example
vue

•Slots

#selected-icon
Show example
vue