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

# TextInput

> Adds a single-line Text Input panel in the Makeswift builder to visually edit a `string` prop.

Adds a single-line Text Input panel in the Makeswift builder to visually edit a `string` prop.

![](/_fern-img/f27159f974432753c708b55fbae4b83e1bae5a093972cf624863cf2957844b88.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 TextInput 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 Input control to the `children` prop of a Link component.

**`Button.makeswift.ts`**

```tsx Button.makeswift.ts
import { TextInput } from "@makeswift/runtime/controls";

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

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    text: TextInput({ label: "Text", defaultValue: "Click me" }),
  },
});
```

**`Button.tsx`**

```tsx Button.tsx
interface Props {
  text?: string;
}

export function Button({ text = "Click me" }: Props) {
  return (
    <button className="px-4 py-3 rounded bg-primary text-white shadow">
      {text}
    </button>
  );
}
```

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