Skip to content

input_control

The input_control macro is used to render an input. It is a part of the input macro and it is recommended to use it most of the time. You can use the input_control macro alone if you need just the input element or need more control over how each individual part of the input macro is rendered.

Definition

{% input_control(options) %}

Input parameters

options

object represents an object of input attributes

Option key Type Default Required Description
options.id string "" yes Id attribute of the input
options.type string "" no Type attribute of the input
options.name string "" yes Name attribute of the input
options.value string "" no Value attribute of the input
options.placeholder string "" no Placeholder attribute of the input
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to the input
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to the input
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to the input
options.readonly boolean false no If set to true, readonly attribute will be added to the input
options.classNames string "" no Set of classes that will be added to the input

Example

Here is an example of a basic input.

{% from "@macros/input_control.twig" import input_control %}

{{ input_control({
    id: 'firstname-1',
    name: 'firstname'
}) }}

Example

Here is an example of a required input with a placeholder.

{% from "@macros/input_control.twig" import input_control %}

{{ input_control({
    id: 'firstname-1',
    name: 'firstname',
    placeholder: 'Enter your name',
    required: true
}) }}

Example

Here is an example of a readonly input with a value and additional class.

{% from "@macros/input_control.twig" import input_control %}

{{
    input_control({
        id: 'country-1',
        name: 'country',
        value: 'United Kingdom',
        readonly: true,
        classNames: 'input_s'
    })
}}

Macro source code

{% macro input_control(options) %}
    <input
        id="{{ options.id }}"
        type="{{ options.type ?? "text" }}"
        name="{{ options.name }}"
        class="input__control {{ options.classNames|join(' ') }}"

        {% if options.value is defined %}
            value="{{ options.value }}"
        {%  endif %}

        {% if options.placeholder is defined %}
            placeholder="{{ options.placeholder }}"
        {% endif %}

        {% if options.required %}required{% endif %}
        {% if options.hidden %}hidden{% endif %}
        {% if options.disabled %}disabled{% endif %}
        {% if options.readonly %}readonly{% endif %}
    />
{% endmacro %}

Form reference