Totem module: Form

Apply base styles to the default form elements:

• text input (including password, number etc)
• radiobutton
• checkbox
• select element (singular)
• textarea

Installation

Install totem.module.form with npm (we assume you have pre-installed node.js).

$ npm install totem.module.form --save

Snippets

The following snippets can be used for including a form element.

partials/input.twig

 
    /**
    *   Outputs a single base input field (text, password, phone etc..)
    *
    *   @param  string   $label   Outputs a label tag above the included field
    *   @param  string[]|boolean[]   $input_attributes   Outputs each item within the array as html attribute; like type, placeholder & value. Can also ouput boolean attributes when the key value has been defined as true.
    */
 
    {% include "totem_submodules::totem.module.form/partials/input.twig" with {
        label: "My awesome input element",
        input_attributes: {
            type: "search"
            placeholder: "Placeholders are the best"
        }
    } %}

partials/textarea.twig

 
    /**
    *   Outputs a textarea
    *
    *   @param  string   $label   Outputs a label tag above the included textarea
    *   @param  string[]|boolean[]   $input_attributes   Outputs each item within the array as html attribute. Can also ouput boolean attributes when the key value has been defined as true.
    */
 
    {% include "totem_submodules::totem.module.form/partials/textarea.twig" with {
        label: "My awesome textarea",
        input_attributes: {
            rows: 12
        }
    } %}

partials/radio.twig

 
    /**
    *   Outputs a single radio button
    *
    *   @param  string   $label   Outputs a label tag aside the included radio button
    *   @param  string[]|boolean[]   $input_attributes   Outputs each item within the array as html attribute. Can also ouput boolean attributes when the key value has been defined as true.
    */
 
    {% include "totem_submodules::totem.module.form/partials/radio.twig" with {
        label: "Radio button",
        input_attributes: {
            checked: true
        }
    } %}

partials/radio-group.twig

 
    /**
    *   Outputs multiple radio buttons and an optional title for the included radio group
    *
    *   @param  string   $label   Outputs a label tag aside the included radio button
    *   @param  ArrayObject[]   $radios   Define each radio from an array, each array accepts the same parameters defined from partials/radio.twig.
    */
 
    {% include "totem_submodules::totem.module.form/partials/radio-group.twig" with {
        label: "Checkbox group",
        radios: [
            {
                label: "Radio 1",
                input_attributes: {
                    checked: true
                }
            },
            {
                label: "Radio 2"
            }
        ]
    } %}

partials/checkbox.twig

 
    /**
    *   Outputs a single checkbox button
    *
    *   @param  string   $label   Outputs a label tag aside the included checkbox button
    *   @param  string[]|boolean[]   $input_attributes   Outputs each item within the array as html attribute. Can also ouput boolean attributes when the key value has been defined as true.
    */
 
    {% include "totem_submodules::totem.module.form/partials/checkbox.twig" with {
        label: "Checkbox",
        input_attributes: {
            checked: true
        }
    } %}

partials/checkbox-group.twig

 
    /**
    *   Outputs multiple checkboxes and an optional title for the included checkbox group
    *
    *   @param  string   $label   Outputs a label tag aside the included radio button
    *   @param  Array[]   $checkboxes   Define each checkbox from an array, each array accepts the same parameters defined from partials/checkbox.twig.
    */
 
    {% include "totem_submodules::totem.module.form/partials/checkbox-group.twig" with {
        label: "Checkbox group",
        checkboxes: [
            {
                label: "Checkbox 1",
                input_attributes: {
                    checked: true
                }
            },
            {
                label: "Checkbox 2"
            }
        ]
    } %}

Horizontal Layout

You can define a horizontal layout for some partials. With this option you can place the label & field aside each other.

 
    /**
    *   Outputs a single input field in a horizontal layout
    *
    *   @param  string   $row_class   Set an additional class for the .row element.
    *   @param  string   $label_class Adjust the column class for the label column.
    *   @param  string   $field_class Adjust the column class for the input column.
    */
 
    {% include "totem_submodules::totem.module.form/partials/input.twig" with {
        label: "My awesome input element",
        horizontal_layout: {
            row_class: "row--middle",
            label_class: "scol12 pcol12 col4",
            field_class: "scol12 pcol12 col8"
        }
    } %}
 

Validation

With the validation parameter you can set an specific class on the .form-group element and define an aditional message for it.

 
    /**
    *   Outputs a single input field with that with an error class & color
    *
    *   @param  string   $class   Define an specific class for the .form-group element; defaults to .form-group--error.
    *   @param  string   $message   Show an custom message below the input.
    */
 
    {% include "totem_submodules::totem.module.form/partials/input.twig" with {
        label: "Regular input with description",
        validation: {
            class: 'form-group--error',
            message: 'Firstname is required'
        }
    } %}
 

Adding form descriptions

You can add an aditional description to your field by setting the parameter: description

 
    /**
    *   Outputs a single input field with an description below the field
    *
    *   @param  string   $description   Define an aditional paragraph for the description.
    */
 
    {% include "totem_submodules::totem.module.form/partials/input.twig" with {
        label: "Regular input with description",
        description: "Field description goes here"
    } %}