Multifield

Experiment
Dependencies: formgroup form button 
                    
import "@solutas/mgnl-elements-css/build/components/multifield/multifield.css"

Alt Example

Form with a multifield

x
x
mutl is requried
Ih
x
x
x
mutl is requried
Ih
x
x
x
mutl is requried
Ih
x
x
mutl is requried
                    
<form class="mgnl-form ">
    <div class="mgnl-form-group">
        <!--<div class="mgnl-form-group__handle">x</div>-->
        <div></div>
        <div class="mgnl-form-field">


            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
            </div>
            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
            </div>
            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
            </div>

            <button role="button" tabindex="0" class="mgnl-button mgnl-button--secondary 
        mgnl-button--md">
                <div class="mgnl-button__label">add </div>
            </button>
        </div>
        <label class="mgnl-form-label" for="title"><span>Titles (en)</span></label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">mutl is requried</div>
        <div></div>
        <div></div>
    </div>
</form>

Vanilla Example

Form with a multifield

x
x
x
mutl is requried
Ih
x
x
x
mutl is requried
Ih
x
x
x
mutl is requried
Ih
x
x
mutl is requried
Ih
x
                    
<form class="mgnl-form is-dirty">
    <div class="mgnl-form-group mgnl-form-group__multifield">
        <div class="mgnl-form-group__handle">x</div>
        <div class="mgnl-form-field">


            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
                <label class="mgnl-form-label" for="title"><span>Title (en)</span></label>
            </div>
            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
                <label class="mgnl-form-label" for="title"><span>Title (en)</span></label>
            </div>
            <div class="mgnl-form-group">
                <div class="mgnl-form-group__handle">x</div>
                <input class="mgnl-form-field" type="text" id="title" name="title" required>

                <div class="mgnl-form-label__icon">x</div>
                <div class="error" id="titleError">mutl is requried</div>
                <div class="mgnl-form-group__indicator">Ih</div>
                <div class="mgnl-form-group__icon">x</div>
            </div>

            <button role="button" tabindex="0" class="mgnl-button mgnl-button--secondary 
        mgnl-button--md">
                <div class="mgnl-button__label">add </div>
            </button>
        </div>
        <label class="mgnl-form-label" for="title"><span>Title (en)</span></label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">mutl is requried</div>
        <div class="mgnl-form-group__indicator">Ih</div>
        <div class="mgnl-form-group__icon">x</div>
    </div>
</form>

Use CSS Var