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

Field Defenitions

{
   "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

Show properties

field component

field component: str = ‘v-text-field’

Vue component name.

field disabled

field disabled: bool | None = None

If true, the input is disabled.

field hint

field hint: str | None = ‘Press Enter to Submit’

Hint text for the text input.

field label

field label: str | None = None

Label for the text input.

field placeholder

field placeholder: str | None = None

Placeholder text.

field readonly

field readonly: bool | None = None

If true, the input is read-only.

field triggerEvent

field triggerEvent: str = None

Trigger event to send code to the backend.

field value

field value: str = ”

The input text value.