Set the selected variant (Beta)

`component.setSelectedVariant(variant)`

Selects the specified variant of a selected component when the component canvas is open.

To use this method, ensure that the component canvas is open and a variant is currently selected. Then, to specify the variant to select, pass one of these parameters:

The ID of the variant as a string, as in component.setSelectedVariant('secondary-hero')
The ID of the variant as the id field in an object, as in component.setSelectedVariant({ id: 'secondary-hero' })
The name of the variant as the name field in an object, as in component.setSelectedVariant({ name: 'Secondary Hero' })

Beta

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

Syntax

1 interface SetSelectedVariantByName {
2   name: string;
3 }
4 interface SetSelectedVariantById {
5   id: string;
6 }
7 
8 type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;
9 
10 setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;

Returns

Promise<void>

A promise that resolves when the specified variant is selected.

Example

1 // Select component
2 const heroComponent = await webflow.getComponentByName('Hero')
3 
4 // Select variant by name
5 await heroComponent.setSelectedVariant({ name: 'Secondary Hero' });
6 
7 // Select variant by ID (object form)
8 await heroComponent.setSelectedVariant({ id: 'secondary-hero' });
9 
10 // Select variant by ID (string shorthand)
11 await heroComponent.setSelectedVariant('secondary-hero');
12 
13 // Select the base variant
14 await heroComponent.setSelectedVariant({ id: 'base' });
15 await heroComponent.setSelectedVariant('base');

Try this example

Designer Ability

Checks for authorization only

Designer Ability	Permission	Locale	Branch	Workflow	Sitemode
canAccessCanvas	any	any	any	any	any

1	interface SetSelectedVariantByName {
2	name: string;
3	}
4	interface SetSelectedVariantById {
5	id: string;
6	}
7
8	type SetSelectedVariantOptions = SetSelectedVariantByName \| SetSelectedVariantById;
9
10	setSelectedVariant(options: SetSelectedVariantOptions \| string): Promise<void>;

1	// Select component
2	const heroComponent = await webflow.getComponentByName('Hero')
3
4	// Select variant by name
5	await heroComponent.setSelectedVariant({ name: 'Secondary Hero' });
6
7	// Select variant by ID (object form)
8	await heroComponent.setSelectedVariant({ id: 'secondary-hero' });
9
10	// Select variant by ID (string shorthand)
11	await heroComponent.setSelectedVariant('secondary-hero');
12
13	// Select the base variant
14	await heroComponent.setSelectedVariant({ id: 'base' });
15	await heroComponent.setSelectedVariant('base');