AutoComplete
This component is a dropdown with a list of options. According to the multi property, the user can select one or more items.
The component provides context values with which you can access some internal properties:
$item: This context value represents an item when you define an option item template. Use$item.valueand$item.labelto refer to the value and label of the particular option.
Using AutoComplete
Properties
autoFocus (default: false)
If this property is set to true, the component gets the focus automatically when displayed.
dropdownHeight
This property sets the height of the dropdown list.
emptyListTemplate
This property defines the template to display when the list of options is empty.
enabled (default: true)
This boolean property value indicates whether the component responds to user events (true) or not (false).
initialValue
This property sets the component's initial value.
maxLength
This property sets the maximum length of the input it accepts.
multi (default: false)
The true value of the property indicates if the user can select multiple items.
optionTemplate
This property enables the customization of list items. To access the attributes of a list item use the $item context variable.
placeholder
A placeholder text that is visible in the input field when its empty.
readOnly (default: false)
Set this property to true to disallow changing the component value.
required
Set this property to true to indicate it must have a value before submitting the containing form.
validationStatus (default: "none")
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
|---|---|
valid | Visual indicator for an input that is accepted |
warning | Visual indicator for an input that produced a warning |
error | Visual indicator for an input that produced an error |
Events
didChange
This event is triggered when value of AutoComplete has changed.
gotFocus
This event is triggered when the AutoComplete has received the focus.
lostFocus
This event is triggered when the AutoComplete has lost the focus.
Exposed Methods
focus
This method sets the focus on the AutoComplete.
setValue
You can use this method to set the component's current value programmatically (true: checked, false: unchecked).
value
You can query the component's value. If no value is set, it will retrieve undefined.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-AutoComplete--disabled | none | none |
| backgroundColor-AutoComplete-badge | $color-primary-500 | $color-primary-500 |
| backgroundColor-AutoComplete-badge | $color-primary-500 | $color-primary-500 |
| backgroundColor-AutoComplete-badge--active | $color-primary-500 | $color-primary-500 |
| backgroundColor-AutoComplete-badge--active | $color-primary-500 | $color-primary-500 |
| backgroundColor-AutoComplete-badge--hover | $color-primary-400 | $color-primary-400 |
| backgroundColor-AutoComplete-badge--hover | $color-primary-400 | $color-primary-400 |
| backgroundColor-AutoComplete-default | none | none |
| backgroundColor-AutoComplete-default--hover | none | none |
| backgroundColor-AutoComplete-error | none | none |
| backgroundColor-AutoComplete-error--hover | none | none |
| backgroundColor-AutoComplete-success | none | none |
| backgroundColor-AutoComplete-success--hover | none | none |
| backgroundColor-AutoComplete-warning | none | none |
| backgroundColor-AutoComplete-warning--hover | none | none |
| backgroundColor-item-AutoComplete | $backgroundColor-dropdown-item | $backgroundColor-dropdown-item |
| backgroundColor-item-AutoComplete--active | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| backgroundColor-item-AutoComplete--hover | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| backgroundColor-menu-AutoComplete | $backgroundColor-primary | $backgroundColor-primary |
| backgroundColor-menu-AutoComplete | $backgroundColor-primary | $backgroundColor-primary |
| border-AutoComplete | none | none |
| borderBottom-AutoComplete | none | none |
| borderBottomColor-AutoComplete | none | none |
| borderBottomStyle-AutoComplete | none | none |
| borderBottomWidth-AutoComplete | none | none |
| borderColor-AutoComplete | none | none |
| borderColor-AutoComplete--disabled | none | none |
| borderColor-AutoComplete-default | none | none |
| borderColor-AutoComplete-default--hover | none | none |
| borderColor-AutoComplete-error | none | none |
| borderColor-AutoComplete-error--hover | none | none |
| borderColor-AutoComplete-success | none | none |
| borderColor-AutoComplete-success--hover | none | none |
| borderColor-AutoComplete-warning | none | none |
| borderColor-AutoComplete-warning--hover | none | none |
| borderColor-menu-AutoComplete | $borderColor | $borderColor |
| borderEndEndRadius-AutoComplete | none | none |
| borderEndStartRadius-AutoComplete | none | none |
| borderHorizontal-AutoComplete | none | none |
| borderHorizontalColor-AutoComplete | none | none |
| borderHorizontalStyle-AutoComplete | none | none |
| borderHorizontalWidth-AutoComplete | none | none |
| borderLeft-AutoComplete | none | none |
| color-AutoComplete | none | none |
| borderLeftStyle-AutoComplete | none | none |
| borderLeftWidth-AutoComplete | none | none |
| borderRadius-AutoComplete-default | none | none |
| borderRadius-AutoComplete-error | none | none |
| borderRadius-AutoComplete-success | none | none |
| borderRadius-AutoComplete-warning | none | none |
| borderRadius-menu-AutoComplete | $borderRadius | $borderRadius |
| borderRadius-menu-AutoComplete | $borderRadius | $borderRadius |
| borderRight-AutoComplete | none | none |
| color-AutoComplete | none | none |
| borderRightStyle-AutoComplete | none | none |
| borderRightWidth-AutoComplete | none | none |
| borderStartEndRadius-AutoComplete | none | none |
| borderStartStartRadius-AutoComplete | none | none |
| borderStyle-AutoComplete | none | none |
| borderStyle-AutoComplete-default | none | none |
| borderStyle-AutoComplete-error | none | none |
| borderStyle-AutoComplete-success | none | none |
| borderStyle-AutoComplete-warning | none | none |
| borderTop-AutoComplete | none | none |
| borderTopColor-AutoComplete | none | none |
| borderTopStyle-AutoComplete | none | none |
| borderTopWidth-AutoComplete | none | none |
| borderHorizontal-AutoComplete | none | none |
| borderVerticalColor-AutoComplete | none | none |
| borderVerticalStyle-AutoComplete | none | none |
| borderVerticalWidth-AutoComplete | none | none |
| borderWidth-AutoComplete | none | none |
| borderWidth-AutoComplete-default | none | none |
| borderWidth-AutoComplete-error | none | none |
| borderWidth-AutoComplete-success | none | none |
| borderWidth-AutoComplete-warning | none | none |
| borderWidth-menu-AutoComplete | 1px | 1px |
| boxShadow-AutoComplete-default | none | none |
| boxShadow-AutoComplete-default--hover | none | none |
| boxShadow-AutoComplete-error | none | none |
| boxShadow-AutoComplete-error--hover | none | none |
| boxShadow-AutoComplete-success | none | none |
| boxShadow-AutoComplete-success--hover | none | none |
| boxShadow-AutoComplete-warning | none | none |
| boxShadow-AutoComplete-warning--hover | none | none |
| boxShadow-menu-AutoComplete | $boxShadow-md | $boxShadow-md |
| boxShadow-menu-AutoComplete | $boxShadow-md | $boxShadow-md |
| fontSize-AutoComplete-badge | $fontSize-small | $fontSize-small |
| fontSize-AutoComplete-badge | $fontSize-small | $fontSize-small |
| fontSize-AutoComplete-default | none | none |
| fontSize-AutoComplete-error | none | none |
| fontSize-AutoComplete-success | none | none |
| fontSize-AutoComplete-warning | none | none |
| outlineColor-AutoComplete--focus | none | none |
| outlineOffset-AutoComplete--focus | none | none |
| outlineStyle-AutoComplete--focus | none | none |
| outlineWidth-AutoComplete--focus | none | none |
| paddingHorizontal-AutoComplete-badge | $space-1 | $space-1 |
| paddingVertical-AutoComplete-badge | $space-1 | $space-1 |
| textColor-AutoComplete--disabled | none | none |
| textColor-AutoComplete-badge | $const-color-surface-50 | $const-color-surface-50 |
| textColor-AutoComplete-badge | $const-color-surface-50 | $const-color-surface-50 |
| textColor-AutoComplete-badge--active | none | none |
| textColor-AutoComplete-badge--hover | none | none |
| textColor-AutoComplete-default | none | none |
| textColor-AutoComplete-default--hover | none | none |
| textColor-AutoComplete-error | none | none |
| textColor-AutoComplete-error--hover | none | none |
| textColor-AutoComplete-success | none | none |
| textColor-AutoComplete-success--hover | none | none |
| textColor-AutoComplete-warning | none | none |
| textColor-AutoComplete-warning--hover | none | none |
| textColor-item-AutoComplete--disabled | $color-surface-200 | $color-surface-200 |
| textColor-placeholder-AutoComplete | none | none |
| textColor-placeholder-AutoComplete-default | none | none |
| textColor-placeholder-AutoComplete-error | none | none |
| textColor-placeholder-AutoComplete-success | none | none |
| textColor-placeholder-AutoComplete-warning | none | none |
Variable Explanations
| Theme Variable | Description |
|---|