> ## 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.

# Text Input

> Learn how to use the TextInput component in your applications

<Card title="Example Usage" icon="code">
  ```python theme={null}
  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])

  ```
</Card>

<Card title="Example Output" icon="computer">
  <iframe src="https://published.zero-true.com/srrey/exampletextinput/" width="100%" height="300" />
</Card>

## Overview

`pydantic model zero_true.TextInput`

<Note>Text input allows a user to input any form of text, and is a primary method for user interaction.</Note>

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "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"
     ]
  }
  ```
</Accordion>

<Info>Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.</Info>

<ResponseField name="zero_true.TextInput" type="Zero True Component">
  <Expandable title="properties">
    <AccordionGroup>
      <Accordion title="field component">
        **field component:** str = 'v-text-field'

        Vue component name.
      </Accordion>

      <Accordion title="field disabled">
        **field disabled:** bool | None = None

        If true, the input is disabled.
      </Accordion>

      <Accordion title="field hint">
        **field hint:** str | None = 'Press Enter to Submit'

        Hint text for the text input.
      </Accordion>

      <Accordion title="field label">
        **field label:** str | None = None

        Label for the text input.
      </Accordion>

      <Accordion title="field placeholder">
        **field placeholder:** str | None = None

        Placeholder text.
      </Accordion>

      <Accordion title="field readonly">
        **field readonly:** bool | None = None

        If true, the input is read-only.
      </Accordion>

      <Accordion title="field triggerEvent">
        **field triggerEvent:** str = None

        Trigger event to send code to the backend.
      </Accordion>

      <Accordion title="field value">
        **field value:** str = ''

        The input text value.
      </Accordion>
    </AccordionGroup>
  </Expandable>
</ResponseField>