> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/dynamic-blocks/block-controls.md).

# Block controls

Reference for all 11 block control types and how to use their values in TWIG templates

Block controls are custom inputs that appear in the **block inspector sidebar** when an editor selects the block in Gutenberg. Each control's current value is passed to the TWIG callback as a variable.

**Naming rule:** Control names are lowercased and spaces/dashes are converted to underscores. A control named `Badge Label` → `{{ badge_label }}` in TWIG.

***

## Control types overview

| Type                        | TWIG variable type | Best for                              |
| --------------------------- | ------------------ | ------------------------------------- |
| [Text](#text)               | `string`           | Short labels, titles, URLs            |
| [Textarea](#textarea)       | `string`           | Multi-line content, custom copy       |
| [Number](#number)           | `integer`          | Counts, IDs, font sizes               |
| [Range](#range)             | `integer`          | Sliders (columns, opacity, speed)     |
| [Email](#email)             | `string`           | Contact email addresses               |
| [Phone](#phone)             | `string`           | Phone numbers                         |
| [Checkbox](#checkbox)       | `boolean`          | Binary on/off options                 |
| [Toggle](#toggle)           | `boolean`          | Binary on/off options (visual switch) |
| [Radio](#radio)             | `string`           | Mutually exclusive choices            |
| [Select](#select)           | `string`           | Dropdown with predefined options      |
| [SelectMulti](#selectmulti) | `array`            | Multiple selectable options           |

***

## Text

A single-line text input. Use it for short custom strings like labels, titles, or CTA text.

**TWIG type:** `string`

**Example — customisable CTA button:**

```twig
<a class="btn" href="{{ get_permalink() }}">
    {{ cta_label|default('Read more') }}
</a>
```

***

## Textarea

A multi-line text area. Use it for longer custom content like descriptions or notes.

**TWIG type:** `string`

> Textarea values are plain text. Use `|nl2br|raw` to respect line breaks.

**Example:**

```twig
<p class="card__note">
    {{ editor_note|nl2br|raw }}
</p>
```

**Settings available:**

| Setting | Description                                  |
| ------- | -------------------------------------------- |
| `rows`  | Number of visible rows in the editor sidebar |

***

## Number

A numeric input. The value arrives in TWIG as an integer.

**TWIG type:** `integer`

**Example — control number of gallery columns:**

```twig
<ul class="gallery gallery--cols-{{ columns|default(3) }}">
    {% for img in acpt_product_info_gallery %}
        <li><img src="{{ img }}" /></li>
    {% endfor %}
</ul>
```

**Settings available:**

| Setting | Description           |
| ------- | --------------------- |
| `min`   | Minimum allowed value |
| `max`   | Maximum allowed value |
| `step`  | Increment step        |

***

## Range

A slider control. Identical to Number but rendered as a slider in the editor sidebar.

**TWIG type:** `integer`

**Example — opacity control:**

```twig
<div class="overlay" style="opacity: {{ opacity|default(80) / 100 }}">
    {{ acpt_hero_content_text|raw }}
</div>
```

**Settings available:** same as [Number](#number) (`min`, `max`, `step`).

***

## Email

A text input validated as an email address.

**TWIG type:** `string`

**Example:**

```twig
{% if contact_email %}
    <a href="mailto:{{ contact_email }}">{{ contact_email }}</a>
{% endif %}
```

***

## Phone

A text input validated as a phone number (`type="tel"`).

**TWIG type:** `string`

**Example:**

```twig
{% if contact_phone %}
    <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a>
{% endif %}
```

***

## Checkbox

A checkbox that returns `true` when checked, `false` (or `null`) when unchecked.

**TWIG type:** `boolean`

**Example:**

```twig
{% if show_author %}
    <p class="byline">By {{ get_the_title() }}</p>
{% endif %}
```

***

## Toggle

A toggle switch — functionally identical to Checkbox but rendered as a visual on/off switch in the editor sidebar. Prefer Toggle when the meaning is clearly binary (show/hide, enabled/disabled).

**TWIG type:** `boolean`

**Example:**

```twig
<div class="card {% if highlight %}card--highlighted{% endif %}">
    <h2>{{ get_the_title()|raw }}</h2>
</div>
```

***

## Radio

A set of radio buttons. Only one option can be selected at a time. The value in TWIG is the **value** of the selected option (not the label).

**TWIG type:** `string`

**Example — layout switcher:**

Define options in the wizard: `{ value: 'grid', label: 'Grid' }`, `{ value: 'list', label: 'List' }`.

```twig
<div class="posts posts--{{ layout|default('grid') }}">
    {% for item in get_posts({'post_type': 'post', 'posts_per_page': 6}) %}
        <div class="posts__item">
            <a href="{{ get_permalink(item.ID) }}">{{ get_the_title(item.ID) }}</a>
        </div>
    {% endfor %}
</div>
```

***

## Select

A dropdown that lets the editor pick one option. The value in TWIG is the **value** of the selected option.

**TWIG type:** `string`

**Example — theme colour:**

Define options: `{ value: 'blue', label: 'Blue' }`, `{ value: 'green', label: 'Green' }`, `{ value: 'red', label: 'Red' }`.

```twig
<div class="banner banner--{{ accent_color|default('blue') }}">
    {{ acpt_banner_content_text|raw }}
</div>
```

***

## SelectMulti

A multi-select dropdown. The editor can pick several options. The value in TWIG is an **array** of the selected option values.

**TWIG type:** `array`

**Example — display selected tags:**

```twig
{% if selected_features|length > 0 %}
    <ul class="features">
        {% for feature in selected_features %}
            <li>{{ feature }}</li>
        {% endfor %}
    </ul>
{% endif %}
```

**Example — apply multiple CSS classes:**

```twig
<div class="card {{ selected_modifiers|join(' ') }}">
    ...
</div>
```