@ea-lab/reactive-json-docs/public/rjbuild/docs/integration/bootstrap/element/form/TextAreaField.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # TextAreaField

      The `TextAreaField` component renders a multi-line text input field using React Bootstrap. It provides a resizable textarea for longer text content with automatic data binding to the global data context.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: dataLocation
          after: "(string, optional)"
        details: "Path to bind the field value in the data context."
      - term:
          code: defaultFieldValue
          after: "(string, optional)"
        details: "Default value when no data is present."
      - term:
          code: label
          after: "(string, optional)"
        details: "Field label text (supports template evaluation)."
      - term:
          code: placeholder
          after: "(string, optional)"
        details: "Placeholder text (supports template evaluation)."
      - term:
          code: rows
          after: "(number, optional)"
        details: "Number of visible text lines (default: 3)."
      - term:
          code: attributes
          after: "(object, optional)"
        details: "Attributes applied to the Form.Group container."
      - term:
          code: inputAttributes
          after: "(object, optional)"
        details: "Attributes applied directly to the textarea element."
      - term:
          code: actions
          after: "(array, optional)"
        details: "Actions to execute based on field state."

  - type: Markdown
    content: |
      ## Data Management

      The component automatically synchronizes its value with the global data context. When using `dataLocation`, the value is stored at the specified path. Without `dataLocation`, the value is stored in the template context using the component's `datafield`.

      ## Textarea Features

      The component provides standard HTML textarea functionality:
      - Multi-line text input
      - Automatic line breaks and wrapping
      - Resizable by default (can be controlled via CSS)
      - Character counting support via attributes
      - Scrollable content when exceeding visible area

  - type: RjBuildDescriber
    title: "Basic TextAreaField Usage"
    description: "Simple multi-line text input with label and placeholder"
    toDescribe:
      renderView:
        - type: TextAreaField
          dataLocation: ~.comments
          label: "Comments:"
          placeholder: "Enter your comments here..."
          rows: 4
        - type: div
          content:
            - "Current value: "
            - type: strong
              content: ~.comments
      data:
        comments: ""

  - type: RjBuildDescriber
    title: "Character Limiter"
    description: "TextAreaField with character limit restriction"
    toDescribe:
      renderView:
        - type: TextAreaField
          dataLocation: ~.feedback
          label: "Feedback (max 200 characters):"
          placeholder: "Your feedback..."
          rows: 4
          inputAttributes:
            maxLength: 200
        - type: div
          content:
            - "Feedback: "
            - ~.feedback
      data:
        feedback: ""

  - type: RjBuildDescriber
    title: "Custom Styling"
    description: "TextAreaField with custom styles and attributes"
    toDescribe:
      renderView:
        - type: TextAreaField
          dataLocation: ~.code
          label: "Code Snippet:"
          placeholder: "Enter your code here..."
          rows: 6
          inputAttributes:
            style:
              fontFamily: "monospace"
              fontSize: "14px"
              backgroundColor: "#f8f9fa"
              border: "1px solid #ced4da"
              resize: "vertical"
            spellCheck: false
        - type: TextAreaField
          dataLocation: ~.poetry
          label: "Poetry (no resize):"
          placeholder: "Write your poem..."
          rows: 4
          inputAttributes:
            style:
              fontStyle: "italic"
              resize: "none"
              backgroundColor: "#fff8dc"
        - type: div
          attributes:
            style:
              marginTop: "20px"
          content:
            - type: strong
              content: "Preview:"
            - type: div
              attributes:
                style:
                  fontFamily: "monospace"
                  backgroundColor: "#f8f9fa"
                  padding: "10px"
                  borderRadius: "4px"
                  marginTop: "5px"
              content: ~.code
              actions:
                - what: hide
                  when: ~.code
                  is: ""
            - type: div
              attributes:
                style:
                  fontStyle: "italic"
                  backgroundColor: "#fff8dc"
                  padding: "10px"
                  borderRadius: "4px"
                  marginTop: "5px"
              content: ~.poetry
              actions:
                - what: hide
                  when: ~.poetry
                  is: ""
      data:
        code: ""
        poetry: ""

  - type: Markdown
    content: |
      ## Limitations

      - No built-in rich text editing capabilities
      - No automatic text formatting or markdown support
      - No built-in character counting display
      - No built-in validation beyond HTML5 attributes
      - No support for auto-resizing based on content
      - No built-in spell checking configuration options

templates: {}
data: {}