> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# TextArea

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

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

![](/_fern-img/8ac813151bac8e73b247faef93356c2daa12fa49f382b235629fe1dfe693944e.webp)

## Params

**`label`** `string` — default: Text

Text for the panel label in the Makeswift builder.

---

**`description`** `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).

---

**`defaultValue`** `string`

The value passed to your component when nothing is set in the Makeswift
builder.

---

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

**`CodeBlock.makeswift.ts`**

```tsx CodeBlock.makeswift.ts
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" }),
  },
});
```

**`CodeBlock.tsx`**

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

interface Props {
  code?: string;
}

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

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