Skip to main content

Example Usage

import zero_true as zt

# Create a SelectBox component
select_box = zt.SelectBox(
  id="sample_select_box",
  clearable=True,                      # Determines if the select box has a clearable option
  color="primary",                     # Color of the select box
  dense=True,                          # Determines if the select box is dense
  disabled=False,                      # Determines if the select box is disabled
  items=["Option 1", "Option 2", "Option 3"],  # Options for the select box
  label="Choose an option",            # Label for the select box
  multiple=False,                      # Determines if multiple selections are allowed
  outlined=True,                       # Determines if the select box has an outlined style
  readonly=False,                      # Determines if the select box is read-only
  triggerEvent="update:modelValue",    # Trigger event for when to trigger a run
  value=None                           # Selected options for the select box
)

# Assuming you have a mechanism to render or use this SelectBox within a layout
layout = zt.Layout(components=[select_box])

Example Output

Overview

pydantic model zero_true.SelectBox The SelectBox component is essential for user interfaces that require options selection. It supports both single and multiple selections, offering flexibility for different use cases such as filters, settings, or forms. Features like clearable selections, custom colors, and dense styling make this component adaptable and user-friendly.
It can be configured to be readonly or disabled as needed, and its ability to trigger backend actions on value updates makes it a dynamic tool for real-time applications.

JSON Schema

{
   "title": "SelectBox",
   "description": "SelectBox component allows users to select from a list of options. Can be a single or multiple selection",
   "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-select",
         "description": "Vue component name",
         "title": "Component",
         "type": "string"
      },
      "items": {
         "description": "Options for the select box. Can be a list of strings or integers",
         "items": {
            "anyOf": [
               {
                  "type": "string"
               },
               {
                  "type": "integer"
               }
            ]
         },
         "title": "Items",
         "type": "array"
      },
      "value": {
         "anyOf": [
            {
               "items": {
                  "anyOf": [
                     {
                        "type": "string"
                     },
                     {
                        "type": "integer"
                     },
                     {
                        "type": "null"
                     }
                  ]
               },
               "type": "array"
            },
            {
               "type": "string"
            },
            {
               "type": "integer"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Selected options for the select box",
         "title": "Value"
      },
      "label": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Label for the select box",
         "title": "Label"
      },
      "multiple": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if multiple selections are allowed",
         "title": "Multiple"
      },
      "dense": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the select box is dense",
         "title": "Dense"
      },
      "outlined": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the select box has an outlined style",
         "title": "Outlined"
      },
      "clearable": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the select box has a clearable option",
         "title": "Clearable"
      },
      "disabled": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the select box is disabled",
         "title": "Disabled"
      },
      "readonly": {
         "anyOf": [
            {
               "type": "boolean"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Determines if the select box is read-only",
         "title": "Readonly"
      },
      "color": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Color of the range slider. Can be custom or standard Material color",
         "pre": true,
         "title": "Color"
      },
      "triggerEvent": {
         "default": "update:modelValue",
         "description": "Trigger event for when to trigger a run",
         "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.SelectBox
Zero True Component

Methods

classmethod get_value_from_global_state(value, values)