Documentation
Documentation Hub

BaseAutocomplete

Autocomplete shapes

Autocompletes can have different shapes. The default shape is rounded but you can also use straight, curved or full shapes.

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

With icon

Autocompletes 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

Clearable

Clearable autocompletes 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

Floating label

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

Show code

Small

Autocompletes can be displayed in a smaller and more compact way using the size prop with the sm value.

Show code

Disabled state

Autocompletes can be disabled using the disabled prop.

Show code

Loading state

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

Show code

Multiple

Autocompletes can be configured to allow multiple value and item selection using the multiple prop.

  • Nuxt
  • Vue.js
Show code

#<BaseAutocomplete>

SlotsΒΆ

#label
Show example
#pending
Show example
#empty
Show example
#start-item
Show example
#item
Show example
#end-item
Show example

ExposedΒΆ

selected
Current selected value.
Show example
filteredItems
Resolved items list.
Show example
query
Current search input query.
Show example
pending
The filterItems pending state.
Show example
clear
Clears the selected value.
Show example
removeItem
Removes an item from the selected value.
Show example

Icon results

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

Show code

Media results

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

Show code

#<BaseAutocompleteItem>

PropertiesΒΆ

value
The items to display in the component.
Show example
shape
The shape of the component.
Show example
mark
CSS Class applied to the matching part of the text.
Show example
selected-icon
The icon to show when the component is selected.
Show example
active
Whether the item is focus/hover or not.
Show example
selected
Whether the item is selected or not.
Show example