> ## Documentation Index
> Fetch the complete documentation index at: https://zero-true.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Autocomplete
```python theme={null}
import zero_true as zt
# Create an Autocomplete component
autocomplete = zt.Autocomplete(
id="sample_autocomplete",
clearable=True, # Determines if the autocomplete box has a clearable option
color="primary", # Color of the autocomplete component
disabled=False, # Determines if the autocomplete box is disabled
items=["Option 1", "Option 2", "Option 3"], # Options for the autocomplete box
label="Search options", # Label for the autocomplete box
multiple=False, # Determines if multiple selections are allowed
readonly=False, # Determines if the autocomplete box is read-only
triggerEvent="update:modelValue", # Trigger event for when to run based on the selected value
value=None # Selected option for the autocomplete box
)
# Assuming you have a mechanism to render or use this Autocomplete within a layout
layout = zt.Layout(components=[autocomplete])
```
## Overview
`pydantic model zero_true.Autocomplete`
The Autocomplete component enhances user experience by enabling searchable select functionality, which is particularly useful when dealing with a large number of options. This component allows users to type and search through available choices, thereby speeding up the selection process.
The ability to clear selections, define multiple selections, and customize the color are additional features that make it versatile and adaptable to various user interface requirements. It can also be set to readonly or disabled states, providing further control over the input process.
## JSON Schema
```json theme={null}
{
"title": "Autocomplete",
"description": "Autocomplete is a select box that allows users to search the available options. \nOptimal for when there are many options to choose from",
"type": "object",
"properties": {
"id": {
"description": "Unique id for a component",
"title": "Id",
"type": "string"
},
"variable_name": {
"default": "",
"description": "Optional variable name associated with a component",
"title": "Variable Name",
"type": "string"
},
"component": {
"default": "v-autocomplete",
"description": "Vue component name",
"title": "Component",
"type": "string"
},
"items": {
"description": "Options for the autocomplete box. Can be a list of strings or integers",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "integer"
}
]
},
"title": "Items",
"type": "array"
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"type": "integer"
},
{
"type": "null"
}
],
"default": "",
"description": "Selected option for the autocomplete box",
"title": "Value"
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Label for the autocomplete box",
"title": "Label"
},
"multiple": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "Determines if multiple selections are allowed",
"title": "Multiple"
},
"clearable": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "Determines if the autocomplete box has a clearable option",
"title": "Clearable"
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "Determines if the autocomplete box is disabled",
"title": "Disabled"
},
"readonly": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "Determines if the autocomplete box is read-only",
"title": "Readonly"
},
"color": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Color of the autocomplete component. Can be custom or standard Material color",
"pre": true,
"title": "Color"
},
"triggerEvent": {
"default": "update:modelValue",
"description": "Trigger event for when to run based on the selected value",
"title": "Triggerevent",
"type": "string"
}
},
"required": [
"id",
"items"
]
}
```
Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.
**field clearable:** bool | None = None;
Determines if the autocomplete box has a clearable option.
**field color:** str | None = None;
Color of the autocomplete component. Can be custom or standard Material color.
**field component:** str = 'v-autocomplete';
Vue component name.
**field disabled:** bool | None = None;
Determines if the autocomplete box is disabled.
**field items:** List\[str | int] \[Required];
Options for the autocomplete box. Can be a list of strings or integers.
**field label:** str | None = None;
Label for the autocomplete box.
**field multiple:** bool | None = None;
Determines if multiple selections are allowed.
**field readonly:** bool | None = None;
Determines if the autocomplete box is read-only.
**field triggerEvent:** str = 'update:modelValue';
Trigger event for when to run based on the selected value.
**field value:** str | int | None = '';
Selected option for the autocomplete box.
classmethod get\_value\_from\_global\_state: (value, values);