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

```typescript
interface SetSelectedVariantByName {
  name: string;
}
interface SetSelectedVariantById {
  id: string;
}

type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;

setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;
```

### Returns

**Promise\<*void*>**

A promise that resolves when the specified variant is selected.

### Example

```typescript
// Select component
const heroComponent = await webflow.getComponentByName('Hero')

// Select variant by name
await heroComponent.setSelectedVariant({ name: 'Secondary Hero' });

// Select variant by ID (object form)
await heroComponent.setSelectedVariant({ id: 'secondary-hero' });

// Select variant by ID (string shorthand)
await heroComponent.setSelectedVariant('secondary-hero');

// Select the base variant
await heroComponent.setSelectedVariant({ id: 'base' });
await heroComponent.setSelectedVariant('base');
```

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

---

### Designer Ability

Checks for authorization only

| Designer Ability    | Permission | Locale | Branch | Workflow | Sitemode |
| :------------------ | :--------- | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any        | any    | any    | any      | any      |