> This page is for Code Components.

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

# Text

> Configure a Text property for a code component

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

## Syntax

```tsx
// 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.

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

> **Tip**
>
> You can use `props.String` as an alias for the `props.Text` prop type.

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

```tsx title={"MyComponent.Webflow.tsx"}
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.

**`PropType.Text`**

```tsx title="PropType.Text"
string
```

#### Properties

* `n/a`

#### Webflow properties panel

![Text property in the Webflow panel](/_fern-img/523987d0c97f665398ab5af2538991eef98a7caffee9aa3e5c2b9fd074e776f6.webp)

#### Example

```tsx title={"MyComponent.tsx"}
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