> ## 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.
# SelectBox
```python theme={null}
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])
```
## 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
```json theme={null}
{
"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.
**field clearable:** bool | None = None;
Determines if the select box has a clearable option.
**field color:** str | None = None;
Color of the select box. Can be custom or standard Material color.
**field component:** str = 'v-select';
Vue component name.
**field dense:** bool | None = None;
Determines if the select box is dense.
**field disabled:** bool | None = None;
Determines if the select box is disabled.
**field items:** List\[str | int] \[Required];
Options for the select box. Can be a list of strings or integers.
**field label:** str | None = None;
Label for the select box.
**field multiple:** bool | None = None;
Determines if multiple selections are allowed.
**field outlined:** bool | None = None;
Determines if the select box has an outlined style.
**field readonly:** bool | None = None;
Determines if the select box is read-only.
**field triggerEvent:** str = 'update:modelValue';
Trigger event for when to trigger a run.
**field value:** List\[str | int | None] | None | str | int = None;
Selected options for the select box.
**classmethod from\_dict:** (items\_map: dict, id: str, value: str | int | None = None, label: str | None = None, multiple: bool | None = None, dense: bool | None = None, outlined: bool | None = None, clearable: bool | None = None, disabled: bool | None = None, readonly: bool | None = None, color: str | None = None, triggerEvent: str = 'update:modelValue');
classmethod *get\_value\_from\_global\_state*(value, values)