Radius

Autocompletes 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

Size

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

Show code

Contrast:default+

Autocompletes can have different contasts. Use the contrast prop to change the contrast of the autocomplete.

Show code

Contrast:muted

Autocompletes can have different contasts. Use the contrast prop to change the contrast of the autocomplete.

Show code

Contrast:muted+

Autocompletes can have different contasts. Use the contrast prop to change the contrast of the autocomplete.

Show code

Error

Autocompletes can have 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

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

Multiple

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

  • Nuxt
  • Vue.js
Show code

Country:single

Autocompletes 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

Country:multiple

Autocompletes 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

Label:float

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

Show code

Loading

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

Show code

Disabled

Autocompletes can be disabled using the disabled prop.

Show code
This component has no props

Results:icon

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

Results:media

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
This component has no props