Form Control

The Form Control component in the MIZ framework provides a flexible and customizable way to create various input fields, including text, email, password, textarea, file, color picker, and datalist. It supports different sizes, states, and layouts, making it suitable for a wide range of form designs.

Description #

Form controls are essential UI elements for user input. The MIZ form-control component supports:

• Text-based inputs (text, email, password, etc.)
• Textarea for multi-line input
• File input with custom styling
• Datalist for suggestions/autocomplete
• Color picker input
• Read-only and disabled states
• Horizontal and vertical layouts using .flex-row and .flex-column

Examples and Classes #

Basic Example

            

                

                    
                
            
            

                
                
HTML
                
            
            <div class="form-field flex-row">
    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Name">
</div>

Other Examples

            

                

                    
                
                

                    
                
                

                    
                
            
            

                
                
HTML
                
            
            <div class="form-field flex-column">
    <textarea id="exampleFormControlInput2" class="form-control"></textarea>
</div>
<div class="form-field flex-row">
    <input class="form-control" type="file" id="formFile">
</div>
<div class="form-field flex-row">
    <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c">
</div>

More Examples

            

                

                    

                        
                        
                        
                        
                    
                    

                        
                            Years of Experience
                            0 - 1 year
                            2 - 5 years
                            5 - 10 years
                            10+ years
                        
                        

                             Full Time
                             Part Time
                             Remote
                        
                    
                    

                        
                        
                    
                    

                        

                            
                            I confirm that the information provided is accurate
                        
                        

                            Submit Application
                            Reset
                        
                    
                
            
            

                
                
HTML
                
            
            

Available Classes

Class	Description
.form-field	Main wrapper for form controls. Controls layout and spacing.
.form-control	Base class for all input, textarea, select, etc.

Layout Variations

Form controls can be arranged in horizontal (.flex-row) or vertical (.flex-column) layouts. You can also combine multiple fields in a group, add helper text, or use different input types and sizes for a custom form experience.

• Horizontal Layout: Use .flex-row for side-by-side fields
• Vertical Layout: Use .flex-column for stacked fields
• Grouped Fields: Nest multiple .form-field inside a parent for grouped forms
• Helper Text: Add .form-text for descriptions or hints
• Read-only/Disabled: Use readonly or disabled attributes for state control

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/form-control/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/form-control/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/form-control/script.js	JavaScript functionality (if needed)

SCSS Variables #

            

                
                
SCSS
                
            
            $form-field-custom-classes:".position-relative";
$form-control-custom-classes:".text-fields-color, .bg-fields-color, .p-2, .bw-1, .border-color, .border-style-solid, .radius-all-normal, .#{$font-prefix}-subtitle";
$from-control-color-custom-classes:".p-1, .aspect-ratio-1x1, .h-10";
$from-control-disabled-custom-classes: ".opacity-7";
$from-control-file-transition: 0.2s linear;
$form-control-file-custom-classes:".btn, .btn-primary, .bw-1, .border-style-solid, .border-color";
// $form-control-file-hover-custom-classes:"";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
-	-	No JavaScript required for basic usage. All functionality is handled by HTML and CSS. You may add custom JS for validation or interactivity as needed.