Example Usage
Copy
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])
Example Output
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
Field Defenitions
Field Defenitions
Copy
{
"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.
Show properties
Show properties
field clearable
field clearable
field clearable: bool | None = None;
Determines if the autocomplete box has a clearable option.
field color
field color
field color: str | None = None;
Color of the autocomplete component. Can be custom or standard Material color.
field component
field component
field component: str = ‘v-autocomplete’;
Vue component name.
field disabled
field disabled
field disabled: bool | None = None;
Determines if the autocomplete box is disabled.
field items
field items
field items: List[str | int] [Required];
Options for the autocomplete box. Can be a list of strings or integers.
field label
field label
field label: str | None = None;
Label for the autocomplete box.
field multiple
field multiple
field multiple: bool | None = None;
Determines if multiple selections are allowed.
field readonly
field readonly
field readonly: bool | None = None;
Determines if the autocomplete box is read-only.
field triggerEvent
field triggerEvent
field triggerEvent: str = ‘update:modelValue’;
Trigger event for when to run based on the selected value.
field value
field value
field value: str | int | None = ”;
Selected option for the autocomplete box.
Methods
classmethod get_value_from_global_state: (value, values);