TextInput

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

A Text Input panel for a Button component to change the text

Params

label · string · default: "Text"

Text for the panel label in the Makeswift builder.

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

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" }),
  },
})

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.