> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedynamite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Read /start/capabilities before choosing an integration. Use the deployed server’s tools/list for current tool inputs.

# Controls

> Choose a starting value for an existing control.

A control target sets an existing dropdown or button group. Your application handles the change and updates the result.

## Dropdown

```html theme={null}
<label for="team-size">Team size</label>
<select id="team-size">
  <option value="small">1–10 people</option>
  <option value="growing">11–50 people</option>
</select>
```

Use this target configuration:

```json theme={null}
{
  "id": "team-size",
  "selector": "#team-size",
  "description": "Choose a useful starting point for the existing calculator",
  "mode": "control",
  "control": { "kind": "select" },
  "defaultVariant": "original",
  "variants": [
    {
      "id": "original", "description": "Small team",
      "hypothesis": "Keep the general default", "audiences": [], "value": "small"
    },
    {
      "id": "growing-team", "description": "Growing team",
      "hypothesis": "Use this starting point when context supports a larger team",
      "audiences": [], "value": "growing"
    }
  ]
}
```

The adapter sets `.value` and fires a bubbling `change` event. It requires an enabled native, single-select element and option. Save through [configuration as code](https://docs.usedynamite.com/agents/config-as-code.md).

## Preserve the visitor’s choice

After the visitor changes a control, automatic personalization leaves it alone. If the application changes the value, Dynamite also relinquishes ownership. Restoration only reverses a change Dynamite still owns.

> [accordion] Button groups
>
> ```json theme={null}
> {
>   "kind": "buttons",
>   "optionSelector": "button[data-plan]",
>   "valueAttribute": "data-plan"
> }
> ```
>
> Target the group container. Options must be real buttons with `aria-pressed`, with exactly one initially pressed. The adapter clicks an enabled option; the site’s handler updates state and `aria-pressed`.

Use controls for useful defaults, such as a calculator’s team size. Keep consent, purchases, billing, and coordinated multi-field changes in the application.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.