Form Controls #

The form control component in MIZ framework allows users to create various input fields, including text, email, password, textarea, and file inputs with different sizes. The component is fully customizable and responsive.

Example #

    

    
HTML

    <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Supported Controls #

• Text Input (email, password, etc.)

        

        
HTML

        
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    

• Textarea

        

        
HTML

        
<textarea class="form-control" id="exampleFormControlInput2"></textarea>
    

• File Input

        

        
HTML

        
<input class="form-control" type="file" id="formFile">
    

• Datalist

        

        
HTML

        <input class="form-control" list="datalistOptions" placeholder="Type to search...">
<datalist id="datalistOptions">
    <option value="New York">
    <option value="Canberra">
    <option value="Vienna">
    <option value="Baku">
    <option value="Sofia">
    <option value="Ottawa">
    <option value="New Delhi">
    <option value="Tehran">
    <option value="Baghdad">
    <option value="Dublin">
    <option value="Tokyo">
    <option value="Pyongyang">
    <option value="Seoul">
    <option value="Mexico City">
    <option value="Amsterdam">
    <option value="Wellington">
    <option value="Niamey">
    <option value="Oslo">
    <option value="Islamabad">
    <option value="East Jerusalem">
    <option value="Doha">
    <option value="Lisbon">
    <option value="Moscow">
    <option value="Singapore">
    <option value="Honiara">
    <option value="Stockholm">
    <option value="Bern">
    <option value="Ankara">
    <option value="London">
    <option value="Washington D.C">
    <option value="Lusaka">
</datalist>
    

• Color Picker

        

        
HTML

        <input type="color" class="form-control form-control-color" value="#563d7c">
    

Sizing #

Form controls support different sizes using the following classes:

• Small:

        

        
HTML

        <input class="form-control form-control-sm">
    

• Large:

        

        
HTML

        <input class="form-control form-control-lg">