Lego

pam-Form-Group="lego" extend form controls by adding icons, buttons, selects before or after text-based form controls as lego bricks.

Markup

Toggle example guides Toggle HTML markup 

<form pam-Form>
    <div pam-Form-Group="lego">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan">+1-284</option>
            </select>
        </div>
        <input id="addon-lego-1" type="text" placeholder="One addon" pam-Form-Control>
    </div>
    <div pam-Form-Group="lego">
        <input id="addon-lego-2" type="text" placeholder="One addon" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
    <div pam-Form-Group="lego">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan" selected>+1-284</option>
            </select>
        </div>
            <input id="addon-lego-3" type="text" placeholder="Two addons" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
</form>