# 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-choise()` 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