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

1 component.getPropByName(name: string): Promise<Prop>
2 component.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():

1 interface 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:

1 const component = await webflow.getCurrentComponent()
2 
3 if (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:

1 const component = await webflow.getCurrentComponent()
2 
3 if (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:

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

Try this example

Designer Ability

Checks for authorization only.

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

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

1	interface 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	}

1	const component = await webflow.getCurrentComponent()
2
3	if (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	}