> This page is for Designer API.

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

# Set prop settings (Beta)

> Updates one or more settings on an existing prop

## `component.setProp(propId, updates)`

Updates one or more settings on an existing prop.

Only the settings that you pass to this method change.
This method returns the full updated `Prop` object, not only properties that changed.

To clear a setting, pass `undefined` as its new value.

This action is undoable in the Webflow Designer.

> **Note**
>
> A prop's type cannot be changed after creation. Passing a `type` field returns an error.

> **Beta**
>
> These methods are in public beta and may change with future releases.

### Syntax

```typescript
component.setProp(propId: string, updates: SetPropOptions): Promise<Prop>
component.setProp(updates: SetPropOptionsWithId): Promise<Prop>
```

### Parameters

The method accepts two call signatures: an ID string plus an updates object or a single object that includes the `id` field.

**`SetPropOptions`** — all fields are optional:

```typescript
interface SetPropOptions {
  /** Update the display name. */
  name?: string;
  /** Move to a different group, or null to ungroup. */
  group?: string | null;
  /** Update the tooltip, or null to remove it. */
  tooltip?: string | null;
  /**
   * Update the default value. Shape must match the prop's type.
   * Pass null to clear the default value.
   */
  defaultValue?: PropDefaultValue;

  // Type-specific settings (only valid for the matching prop type):
  multiline?: boolean;       // textContent only
  min?: number | null;       // number only
  max?: number | null;       // number only
  decimals?: number | null;  // number only
  trueLabel?: string | null; // boolean only
  falseLabel?: string | null; // boolean only
}

interface SetPropOptionsWithId extends SetPropOptions {
  /** The ID of the prop to update. */
  id: string;
}
```

* **`propId`** : *string* — The unique ID of the prop to update (first-argument signature only).
* **`updates.name`** : *string* — (optional) The new display name. If a prop with the same name already exists in the same group, the name is automatically incremented (for example, `Heading` becomes `Heading 2`).
* **`updates.group`** : *string | null* — (optional) Move the prop to a different group, or pass `null` to remove it from its group.
* **`updates.tooltip`** : *string | null* — (optional) New tooltip text, or `null` to remove the tooltip.
* **`updates.defaultValue`** : varies by type — (optional) New default value. The shape must match the prop's type. Pass `null` to clear the default value.
* **`updates.multiline`** : *boolean* — (`'textContent'` only, optional) Whether the text input supports multiple lines.
* **`updates.min`** : *number | null* — (`'number'` only, optional) Minimum allowed value. Pass `null` to remove the constraint.
* **`updates.max`** : *number | null* — (`'number'` only, optional) Maximum allowed value. Pass `null` to remove the constraint.
* **`updates.decimals`** : *number | null* — (`'number'` only, optional) Number of decimal places allowed. Pass `null` to remove the constraint.
* **`updates.trueLabel`** : *string | null* — (`'boolean'` only, optional) Label shown when the value is `true`. Pass `null` to remove the label.
* **`updates.falseLabel`** : *string | null* — (`'boolean'` only, optional) Label shown when the value is `false`. Pass `null` to remove the label.

### Returns

**Promise\<*Prop*>**

A Promise that resolves to the full updated `Prop` object after the update is applied.

The `Prop` interface uses the same shape as the return value of [`component.createProp()`](/designer/reference/managing-components/create-prop):

```typescript
interface Prop {
  /** Unique prop ID. */
  id: string;
  /** The prop type. */
  type: PropType;
  /** The binding value type, derived from the prop type. */
  valueType: BindableValueType;
  /** Value types that this prop can bind to. */
  bindableTo: readonly BindableValueType[];
  /** Display name (may be auto-incremented if there was a name conflict). */
  name: string;
  /** Group name, or null if ungrouped. */
  group: string | null;
  /** Tooltip text, or null if not set. */
  tooltip: string | null;
  /** Default value, or null if not set. */
  defaultValue: unknown | null;
  // Type-specific settings, included when applicable:
  multiline?: boolean;   // textContent
  min?: number;          // number
  max?: number;          // number
  decimals?: number;     // number
  trueLabel?: string;    // boolean
  falseLabel?: string;   // boolean
}
```

### Examples

Update the default value of a link prop:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const prop = await component.getProp('prop_123')

  const updated = await component.setProp(prop.id, {
    defaultValue: {
      ...prop.defaultValue,
      rel: 'preload',
    },
  })
  console.log(updated.defaultValue)
  /*
  {
    mode: 'url',
    to: 'https://example.com/signup',
    openInNewTab: true,
    rel: 'preload'
  }
  */
}
```

Update a prop name and tooltip using the object-with-ID signature:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const updated = await component.setProp({
    id: 'prop_456',
    name: 'Hero Heading',
    tooltip: 'The main headline for the hero section',
  })
  console.log(updated.name)    // 'Hero Heading'
  console.log(updated.tooltip) // 'The main headline for the hero section'
}
```

Update number constraints:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const updated = await component.setProp('prop_789', {
    min: 0,
    max: 200,
    decimals: 2,
    defaultValue: 75.5,
  })
  console.log(updated)
  /*
  {
    id: 'prop_789',
    type: 'number',
    valueType: 'number',
    bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
    name: 'Overlay Opacity',
    group: 'Settings',
    tooltip: null,
    defaultValue: 75.5,
    min: 0,
    max: 200,
    decimals: 2
  }
  */
}
```

Move a prop to a different group:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const updated = await component.setProp('prop_456', { group: 'Layout' })
  console.log(updated.group) // 'Layout'
}
```

Remove a prop from its group:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const updated = await component.setProp('prop_456', { group: null })
  console.log(updated.group) // null
}
```

Remove a tooltip:

```typescript
const component = await webflow.getCurrentComponent()

if (component) {
  const updated = await component.setProp('prop_456', { tooltip: null })
  console.log(updated.tooltip) // null
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability        | Permission | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :--------- | :----- | :----- | :------- | :------- |
| **canModifyComponents** | any        | any    | any    | Canvas   | Design   |