Forms mixins

Magento UI library provides a set of mixins for forms elements customization. You can customize your forms globally by configuring global variables, or you can customize every form separately using appropriate mixin.

Note: in variables lists allowable values are in "[]" brackets. If there are no allowable values provided, for this variable you can use: '' | false | value.

Global forms elements customization

The .lib-form-element-all() mixin is used to set default styles for all form elements in the theme. To configure these elements global variables are used.

Fieldsets & fields customization

The .lib-form-fieldset() mixin is used to customize form fieldset borders and legend.

The .lib-form-field() mixin is used to customize form elements.

The .lib-form-hasrequired() mixin is used to show and customize "required fields" message if the form or fieldset has required fields and a data-hasrequired attribute.

Using these mixins you can customize your forms. By default these mixins use global variables.

Simple form with "required fields" message

<form class="example-form-1"> <fieldset class="example-form-1-fieldset" data-hasrequired="* Required Fields"> <legend class="legend"><span>Sign-in Information</span></legend><br> <div class="field password required"> <label for="password" class="label"><span>Password</span></label> <div class="control"> <input type="password" name="password" id="password" title="Password"> </div> </div> <div class="field confirmation required"> <label for="confirmation" class="label"><span>Confirm Password</span></label> <div class="control"> <input type="password" name="confirmation" title="Confirm Password" id="confirmation"> </div> </div> <div class="field password required"> <label for="password2" class="label"><span>Password</span></label> <div class="control"> <input type="password" name="password2" id="password2" title="Password"> </div> </div> <div class="field textarea"> <label for="textarea2" class="label"><span>Textarea</span></label> <div class="control"> <textarea rows="3" cols="5" id="textarea2" name="textarea2"></textarea> <div class="note">Please enter your message here</div> </div> </div> <div class="field file"> <label for="file2" class="label"><span>File field</span></label> <div class="control"> <input type="file" id="file2" value="" name="file2"> <div class="note">Please choose your picture here</div> </div> </div> <div class="field choice"> <input type="radio" id="radio2" checked="" value="1" name="radio2"> <label for="radio2" class="label"><span>Radiobutton choice</span></label> </div> <div class="field choice"> <input type="checkbox" id="checkbox2" value="1" name="checkbox2"> <label for="checkbox2" class="label"><span>Checkbox choice</span></label> </div> <div class="field region"> <label for="select2" class="label"><span>Select</span></label> <div class="control"> <select name="select2" id="select2"> <option value="">Please select</option> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> </select> </div> </div> <div class="field multiselect"> <label for="multiselect2" class="label"><span>Multiple select</span></label> <div class="control"> <select name="multiselect2" id="multiselect2" multiple="multiple"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option 6">Option 6</option> <option value="Option 7">Option 7</option> </select> </div> </div> </fieldset> </form>

Form with fields in 2 columns

<form class="example-form-2" action="#" method="post"> <fieldset class="example-form-2-fieldset"> <legend class="legend"><span>Personal Information</span></legend><br> <div class="field name firstname required"> <label class="label" for="firstname"><span>First Name</span></label> <div class="control"> <input type="text" id="firstname" name="firstname" value="" title="First Name"> </div> </div> <div class="field name lastname required"> <label class="label" for="lastname"><span>Last Name</span></label> <div class="control"> <input type="text" id="lastname" name="lastname" value="" title="Last Name"> </div> </div> <div class="field required"> <label for="email_address" class="label"><span>Email Address</span></label> <div class="control"> <input type="email" name="email" id="email_address" value="" title="Email Address"> </div> </div> <div class="field textarea"> <label for="textarea" class="label"><span>Textarea</span></label> <div class="control"> <textarea rows="3" cols="5" id="textarea" name="textarea"></textarea> <div class="note">Please enter your message here</div> </div> </div> <div class="field file"> <label for="file" class="label"><span>File field</span></label> <div class="control"> <input type="file" id="file" value="" name="file"> <div class="note">Please choose your picture here</div> </div> </div> <div class="field choice"> <input type="radio" id="radio" checked="" value="1" name="radio"> <label for="radio" class="label"><span>Radiobutton choice</span></label> </div> <div class="field choice"> <input type="checkbox" id="checkbox" value="1" name="checkbox"> <label for="checkbox" class="label"><span>Checkbox choice</span></label> </div> <div class="field region"> <label for="select" class="label"><span>Select</span></label> <div class="control"> <select name="select" id="select"> <option value="">Please select</option> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> </select> </div> </div> <div class="field multiselect"> <label for="multiselect" class="label"><span>Multiple select</span></label> <div class="control"> <select name="multiselect" id="multiselect" multiple="multiple"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option 6">Option 6</option> <option value="Option 7">Option 7</option> </select> </div> </div> </fieldset> </form>

.example-form-1 {
    .example-form-1-fieldset {
        .lib-form-fieldset();
        .lib-form-hasrequired(bottom);
        > .field {
            .lib-form-field();
        }
    }
}

.example-form-2 {
    .example-form-2-fieldset {
        .lib-form-fieldset();
        > .field {
            .lib-form-field(
                    @_type: block,
                    @_column: true
                );
        }
    }
}

Fieldset and legend customization variables

The .lib-form-fieldset() mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Comment
        
        

            
@_border
            
@form-fieldsetborder
            
0
            
Fieldset border
        
        

            
@_margin
            
@form-fieldsetmargin
            
 0 0 @indentxl
            
Fieldset margin
        
        

            
@_padding
            
@form-fieldsetpadding
            
0
            
Fieldset padding
        
        

            
@_legend-color
            
@form-fieldset-legendcolor
            
false
            
Legend color
        
        

            
@_legend-font-size
            
@form-fieldset-legendfont-size
            
20px
            
Legend font size
        
        

            
@_legend-font-family
            
@form-fieldset-legendfont-family
            
false
            
Legend font family
        
        

            
@_legend-font-weight
            
@form-fieldset-legendfont-weight
            
false
            
Legend font weight
        
        

            
@_legend-font-style
            
@form-fieldset-legendfont-style
            
false
            
Legend font style
        
        

            
@_legend-line-height
            
@form-fieldset-legendline-height
            
1.2
            
Legend line height
        
        

            
@_legend-margin
            
@form-fieldset-legendmargin
            
0 0 @indentm
            
Legend margin
        
        

            
@_legend-padding
            
@form-fieldset-legendpadding
            
0
            
Legend padding
        
        

            
@_legend-width
            
@form-fieldset-legendwidth
            
false
            
Legend width
        
    
 

Fields customization variables

The .lib-form-field() mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default values [Allowable values]
            
Comment
        
        

            
@_type
            
@form-field-type
            
inline [inline | block]
            
How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control
        
        

            
@_border
            
@form-field__border
            
false
            
Border of the <div class="field"> element
        
        

            
@_column
            
@form-field-column
            
false [true | false]
            
Form fields are displayed in columns
        
        

            
@_column-padding
            
@form-field-column__padding
            
0 12px 0 0
            
Form fields column padding
        
        

            
@_column-number
            
@form-field-column__number
            
2
            
Form fields number of columns
        
        

            
@_type-block-margin
            
@form-field-type-block__margin
            
0 0 @form-field__vertical-indent
            
Form fields margin if @form-field-type set to is 'block'
        
        

            
@_type-inline-margin
            
@form-field-type-inline__margin
            
0 0 @form-field__vertical-indent
            
Form fields margin if @form-field-type is set to 'inline'
        
        

            
Form field label
        
        

            
@_label-color
            
@form-field-label__align
            
false
            
Field label text color
        
        

            
@_label-color
            
@form-field-label__color
            
false
            
Field label text color
        
        

            
@_label-font-size
            
@form-field-label__font-size
            
false
            
Field label font size
        
        

            
@_label-font-family
            
@form-field-label__font-family
            
false
            
Field label font family
        
        

            
@_label-font-weight
            
@form-field-label__font-weight
            
@font-weight__bold
            
Field label font weight
        
        

            
@_label-font-style
            
@form-field-label__font-style
            
false
            
Field label font style
        
        

            
@_label-line-height
            
@form-field-label__line-height
            
false
            
Field label line height
        
        

            
@_type-block-label-margin
            
@form-field-type-label-block__margin
            
0 0 @indent__xs
            
Field label margin if @form-field-type is set to 'block'
        
        

            
@_type-inline-label-padding
            
@form-field-type-label-inline__padding
            
@form-field-type-label-inline__padding-top 15px 0 0
            
Field label padding if @form-field-type is set to 'inline'
        
        

            
@_type-inline-label-width
            
@form-field-type-label-inline__width
            
25.8%
            
Field label width if @form-field-type is set to 'inline'
        
        

            
@_type-inline-control-width
            
@form-field-type-control-inline__width
            
74.2%
            
Field control width if @form-field-type is set to 'inline'
        
        

            
Label "required" asterisk
        
        

            
@_label-asterisk-color
            
@form-field-label-asterisk__color
            
#da370a
            
Label asterisk color
        
        

            
@_label-asterisk-font-size
            
@form-field-label-asterisk__font-size
            
@font-size__s
            
Label asterisk font size
        
        

            
@_label-asterisk-font-family
            
@form-field-label-asterisk__font-family
            
false
            
Label asterisk font family
        
        

            
@_label-asterisk-font-weight
            
@form-field-label-asterisk__font-weight
            
false
            
Label asterisk font weight
        
        

            
@_label-asterisk-font-style
            
@form-field-label-asterisk__font-style
            
false
            
Label asterisk font style
        
        

            
@_label-asterisk-line-height
            
@form-field-label-asterisk__line-height
            
false
            
Label asterisk line height
        
        

            
@_label-asterisk-margin
            
@form-field-label-asterisk__margin
            
0 0 0 @indent__xs
            
Label asterisk margin
        
        

            
Field note
        
        

            
@_note-color
            
@form-field-note__color
            
false
            
Field note text color
        
        

            
@_note-font-size
            
@form-field-note__font-size
            
@font-size__s
            
Field note font size
        
        

            
@_note-font-family
            
@form-field-note__font-family
            
false
            
Field note font family
        
        

            
@_note-font-weight
            
@form-field-note__font-weight
            
false
            
Field note font weight
        
        

            
@_note-font-style
            
@form-field-note__font-style
            
false
            
Field note font style
        
        

            
@_note-line-height
            
@form-field-note__line-height
            
false
            
Field note line height
        
        

            
@_note-margin
            
@form-field-note__margin
            
3px 0 0
            
Field note margin
        
        

            
@_note-padding
            
@form-field-note__padding
            
0
            
Field note padding
        
        

            
@_note-icon-font-content
            
@form-field-note-icon-font__content
            
@icon-pointer-up
            
Field note icon code
        
        

            
@_note-icon-font
            
@form-field-note-icon-font
            
@icon-font
            
Field note icon font
        
        

            
@_note-icon-font-size
            
@form-field-note-icon-font__size
            
@form-field-note__font-size*2
            
Field note icon font size
        
        

            
@_note-icon-font-line-height
            
@form-field-note-icon-font__line-height
            
@form-field-note__font-size
            
Field note icon line height
        
        

            
@_note-icon-font-color
            
@form-field-note-icon-font__color
            
@form-field-note__color
            
Field note icon color
        
        

            
@_note-icon-font-color-hover
            
@form-field-note-icon-font__color-hover
            
false
            
Field note icon hovered color
        
        

            
@_note-icon-font-color-active
            
@form-field-note-icon-font__color-active
            
false
            
Field note icon active color
        
        

            
@_note-icon-font-margin
            
@form-field-note-icon-font__margin
            
false
            
Field note icon margin
        
        

            
@_note-icon-font-vertical-align
            
@form-field-note-icon-font__vertical-align
            
@icon-font__vertical-align
            
Field note icon vertical align
        
        

            
@_note-icon-font-position
            
@form-field-note-icon-font__position
            
@icon-font__position [before | after]
            
Field note icon position
        
        

            
@_note-icon-font-text-hide
            
@form-field-note-icon-font__text-hide
            
@icon-font__text-hide [true | false]
            
Field note icon text hide
        
    
  

Required fields message customization variables

The .lib-form-hasrequired() mixin variables

    

        

            
Mixin variable
            
Global variable
            
Default values [Allowable values]
            
Comment
        
        

            
@_position
            
@form-hasrequired__position
            
top [top | bottom]
            
Position of "required fields" notice
        
        

            
@_color
            
@form-hasrequired__color
            
@form-field-label-asterisk__color
            
Text color of "required fields" notice
        
        

            
@_font-size
            
@form-hasrequired__font-size
            
@font-size__s
            
Font size of "required fields" notice
        
        

            
@_font-family
            
@form-hasrequired__font-family
            
false
            
Font family of "required fields" notice
        
        

            
@_font-weight
            
@form-hasrequired__font-weight
            
false
            
Font weight of "required fields" notice
        
        

            
@_font-style
            
@form-hasrequired__font-style
            
false
            
Font style of "required fields" notice
        
        

            
@_line-height
            
@form-hasrequired__line-height
            
false
            
Line height of "required fields" notice
        
        

            
@_border
            
@form-hasrequired__border
            
false
            
Border of "required fields" notice
        
        

            
@_margin
            
@form-hasrequired__margin
            
@indent__s 0 0
            
Margin of "required fields" notice
        
        

            
@_padding
            
@form-hasrequired__padding
            
false
            
Padding of "required fields" notice
        
    
 

Form element inputs customization

The .lib-form-element-input(@_type: type) mixin is used to style form controls. This mixin accepts 1 mandatory parameter - the control type. This can be:

• input-text - for all input-text-like inputs
• input-radio - for radiobutton
• input-checkbox - for checkbox
• select - for select
• textarea - for textarea

<input type="password" placeholder="placeholder, type = password" /> <input type="text" placeholder="placeholder, type = text" /> <input type="url" placeholder="placeholder, type = url" /> <input type="tel" placeholder="placeholder, type = tel" /> <input type="search" placeholder="placeholder, type = search" /> <input type="number" placeholder="placeholder, type = number" /> <input type="email" placeholder="placeholder, type = email" /> <select><option>type = select</option><option>option</option></select> <select multiple="multiple"><option>type = select multiple</option><option>option</option></select> <textarea placeholder="placeholder, type = textarea" ></textarea>

input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="email"] {
    .lib-form-element-input(@_type: input-text);
    margin-bottom: 20px;
}

select {
    .lib-form-element-input(@_type: select);
    margin-bottom: 20px;
}

select[multiple="multiple"] {
    .lib-css(height, auto);
    margin-bottom: 20px;
}

textarea {
    .lib-form-element-input(@_type: textarea);
    .lib-form-element-textarea-resize();
}

Form element inputs customization variables

    

        

            
Mixin variable
            
Global variable
            
Default value [Allowable value]
            
Comment
        
        

            
@_type
            
@form-element-input-type
            
'' [input-text | select | textarea | input-radio | input-checkbox]
            
Form control type.
@form-element-input__[] global variables are used to set up all form elements style. Control-specific global variables use these @form-element-input__[] variables by default. Control-specific global variables can be set up separately.
@input-text__[] is used to set up input-text controls style
@select__[] is used to set up selects style
@textarea__[] is used to set up textarea style
        
        

            
@_background
            
@form-element-input__background
@input-text__background
@selectbackground
@textarea__background
            
@color-white
@form-element-input__background
@form-element-input__background
@form-element-input__background
            
Form control background
        
        

            
@_border
            
@form-element-input__border
@input-text__border
@select__border
@textarea__border
            
1px solid @form-element-input__border-color
@form-element-input__border
@form-element-input__border
@form-element-input__border
            
Form control border
        
        

            
@_border-radius
            
@form-element-input__border-radius
@input-textborder-radius
@select__border-radius
@textarea__border-radius
            
1px
@form-element-input__border-radius
@form-element-input__border-radius
@form-element-input__border-radius
            
Form control border radius
        
        

            
@_height
            
@form-element-input__height
@input-text__height
@select__height
@textarea__height
            
32px
@form-element-input__height
@form-element-input__height
auto
            
Form control height
        
        

            
@_width
            
@form-element-input__width
@input-text__width
@select__width
@textarea__width
            
100%
@form-element-input__width
@form-element-input__width
@form-element-input__width
            
Form control width
        
        

            
@_margin
            
@form-element-input__margin
@input-text__margin
@select__margin
@textarea__margin
            
false [true | false]
@form-element-input__margin
@form-element-input__margin
0
            
Form control margin
        
        

            
@_padding
            
@form-element-input__padding
@input-text__padding 
@select__padding
@textarea__padding
            
0 9px
@form-element-input__padding
5px 10px 4px
@indent__s
            
Form control padding
        
        

            
@_vertical-align
            
@form-element-input__vertical-align
@input-text__vertical-align
@select__vertical-align
@textarea__vertical-align
            
baseline
@form-element-input__vertical-align
@form-element-input__vertical-align
@form-element-input__vertical-align
            
Form control vertical align
        
        

            
@_background-clip
            
@form-element-input__background-clip

@input-text__background-clip
@select__background-clip
@textarea__background-clip
            
padding-box
[padding-box | border-box | content-box]
@form-element-input__background-clip
@form-element-input__background-clip
@form-element-input__background-clip
            
Form control background clip
        
        

            
Text settings
        
        

            
@_color
            
@form-element-input__color
@input-text__color
@select__color
@textarea__color
            
false
@form-element-input__color
@form-element-input__color
@form-element-input__color
            
Form control text color
        
        

            
@_font-size
            
@form-element-input__font-size
@input-text__font-size
@select__font-size
@textarea__font-size
            
@font-size__base
@form-element-input__font-size
@form-element-input__font-size
@form-element-input__font-size
            
Form control font size
        
        

            
@_font-family
            
@form-element-input__font-family
@input-text__font-family
@select__font-family
@textarea__font-family
            
@font-family__base
@form-element-input__font-family
@form-element-input__font-family
@form-element-input__font-family
            
Form control font family
        
        

            
@_font-weight
            
@form-element-input__font-weight
@input-text__font-weight
@select__font-weight
@textarea__font-weight
            
false
@form-element-input__font-weight
@form-element-input__font-weight
@form-element-input__font-weight
            
Form control font weight
        
        

            
@_font-style
            
@form-element-input__font-style
@input-text__font-style
@selectfont-style
@textarea__font-style
            
false
@form-element-input__font-style
@form-element-input__font-style
@form-element-input__font-style
            
Form control font style
        
        

            
@_line-height
            
@form-element-input__line-height
@input-text__line-height
@select__line-height
@textarea__line-height
            
@line-height__base
@form-element-input__line-height
@form-element-input__line-height
@form-element-input__line-height
            
Form control line height
        
        

            
Placeholder
        
        

            
@_placeholder-color
            
@form-element-input-placeholder__color
@input-text-placeholder__color
@select-placeholder__color
@textarea-placeholder__color
            
#c2c2c2
@form-element-input-placeholder__color
@form-element-input-placeholder__color
@form-element-input-placeholder__color
            
Form control placeholder color
        
        

            
@_placeholder-font-style
            
@form-element-input-placeholder__font-style
@inputtext-placeholder-font-style
@select-placeholder__font-style
@textarea-placeholder__font-style
            
@form-element-input__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
            
Form control placeholder font style
        
        

            
Disabled element
        
        

            
@_disabled-background
            
@form-element-input__disabled__background
@inputtextdisabled-background
@select__disabled__background
@textarea__disabled__background
            
@form-element-input__background
@form-element-input__disabled__background
@form-element-input__disabled__background
@form-element-input__disabled__background
            
Disabled form element background
        
        

            
@_disabled-border
            
@form-element-input__disabled__border
@input-text__disabled__border
@select__disabled__border
@textarea__disabled__border
            
@form-element-input__border
@form-element-input__disabled__border
@form-element-input__disabled__border
@form-element-input__disabled__border
            
Disabled form element border
        
        

            
@_disabled-opacity
            
@form-element-input__disabled__opacity
@input-text__disabled__opacity
@select__disabled__opacity
@textarea__disabled__opacity
            
.5
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
            
Disabled form element opacity
        
        

            
@_disabled-color
            
@form-element-input__disabled__color
@input-text__disabled__color
@select__disabled__color
@textarea__disabled__color
            
@form-element-input__color
@form-element-input__disabled__color
@form-element-input__disabled__color
@form-element-input__disabled__color
            
Disabled form element text color
        
        

            
@_disabled-font-style
            
@form-element-input__disabled__font-style
@input-text__disabled__font-style
@select__disabled__font-style
@textarea__disabled__font-style
            
@form-element-input__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
            
Disabled form element font style
        
        

            
Focused elements
        
        

            
@_focus-background
            
@form-element-input__focus__background
@input-text__focus__background
@select__focus__background
@textarea__focus__background
            
@form-element-input__background
@form-element-input__focus__background
@form-element-input__focus__background
@form-element-input__focus__background
            
Focused form element background
        
        

            
@_focus-border
            
@form-element-input__focus__border
@input-text__focus__border
@select__focus__border
@textarea__focus__border
            
@form-element-input__border
@form-element-input__focus__border
@form-element-input__focus__border
@form-element-input__focus__border
            
Focused form element border
        
        

            
@_focus-color
            
@form-element-input__focus__color
@input-text__focus__color
@select__focus__color
@textarea__focus__color
            
@form-element-input__color
@form-element-input__focus__color
@form-element-input__focus__color
@form-element-input__focus__color
            
Focused form element color
        
        

            
@_focus-font-style
            
@form-element-input__focus__font-style
@input-text__focus__font-style
@select__focus__font-style
@textarea__focus__font-style
            
@form-element-input__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style
            
Focused form element font style
        
    
  

Form element choice

The .lib-form-element-choice() mixin is used to customize checkboxes and radio buttons.

<input type="checkbox" name="checkbox-example" /><label for="checkbox-example">Label for checkbox</label><br /> <input type="radio" name="radio-example" /><label for="radio-example">Label for radio button</label>

input[type="checkbox"] {
    .lib-form-element-choice(@_type: input-checkbox);
}

input[type="radio"] {
    .lib-form-element-choice(@_type: input-radio);
}

Form element choice variables

    

        

            
Mixin variable
            
Global variable
            
Default values [Allowable values]
            
Comment
        
        

            
@_type
            
@form-element-choice__type
            
'' ['' | radio | checkbox]
            
Choice element type
        
        

            
@_vertical-align
            
@form-element-choice__vertical-align
@input-radio__vertical-align
@input-checkbox__vertical-align
            
false
@form-element-choice__vertical-align
@form-element-choice__vertical-align
            
Choice element vertical align
        
        

            
@_margin
            
@form-element-choice__margin
@input-radio__margin
@input-checkbox__margin
            
2px @indent__xs 0 0
@form-element-choice__margin
@form-element-choice__margin
            
Choice element margin
        
        

            
@_disabled-opacity
            
@form-element-choice__disabled__opacity
@input-radio__disabled__opacity
@input-checkbox__disabled__opacity
            
@form-element-input__disabled__opacity
@form-element-choice__disabled__opacity
@form-element-choice__disabled__opacity
            
Disabled choice element opacity
        
    
  

Custom color

The .lib-form-element-color() mixin is used to set form elements background and color.

  @_border-color: ''
  @_background: ''
  @_color: ''
  @_focus-border-color: ''
  @_focus-background: ''
  @_focus-color: ''
  @_disabled-border-color: ''
  @_disabled-background: ''
  @_disabled-color: ''
  @_placeholder-color: ''

<input type="text" class="text text-example-1" placeholder="placeholder, type = text" /><br /><br /> <input type="text" class="text text-example-1" placeholder="placeholder, type = text, disabled" disabled="disabled" /><br /><br /> <select class="select-example-1"><option>type = select</option><option>option</option></select><br /><br /> <textarea class="textarea-example-1" placeholder="placeholder, type = textarea"></textarea>

input.text-example-1,
select.select-example-1,
textarea.textarea-example-1 {
    .lib-form-element-color(
        @_background: #fdf0d5,
        @_border-color: #fc0,
        @_color: #b30000,
        @_focus-color: #060,
        @_focus-border-color: #cff,
        @_disabled-color: #fcc
    );
}

input.text-example-1,
textarea.textarea-example-1 {
    .lib-form-element-color(
        @_placeholder-color: #ccc
    );
}

Input number - input-text view

<input type="number" class="number number-example" placeholder="placeholder, type = number " />

.number-example {
    .lib-form-element-number-reset();
}

Input search - input-text view

<input type="search" class="search search-example" placeholder="placeholder, type = search " />

.search-example {
    .lib-form-element-search-reset();
}

Form validation

The .lib-form-validation-note() mixin is used to customize form validation error messages.

<input type="text" class="textarea-example-4 mage-error" placeholder="placeholder, type = text" /> <div class="mage-error">This is a required field.</div> <br /> <input type="text" class="textarea-example-5 valid" placeholder="placeholder, type = text" /> <br /><br /> <select class="select-example-4 mage-error"><option>type = select</option><option>option</option></select> <div class="mage-error">This is a required field.</div> <br /> <select class="select-example-5 valid"><option>type = select</option><option>option</option></select> <br /><br /> <textarea class="textarea-example-4 mage-error" placeholder="placeholder, type = textarea"></textarea> <div class="mage-error">This is a required field.</div> <br /> <textarea class="textarea-example-5 valid" placeholder="placeholder, type = textarea"></textarea> <br /><br /> <input type="checkbox" name="checkbox-example-1" class="checkbox-example-2 mage-error" /> <div class="mage-error">This is a required field.</div> <br /><br /> <input type="radio" name="radio-example-1" class="radio-example-2 mage-error" /> <div class="mage-error">This is a required field.</div>

input,
textarea,
select {
    .lib-form-validation-note();
}

Form validation variables

    

        

            
Mixin variable
            
Global variable
            
Default values [Allowable values]
            
Comment
        
        

            
@_note-color
            
@form-validation-note__color-error
            
@error__color
            
Validation note text color
        
        

            
@_note-font-size
            
@form-validation-note__font-size
            
@font-size__s
            
Validation note font size
        
        

            
@_note-font-family
            
@form-validation-note__font-family
            
false
            
Validation note font family
        
        

            
@_note-font-style
            
@form-validation-note__font-style
            
false
            
Validation note font style
        
        

            
@_note-font-weight
            
@form-validation-note__font-weight
            
false
            
Validation note font weight
        
        

            
@_note-line-height
            
@form-validation-note__line-height
            
false
            
Validation note line height
        
        

            
@_note-margin
            
@form-validation-note__margin
            
3px 0 0
            
Validation note margin
        
        

            
@_note-padding
            
@form-validation-note__padding
            
false
            
Validation note padding
        
        

            
@_note-icon-use
            
@form-validation-note-icon__use
            
false [true | false]
            
Show validation note icon
        
        

            
@_note-icon-font-content
            
@form-validation-note-icon__font-content
            
@icon-pointer-up
            
Validation note icon code
        
        

            
@_note-icon-font
            
@form-validation-note-icon__font
            
@icon-font
            
Validation note icon font
        
        

            
@_note-icon-font-size
            
@form-validation-note-icon__font-size
            
@form-validation-note__font-size * 2
            
Validation note icon font size
        
        

            
@_note-icon-font-line-height
            
@form-validation-note-icon__font-line-height
            
@form-validation-note__font-size
            
Validation note icon line height
        
        

            
@_note-icon-font-color
            
@form-validation-note-icon__font-color
            
@form-validation-note__color-error
            
Validation note icon color
        
        

            
@_note-icon-font-color-hover
            
@form-validation-note-icon__font-color-hover
            
false
            
Hovered validation note icon color
        
        

            
@_note-icon-font-color-active
            
@form-validation-note-icon__font-color-active
            
false
            
Active validation note icon color
        
        

            
@_note-icon-font-margin
            
@form-validation-note-icon__font-margin
            
false
            
Validation note icon margin
        
        

            
@_note-icon-font-vertical-align
            
@form-validation-note-icon__font-vertical-align
            
@icon-font__vertical-align
            
Validation note icon vertical align
        
        

            
@_note-icon-font-position
            
@form-validation-note-icon__font-position
            
@icon-font__position
            
Validation note icon position
        
        

            
@_note-icon-font-text-hide
            
@form-validation-note-icon__font-text-hide
            
@icon-font__text-hide
            
Validation note icon text hide