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

> Learn how to use the Text component in your applications

<Card title="Example Usage" icon="code">
  ```python theme={null}
  #An Example Input Box: 
  from zero_true import Text


  example = TextInput(id="prompt_inputs", label="Enter your prompt", placeholder="Type something...")

  ```
</Card>

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

## Overview

`pydantic model zero_true.Text`

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "title": "Text",
     "description": "Text is a read only component that is meant for static text",
     "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",
           "description": "Vue component name",
           "title": "Component",
           "type": "string"
        },
        "text": {
           "default": "",
           "description": "The actual text content",
           "title": "Text",
           "type": "string"
        },
        "type": {
           "default": "text-body-1",
           "description": "Text type to display",
           "enum": [
              "text-h1",
              "text-h2",
              "text-h3",
              "text-h4",
              "text-h5",
              "text-h6",
              "text-subtitle-1",
              "text-subtitle-2",
              "text-body-1",
              "text-body-2",
              "text-button",
              "text-caption",
              "text-overline"
           ],
           "title": "Type",
           "type": "string"
        },
        "color": {
           "anyOf": [
              {
                 "type": "string"
              },
              {
                 "type": "null"
              }
           ],
           "default": null,
           "description": "Color of the text",
           "title": "Color"
        }
     },
     "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.Text" type="Zero True Component">
  <AccordionGroup>
    <Expandable name="Testing">
      <Accordion title="field color">
        **field color:** str | None = None
        Color of the text
      </Accordion>

      <Accordion title="field component">
        **field component:** str = 'v-text'
        Vue component name
      </Accordion>

      <Accordion title="field text">
        **field text:** str = ''
        The actual text content
      </Accordion>

      <Accordion title="field type">
        **field type:** str = 'text-body-1'
        Text type to display
      </Accordion>
    </Expandable>
  </AccordionGroup>
</ResponseField>