# Input Groups {% hint style="info" %} Only users with role **Designer** or **Admin** can access and edit Settings {% endhint %} This is where the magic happens and where Alpaco is really set apart from any ESP or other platform.\ \ Both the [Base](https://documentation.alpaco.email/template/base) and every [Block](https://documentation.alpaco.email/template/blocks) has their own inputs. Inputs is per default scoped, but unique to Alpaco they can all be accessed between each other, meaning an Input in **Base** can affect a **Block**, but also the other way around. * Inputs can be grouped into an [Input group](#input-group). * Input groups can be [Repeatable](#repeatable). * Inputs comes in [different types](https://documentation.alpaco.email/template/input-groups/input-types). ### Input group Everything starts with an **Input Group** as we need to organize which elements needs to be parteded from eachother. In the Right panel you'll see an **Input Group** with a "**Name**" and a "Key"\ \ To create a name for the **Input Group**, Insert the "**Name**" and "**Key**" in the Right panel. \ The "**Name**" Can be with capital letters and spaces as it's used for display only. In this example we will call it `My Input Group Name` and the "**Key**" `my_input_group_name` as it's used for the Liquid rules. {% hint style="warning" %} **The naming scheme inserted here will be prefixed to anything existing in that Input group.** \ We suggest you name them more or less the same as not to create confusion later on. {% endhint %} It is also wise to consider at this stage what this group should contain - like inputs that are only to be filled out once, or maybe we want these inputs to be [repeateable](#repeatable).

In the example we've inserted a simply Input type Text to explain the naming scheme in Input groups

### Repeatable Say you wanted a part of your Inputs to be repeated in an infinite amount. This is a nice feature for when you want something like a button, a list item or a product-tile repeated, all by a click of a button. This can be done for all inputs contained within each [Input group](#input-group) and is an immensely powerful feature as this can be configured to not only iterate, but to count, to vary between odd and even and various ways later on, if you for instance wanted to: > "*Change the code if there are 3 product-tiles, but not if there are 2*" This is a core-feature of how Alpaco is configurable and it's only the imagination that limits the possibilities for this feature. The way to enable it, is to switch the checkbox saying "**Repeatable**" on an **Input group.** In our example here we created an Input group, gave it a name like "Button" and checked the "Repeatable". Notice below the platform helps you with the liquid code. \ The key `button`is the Input group key and the `collections.button` indicates it's something that is repeated, what we call a "Repeatable" and in Liquid what is known as a for-loop. Wrap your element in the code it provides you, like so: ```liquid {% for button in collections.button %} {% endfor %} ```

This is an example of a Input Group with a Repeatable. It contains a Button text and a Button link that can be repeated

### Cross reference Inputs Sometimes you want to have different inputs affect each other in various ways. For instance: > "*If **Block-1** is inserted into **Base**, change the background color of the body tag in **Base***" or > "*For each Repeated product-tile that is repeated in **Block-1**, insert some new CSS in the head tag of **Base***" The rules and combinations could be between [Base](https://documentation.alpaco.email/template/base) and [Blocks](https://documentation.alpaco.email/template/blocks), and vice versa or it could be between **Blocks** - there's are very few limitations to this feature, so long as your naming convention is kept neat and concise. In order to access inputs across **Blocks** and **Base**, simply pre-fix the input you're trying to target with the **Block name/Base name** that is visible in the Left panel. + **Input group key** in Right panel. + **input key** in the Right Panel. This can be done with any type of rule and any type of [Input type](https://documentation.alpaco.email/template/input-groups/input-types) Like so: ```liquid block-name.input-group-key.input-key ``` Or in this instance, we're trying to access a forloop for a Block-1 in the Base, it would be done like so: ```liquid {% for button in block-1.collections.button %} .button_{{ forloop.index }}{ left: 10px; } {% endfor %} ``` The code above will access the **Block-1**'s `button` in `collections.button` to be used in the **Base.** In this example we're injecting a class called `button_` and giving it a number for each iteration that it's clicked on. For each button that is inserted in the **Block**, it will create a new class with a unique number added to the style tag of **Base**. \ The same principle can be applied the other way around from **Base** to **Block** and between **Blocks.**

Here we're injecting code from Block-1 into the Base. Foreach iteration that is clicked in Block-1, it will create another class in Base

### Show or hide When building your Email Design system, over time it can become very crowded with fields and options for the users to fill in. However many times fields are dependent on each other, and is useless without the other - in these cases you want to hide those uncessary fields.\ \ That's where the **if/unless** **field** come in handy on Input Groups. You'll be able to hide or show a [Input group](#input-group) or [Repeatable](#repeatable) by typing in a liquid condition in this field. The liquid condition could be coming either internally from the [Block](https://documentation.alpaco.email/template/blocks) or even from [Cross reference inputs](#cross-reference-inputs).

Notice the If input on the repeatable in the right-hand side, it's condition is set up to only show if boolean called Header is true.

The syntax is a bit deconstructed in so far as you're not suppose to write the entire liquid statement with the proper opening and closing tag, eg. *{%if \*YOUR STATEMENT\*%}{%endif %}* as the platform will be doing that for you. Simply type in the liquid condition however complex you may need. \ You're able to use if or unless as your initial condition.
Next up we will look into the different Input types that can be used in Input groups.