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 with fields in 2 columns

.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="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"] {
    .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.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

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

Input search - input-text view

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

Form validation

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

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