Components
Text Input
Components
Text Input
Learn how to use the TextInput component in your applications
Example Usage
import zero_true as zt
# Create a TextInput component
text_input = zt.TextInput(
id="sample_text_input",
disabled=False, # If true, the input is disabled
hint="Press Enter to Submit", # Hint text for the text input
label="Enter Text", # Label for the text input
placeholder="Type here...", # Placeholder text
readonly=False, # If true, the input is read-only
triggerEvent="change", # Trigger event to send code to the backend
value="" # The input text value
)
# Assuming you have a mechanism to render or use this TextInput within a layout
layout = zt.Layout(components=[text_input])
Example Output
Overview
pydantic model zero_true.TextInput
Text input allows a user to input any form of text, and is a primary method for user interaction.
JSON Schema
{
"title": "TextInput",
"description": "Text input allows a user to input arbitrary text. This is meant for short text inputs",
"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-text-field",
"description": "Vue component name",
"title": "Component",
"type": "string"
},
"hint": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": "Press Enter to Submit",
"description": "Hint text for the text input",
"title": "Hint"
},
"value": {
"default": "",
"description": "The input text value",
"title": "Value",
"type": "string"
},
"placeholder": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Placeholder text",
"title": "Placeholder"
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Label for the text input",
"title": "Label"
},
"readonly": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "If true, the input is read-only",
"title": "Readonly"
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "If true, the input is disabled",
"title": "Disabled"
},
"triggerEvent": {
"default": null,
"description": "Trigger event to send code to the backend",
"title": "Triggerevent",
"type": "string"
}
},
"required": [
"id"
]
}
Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.
zero_true.TextInput
Zero True Component
field component: str = ‘v-text-field’
Vue component name.
field disabled: bool | None = None
If true, the input is disabled.
field hint: str | None = ‘Press Enter to Submit’
Hint text for the text input.
field label: str | None = None
Label for the text input.
field placeholder: str | None = None
Placeholder text.
field readonly: bool | None = None
If true, the input is read-only.
field triggerEvent: str = None
Trigger event to send code to the backend.
field value: str = ”
The input text value.
On this page