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

            

                

                    Email address
                    
                
            
            

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

Other Examples

            

                

                    Textarea
                    
                
                

                    File input
                    
                
                

                    Datalist
                    
                    
                
                

                    Color picker
                    
                
            
            

                
                
HTML
                
            
            <div class="form-field flex-column">
    <label for="exampleFormControlInput2" class="form-label">Textarea</label>
    <textarea id="exampleFormControlInput2" class="form-control"></textarea>
</div>
<div class="form-field flex-row">
    <label for="formFile" class="form-label">File input</label>
    <input class="form-control" type="file" id="formFile">
</div>
<div class="form-field flex-row">
    <label for="exampleDataList" class="form-label">Datalist</label>
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
        <option value="San Francisco">
    <option value="New York">
        <option value="Seattle">
    </datalist>
</div>
<div class="form-field flex-row">
    <label for="exampleColorInput" class="form-label">Color picker</label>
    <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c">
</div>

Available Classes

Class	Description
.form-field	Main wrapper for form controls. Controls layout and spacing.
.form-label	Label for input fields.
.form-control	Base class for all input, textarea, select, etc.
.form-text	Helper or description text below input.

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: "";
$form-control-bg-color: "fields";
$form-control-color: "text-fields";
$form-control-custom-classes: ".p-1, .bw-1, .border-color, .border-style-solid";
$form-label-bg-color: "transparent";
$form-label-color: "title-text-fields";
$form-text-color: "text";
$form-text-custom-classes: ".font-normal";
$form-title-color: "title-text";
$form-title-custom-classes: ".font-title";
$from-control-disabled-bg-color: "fields";
$from-control-disabled-color: "text-fields";
$from-control-disabled-placeholder-opacity: 0.7;
$form-control-read-only-bg-color: "fields";
$form-control-read-only-color: "text-fields";
$form-control-colorpicker-bg-color: "fields";
            
        

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.