Skip to content

input

The input macro is used to render a customizable input control with additional content like a unit or an icon.

Definition

{% input(options) %}

Input parameters

options

options parameter represents an object of input attributes

Option key Type Default Required Description
options.id string "" yes Id attribute of the input
options.name string "" yes Name attribute of the input
options.type string text no Type attribute of the input
options.error boolean false no If set to true, 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 input
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to input
options.readonly boolean false no If set to true, readonly attribute and appropriate styling class will be added to input
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to input
options.value string "" no Value attribute of the input
options.unit string "" no Unit related to the input value that gives additional information to the user, e.g. kg, lbs
options.placeholder string "" no Placeholder attribute of the input
options.iconName string "" no Name of the icon that will be rendered inside the label of the input
options.classList string "" no A list of css classes that will be added to the input

Example

In this example we render a basic input. In all examples we will use additional control classes and elements that help to style the input properly.

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

<div class="control">
    <div class="control__label">
        <label for="firstname">
            Firstname
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            {{ input({
                name: 'firstname',
                id: 'firstname'
            }) }}
        </div>
    </div>
</div>

Example

In this example we render a disabled input with value and additional class that gives some top margin

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

<div class="control">
    <div class="control__label">
        <label for="country">
            Country
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            {{ input({
                name: 'country',
                id: 'country',
                disabled: true,
                value: 'Poland',
                classList: 'mt-xs-4'
            }) }}
        </div>
    </div>
</div>

Example

In this example we render a password input with placeholder, error styling and an icon

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

<div class="control">
    <div class="control__label">
        <label for="password">
            Password
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            {{ input({
                name: 'password',
                id: 'password',
                type: 'password',
                placeholder: 'Your password',
                error: true,
                iconName: 'lock'
            }) }}
        </div>
    </div>
</div>

Macro source code

{% macro input(options) %}
    {% from "@macros/input_control.twig" import input_control %}
    {% from "@macros/input_icon.twig" import input_icon %}
    {% from "@macros/input_unit.twig" import input_unit %}

    {% set inputErrorClass = options.error ? 'input_error' : '' %}
    {% set inputDisabledClass = options.disabled ? 'input_disabled' : '' %}
    {% set additionalClasses = options.classList ? options.classList|join(' ') : '' %}
    {% set inputClassNames = ['input', inputErrorClass, inputDisabledClass, additionalClasses] %}

    {% set options = options|merge({ classNames: inputClassNames }) %}

    {{ input_control(options, inputClassNames) }}

    {% if options.iconName %}
        {{ input_icon(options.iconName) }}
    {% endif %}

    {% if options.unit %}
        {{ input_unit(options.unit) }}
    {% endif %}
{% endmacro %}

Form reference