ComponentsManaging Components

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

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

Returns

Promise<void>

A promise that resolves when the specified variant is selected.

Example

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

Designer Ability

Checks for authorization only

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canAccessCanvasanyanyanyanyany