Textarea

Render a textarea input. Extends Base.

Interactive Demo
Example

Debug: Data

{"root":{"props":{}},"content":[{"type":"Example","props":{"description":"Hello, world","id":"example"}}],"zones":{}}

Debug: UI

{"leftSideBarVisible":true,"rightSideBarVisible":true,"arrayState":{},"itemSelector":{"index":0},"componentList":{},"isDragging":false,"previewMode":"edit","viewports":{"current":{"width":360,"height":"auto"},"options":[],"controlsVisible":true},"field":{"focus":null}}

Debug: Other

  • Selected Item:

Hello, world

const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
        },
      },
      render: ({ description }) => {
        return <p>{description}</p>;
      },
    },
  },
};

Params

ParamExampleTypeStatus
typetype: "textarea"”textarea”Required
placeholderplaceholder: "Lorem ipsum..."String-

Required params

type

The type of the field. Must be "textarea" for Textarea fields.

const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
        },
      },
      // ...
    },
  },
};

Optional params

Placeholder

The placeholder text to display when the field is empty.

const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
          placeholder: "Lorem ipsum...",
        },
      },
      // ...
    },
  },
};
Interactive Demo
Example

Debug: Data

{"root":{"props":{}},"content":[{"type":"Example","props":{"id":"example"}}],"zones":{}}

Debug: UI

{"leftSideBarVisible":true,"rightSideBarVisible":true,"arrayState":{},"itemSelector":{"index":0},"componentList":{},"isDragging":false,"previewMode":"edit","viewports":{"current":{"width":360,"height":"auto"},"options":[],"controlsVisible":true},"field":{"focus":null}}

Debug: Other

  • Selected Item: