Skip to main content

Example Usage

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

{
   "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.
​
zero_true.Autocomplete
Zero True Component

Methods

classmethod get_value_from_global_state: (value, values);
⌘I