ComponentsManaging Components

Get a prop by name (Beta)

component.getPropByName(name)

Returns a single prop definition by its display name, or by its group and display name.

Use this method when you know a prop’s human-readable name but not its ID. To look up a prop by its ID, use component.getProp(). To retrieve all prop definitions on a component, use component.getProps().

Beta

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

Syntax

1component.getPropByName(name: string): Promise<Prop>
2component.getPropByName(groupName: string, name: string): Promise<Prop>

When called with one argument, the method searches all groups, including ungrouped props. When called with two arguments, the method matches props in the specified group only.

Parameters

  • name : string — The display name of the prop to retrieve.
  • groupName : string — (optional) The name of the group the prop belongs to. When provided, the method searches only within that group.

Returns

Promise<Prop>

A Promise that resolves to the matching Prop object.

The Prop interface uses the same shape as the return value of component.createProp():

1interface Prop {
2  /** Unique prop ID. */
3  id: string;
4  /** The prop type. */
5  type: PropType;
6  /** The binding value type, derived from the prop type. */
7  valueType: BindableValueType;
8  /** Value types that this prop can bind to. */
9  bindableTo: readonly BindableValueType[];
10  /** Display name. */
11  name: string;
12  /** Group name, or null if ungrouped. */
13  group: string | null;
14  /** Tooltip text, or null if not set. */
15  tooltip: string | null;
16  /** Default value, or null if not set. */
17  defaultValue: unknown | null;
18  // Type-specific settings, included when applicable:
19  multiline?: boolean;   // textContent
20  min?: number;          // number
21  max?: number;          // number
22  decimals?: number;     // number
23  trueLabel?: string;    // boolean
24  falseLabel?: string;   // boolean
25}

Examples

Look up a prop by name across all groups:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const prop = await component.getPropByName('CTA Link')
5  console.log(prop)
6  /*
7  {
8    id: 'prop_4',
9    type: 'link',
10    valueType: 'link',
11    bindableTo: ['link'],
12    name: 'CTA Link',
13    group: 'Content',
14    tooltip: null,
15    defaultValue: {
16      mode: 'url',
17      to: 'https://example.com/signup',
18      openInNewTab: true
19    }
20  }
21  */
22}

Look up a prop by group and name:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const prop = await component.getPropByName('Settings', 'Overlay Opacity')
5  console.log(prop)
6  /*
7  {
8    id: 'prop_5',
9    type: 'number',
10    valueType: 'number',
11    bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
12    name: 'Overlay Opacity',
13    group: 'Settings',
14    tooltip: null,
15    defaultValue: 50,
16    min: 0,
17    max: 100,
18    decimals: 0
19  }
20  */
21}

Look up an ungrouped prop by name:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const prop = await component.getPropByName('Color Scheme')
5  console.log(prop.group) // null
6}

Designer Ability

Checks for authorization only.

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny