> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TextArea

> Adds a multiline Text Area to your component in the Makeswift builder to visually edit a `string` prop.

<Frame type="glass" caption="A Text Area panel for a Code Block component to change the code">
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/text-area-panel.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=a43c52a6b27765ce6389e3d212c39764" width="2048" height="1280" data-path="images/text-area-panel.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="Text">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="string">
  The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
  Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).
</ParamField>

<ParamField query="defaultValue" type="string">
  The value passed to your component when nothing is set in the Makeswift
  builder.
</ParamField>

## Prop type

The TextArea control passes a `string` to your component. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`.

## Example

The following example adds a Text Area control to the `Code` prop of a Code Block component.

<CodeGroup>
  ```tsx CodeBlock.makeswift.ts theme={null}
  import { TextArea } from "@makeswift/runtime/controls";

  import { runtime } from "@/makeswift/runtime";

  import { CodeBlock } from "./CodeBlock";

  runtime.registerComponent(CodeBlock, {
    type: "code-block",
    label: "Code Block",
    props: {
      code: TextArea({ label: "Code" }),
    },
  });
  ```

  ```tsx CodeBlock.tsx theme={null}
  import { highlight, languages } from "prismjs";

  interface Props {
    code?: string;
  }

  export function CodeBlock({ code }: Props) {
    return (
      <pre
        dangerouslySetInnerHTML={{
          __html: highlight(code, languages.js, "js"),
        }}
      />
    );
  }
  ```
</CodeGroup>

<Info>
  `.makeswift.ts` is a naming convention for organizing Makeswift registration
  code. [Learn
  more](/developer/reference/runtime/register-component#organizing-registration-code).
</Info>