Form Group

This component provides styling for form elements, including form groups, labels, fields, and error messages. The layout utilizes a grid system to position the label, input field, and an optional icon. Each form field has styles for focus, hover, and error states. The error message is displayed below the input field when the input is invalid.

Experiment

Dependencies: typography form

                    
import "@solutas/mgnl-elements-css/build/components/formgroup/formgroup.css"

Form Group with Input Field

A FormGroup with an input field example

                    
<form class="mgnl-form is-dirty">
    <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>
        <label class="mgnl-form-label" for="title">Title (en)</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle 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">
        <label class="mgnl-form-label" for="title">Title is super long. very long.</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle is requried</div>
        <div class="mgnl-form-group__indicator">Ih</div>
        <div class="mgnl-form-group__icon">x</div>
    </div>
    <h2 style="border-bottom: 1px solid gray;margin-bottom:15px">blabla</h2>
    <div class="mgnl-form-group">
        <div></div>
        <input class="mgnl-form-field" type="text" id="title" name="title">
        <label class="mgnl-form-label" for="title">Title (en)</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle is requried</div>
        <!--div class="mgnl-form-group__indicator">Ih</div-->
        <!--<div class="mgnl-form-group__icon">x</div>-->
    </div>
</form>

<form class="mgnl-form is-dirty">
    <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>
        <label class="mgnl-form-label" for="title">Title (en)</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle 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">
        <label class="mgnl-form-label" for="title">Title is super long. very long.</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle is requried</div>
        <div class="mgnl-form-group__indicator">Ih</div>
        <div class="mgnl-form-group__icon">x</div>
    </div>
    <h2 style="border-bottom: 1px solid gray;margin-bottom:15px">blabla</h2>
    <div class="mgnl-form-group">
        <div></div>
        <input class="mgnl-form-field" type="text" id="title" name="title">
        <label class="mgnl-form-label" for="title">Title (en)</label>
        <div class="mgnl-form-label__icon">x</div>
        <div class="error" id="titleError">Ttitle is requried</div>
        
        
    </div>
</form>

Custom Field

Form Group example of a custom form field

                    
<form class="mgnl-form">
    <div class="mgnl-form-group">
        <div class="mgnl-form-field d-flex">
            <div class="rounded-circle shadow-lg p-4">X</div>
            this is a cusotm field
        </div>
        <label class="mgnl-form-label" for="title">Title (en)</label>
        <div class="error" id="titleError">Ttitle is requried</div>
    </div>
</form>

Server Error with Input Field

A FormGroup with an input field example, with a server error.

                    
<form class="mgnl-form is-dirty">
    <div class="mgnl-form-group">
        <input class="mgnl-form-field is-invalid" type="text" id="title" name="title">
        <label class="mgnl-form-label" for="title">er (en)</label>
        <div class="error" id="titleError">Server Error</div>
    </div>
</form>

Form Group with Input Field

A FormGroup with an input field example

Small width (container queries example)

                    
<div style="width:500px;" class="banana">
    Small width (container queries example)
    <form class="mgnl-form is-dirty">
        <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>
            <label class="mgnl-form-label" for="title">Title (en)</label>
            <div class="mgnl-form-label__icon">x</div>
            <div class="error" id="titleError">Ttitle is requried</div>
            <div class="mgnl-form-group__indicator">Ih</div>
            <div class="mgnl-form-group__icon">x</div>
        </div>
    </form>
</div>

Use CSS Var

--mgnl-color-gray-60

--mgnl-animation-duration-50

--mgnl-animation-timing-50

--mgnl-color-gray-30

--mgnl-typography-ui-default-md-font-family

--mgnl-typography-ui-default-md-font-size

--mgnl-color-emerald-50

--mgnl-dimension-2

--mgnl-form-group-error-message-default-color-background

--mgnl-form-group-error-message-default-color-text

--mgnl-color-primary-100

--mgnl-color-gray-40

--mgnl-color-gray-20