Text

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

Syntax

1
// Prop definition
2
props.Text({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
    defaultValue?: string,
7
})
8
9
// Prop value
10
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.

1
props.Text({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
    defaultValue?: string,
6
})

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

1
import { declareComponent } from '@webflow/react';    
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
import "../styles/globals.css";
5
6
export default declareComponent(MyComponent, {
7
    name: "MyComponent",
8
    description: "A component with a Text property",
9
    props: {
10
        title: props.Text({
11
            name: "Title",
12
            group: "Content",
13
            defaultValue: "Hello World!"
14
        })
15
    }
16
});

Prop Value

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

1
string

Properties

• n/a

Webflow properties panel

Example

1
import React from "react";
2
import "../styles/globals.css";
3
4
interface MyComponentProps {
5
title?: string;
6
}
7
8
export const MyComponent = ({ title }: MyComponentProps) => {
9
return (
10
    <h1 className="title">
11
    {title}
12
    </h1>
13
);
14
}

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
• Use descriptive prop names