Text

Add a Text property to your component for designers to input plain text content.

Syntax

// Prop definition
props.Text({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})
// Prop value
string

Prop Definition

Define the Text prop in your Webflow code component with a name. Optionally, you can add a default value, group, and tooltip text.

props.Text({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})

Properties

• name: The name for the property.
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• defaultValue: Default value for all component instances. (optional)

Example

import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";
export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Text property",
    props: {
        title: props.Text({
            name: "Title",
            group: "Content",
            defaultValue: "Hello World!"
        })
    }
});

Prop Value

The Text prop provides a string value to your React component.

string

Properties

• n/a

Webflow properties panel

Example

import React from "react";
interface MyComponentProps {
title?: string;
}
export const MyComponent = ({ title }: MyComponentProps) => {
return (
    <h1 className="title">
    {title}
    </h1>
);
}

When to use

Use a Text prop when you want designers to:

• Input simple text content
• Set titles, labels, or descriptions

Best practices

• Provide meaningful default values so the component renders when added to the canvas
• Use descriptive prop names