Input control

Enhancement for standard HTML input control.


In Metro UI, you can use enhancement version of input control. To define it, add attribute data-role="input" to HTML input element. You can assign role input to any text inputs: text, password, email, etc.

                    <input type="text" data-role="input">

Prepend data

You can add prepend data to input field with attribute data-prepend="...".

                    <input type="text" data-role="input" data-prepend="User name: ">

Append data

You can add append data to input field with attribute data-append="...".

                    <input type="text" data-role="input" data-append=".00%">

Clear button

When Metro UI create input component, him add to element two special buttons: clear-button and reveal-button. These buttons shown when input focused or user move mouse over input.

This button clear current value and flash it to default if default value is defined. You can set default value with attribute data-default-value="...". You can disable clear-button with attribute data-clear-button="false". You can change default icon for this button. To set your icon, use attribute data-clear-button-icon="...".


Input with default value 100

Input without clear button

Custom clear button icon

                    <input type="text" data-role="input" class="">

                    <p>Input with default value 100</p>
                    <input type="text" data-role="input" data-default-value="100">

                    <p>Input without clear button</p>
                    <input type="text" data-role="input" data-clear-button="false">

                    <p>Custom clear button icon</p>
                    <input type="text" data-role="input" data-clear-button-icon="<span class='mif-cancel'></span>">

Reveal button

This button works with input[type=password] field. When user press this button, him can see input value. You can disable reveal-button with attribute data-reveal-button="false". You can change default icon for this button. To set your icon, use attribute data-reveal-button-icon="...".

Input password

Input without reveal button

Custom reveal button icon

                    <p>Input password</p>
                    <input type="password" data-role="input">

                    <p>Input without reveal button</p>
                    <input type="password" data-role="input" data-reveal-button="false">

                    <p>Custom reveal button icon</p>
                    <input type="password" data-role="input" data-reveal-button-icon="<span class='mif-lamp mif-2x'></span>">

You can enable search-button with attribute data-search-button="true". You can change default icon for this button. To set your icon, use attribute data-search-button-icon="...".

When user press this button:

  1. If You define attribute data-search-button-click="custom", Metro UI execute your function, defined with attribute data-on-search-button-click="..."
  2. If you define attribute data-search-button-click="submit", Metro UI submit a form, where search input is defined

Default search button icon

Custom search button icon

                    <p>Input without search button</p>
                    <input type="text" data-role="input" data-search-button="true">

                    <p>Custom search button icon</p>
                    <input type="text" data-role="input" data-search-button="true"
                        data-search-button-icon="<span class='mif-rocket mif-2x'></span>">

Define search button click event

Custom func

Form submit func

                        function mySubmitSearch(val){
                            alert('Custom submit function');
                    <form action="javascript:" onsubmit="alert('Form submit with self function');">
                        <p>Custom func</p>
                        <input type="text" data-role="input"

                        <p>Form submit func</p>
                        <input type="text" data-role="input">


Metro UI input support history feature. To enable it feature, add attribute data-history="true" to input. This enhance the input field that shows you the last input values that has been recently entered. Use the up and down key's to scroll through previously typed input values. Use attribute data-prevent-submit="true" to cancel submitting form when user press Enter.

Enter value and press Enter, repeat, then press Up or Down arrows to access entered values.

                    <input type="text" data-role="input" data-history="true">

Custom buttons

You can create custom button for input control with attribute data-custom-buttons="...". To add custom button, first-off - create array with your buttons and add array name as value for attribute data-custom-buttons. This array must be created before input component initiated.

                        var customButtons = [
                                html: "<span class='mif-user'></span>",
                                cls: "alert",
                                onclick: "alert('You press user button')"
                                html: "<span class='mif-cog'></span>",
                                cls: "warning",
                                onclick: "alert('You press cog button')"

                    <input type="text" data-role="input" data-custom-buttons="customButtons">

Each button must be defined as object with three properties: html - button caption, cls - classes for custom button, onclick - event for button when user clicked on it.


You can create input with autocomplete feature. To create it, use attributes: data-autocomplete, data-autocomplete-divider, data-autocomplete-list-height.

Begin type one of Ukraine, USA, Canada, Marokko, Singapur

                    <input type="text" data-role="input" data-autocomplete="Ukraine, USA, Canada, Marokko, Singapur">


Option Data-* Default Desc
history data-history false Enable history feature
historyPreset data-history-preset Preset values for history
historyDivider data-history-divider | Divider for Preset values for history
preventSubmit data-prevent-submit false Prevent submitting form when enabled history and user press Enter in input
defaultValue data-default-value Default value for input. Used when user click clear button or init input value
size data-size Set specific size for input
prepend data-prepend Add prepend label
append data-append Add append label
clearButton data-clear-button true Add clear button to input
clearButtonIcon data-clear-button-icon <span class='default-icon-cross'> Icon for clear button
revealButton data-reveal-button true Add reveal button to input
revealButtonIcon data-reveal-button-icon <span class='default-icon-eye'> Icon for reveal button
customButtons data-custom-buttons Array name with custom buttons


Event Data-* Context
onHistoryChange(val, history, index) data-on-history-change input
onHistoryUp(val, history, index) data-on-history-up input
onHistoryDown(val, history, index) data-on-history-down input
onClearClick(curr, new) data-on-clear-click input
onRevealClick(curr) data-on-reveal-click input
onInputCreate(el) data-on-input-create input


You can use methods to interact with input component: getHistory(), setHistory(history, append) - history: array or string, append - bool, clear(), toDefault(), enable(), disable(), toggleState().

                    var input = Metro.getPlugin(el,'input');


You can customize your input with special attributes:

Option Data-* Desc
clsComponent data-cls-component Additional classes for input control.
clsInput data-cls-input Additional classes for input element.
clsPrepend data-cls-prepend Additional classes for input prepend data.
clsAppend data-cls-append Additional classes for input append data.
clsClearButton data-cls-clear-button Additional classes for input clear button.
clsRevealButton data-cls-reveal-button Additional classes for input reveal button.
clsCustomButton data-cls-custom-button Additional classes for input custom button.

                    <input type="text" data-role="input"
                        data-cls-input="text-bold bg-dark fg-white text-center"

Additional classes

You can use additional classes to change input size: .input-large and .input-small.

Input small
Input regular
Input large