@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/clearableinput.json

@@ -0,0 +1,789 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:11.796Z",
+    "source": "https://uikit.developers.rio.cloud/#components/clearableInput",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/clearableinput",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "64ee9e49c195c0181797df06fac345764758c4f28d24026dc877924499cc6144"
+  },
+  "title": "ClearableInput",
+  "lead": "Control, which can be cleared when it has a value.",
+  "content": [
+    {
+      "heading": "ClearableInput",
+      "body": "Can be used as either a controlled or uncontrolled component, depending on your use case. https://facebook.github.io/react/docs/uncontrolled-components.html",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600\"><div class=\"form-group\"><label for=\"1\">Default</label><div class=\"ClearableInput input-group\"><input id=\"1\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"2\">With a default value</label><div class=\"ClearableInput input-group\"><input id=\"2\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Matti\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"3\">With a button addon</label><div class=\"input-group\"><div class=\"ClearableInput input-group\"><input id=\"3\" placeholder=\"Type in here\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><span class=\"input-group-btn\"><button class=\"btn btn-primary btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-search\"></span></button></span></div></div><div class=\"form-group\"><label for=\"4\">With many button addons</label><div class=\"input-group\"><div class=\"ClearableInput input-group\"><input id=\"4\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Clear me\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><span class=\"input-group-btn\"><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-chat\"></span></button><button class=\"btn btn-primary btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-send\"></span></button></span></div></div><div class=\"form-group\"><label for=\"5\">With addons</label><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input id=\"5\" placeholder=\"Search by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><span class=\"input-group-btn\"><button class=\"btn btn-primary\" type=\"button\">Button</button></span></div></div><div class=\"form-group\"><label for=\"6\">With addons on both sides</label><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-finish\" aria-hidden=\"true\"></span></div><div class=\"ClearableInput input-group\"><input id=\"6\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"234\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"input-group-addon\">KM</div></div></div><div class=\"form-group\"><label for=\"7\">With type password</label><div class=\"ClearableInput input-group\"><input id=\"1\" class=\"form-control withClearButton\" type=\"password\" tabindex=\"0\" value=\"Matti\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"8\">With type email</label><div class=\"ClearableInput input-group\"><input id=\"8\" class=\"form-control withClearButton\" type=\"email\" tabindex=\"0\" value=\"test@test.de\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"9\">With limited amount of characters</label><div class=\"ClearableInput input-group\"><input id=\"9\" class=\"form-control withClearButton\" type=\"text\" maxlength=\"20\" tabindex=\"0\" value=\"Limited to 20 chars\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"10\">Small input</label><div class=\"ClearableInput input-group\"><input id=\"10\" class=\"form-control input-sm withClearButton\" type=\"text\" tabindex=\"0\" value=\"Matti\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group form-group-lg\"><label for=\"11\">Large input</label><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-finish\" aria-hidden=\"true\"></span></div><div class=\"ClearableInput input-group\"><input id=\"11\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"234\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"input-group-addon\">KM</div></div></div><div class=\"form-group has-error has-feedback\"><label for=\"12\">With feedback</label><div class=\"ClearableInput input-group\"><input id=\"12\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Some wrong value\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><span class=\"form-control-feedback rioglyph rioglyph-error-sign\" aria-hidden=\"true\"></span></div><div class=\"form-group\"><label for=\"1\">Disabled input</label><div class=\"ClearableInput input-group pointer-events-none\"><input id=\"13\" class=\"form-control withClearButton disabled\" type=\"text\" disabled=\"\" tabindex=\"0\" value=\"This input is disabled\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\n\nexport default () => (\n    <div className='max-width-600'>\n        <div className='form-group'>\n            <label htmlFor='1'>Default</label>\n            <ClearableInput id='1' />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='2'>With a default value</label>\n            <ClearableInput id='2' defaultValue='Matti' />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='3'>With a button addon</label>\n            <div className='input-group'>\n                <ClearableInput id='3' placeholder='Type in here' />\n                <span className='input-group-btn'>\n                    <button className='btn btn-primary btn-icon-only' type='button'>\n                        <span className='rioglyph rioglyph-search' />\n                    </button>\n                </span>\n            </div>\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='4'>With many button addons</label>\n            <div className='input-group'>\n                <ClearableInput id='4' defaultValue='Clear me' onChange={(value: string) => console.log(value)} />\n                <span className='input-group-btn'>\n                    <button className='btn btn-default btn-icon-only' type='button'>\n                        <span className='rioglyph rioglyph-chat' />\n                    </button>\n                    <button className='btn btn-primary btn-icon-only' type='button'>\n                        <span className='rioglyph rioglyph-send' />\n                    </button>\n                </span>\n            </div>\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='5'>With addons</label>\n            <div className='input-group'>\n                <span className='input-group-addon'>\n                    <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                </span>\n                <ClearableInput id='5' placeholder='Search by name' onChange={(value: string) => console.log(value)} />\n                <span className='input-group-btn'>\n                    <button className='btn btn-primary' type='button'>\n                        Button\n                    </button>\n                </span>\n            </div>\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='6'>With addons on both sides</label>\n            <div className='input-group'>\n                <div className='input-group-addon'>\n                    <span className='rioglyph rioglyph-finish' aria-hidden='true' />\n                </div>\n                <ClearableInput id='6' defaultValue='234' onChange={(value: string) => console.log(value)} />\n                <div className='input-group-addon'>KM</div>\n            </div>\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='7'>With type password</label>\n            <ClearableInput id='1' defaultValue='Matti' type='password' />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='8'>With type email</label>\n            <ClearableInput id='8' defaultValue='test@test.de' type='email' />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='9'>With limited amount of characters</label>\n            <ClearableInput id='9' defaultValue='Limited to 20 chars' maxLength={20} />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='10'>Small input</label>\n            <ClearableInput id='10' defaultValue='Matti' inputClassName='input-sm' />\n        </div>\n\n        <div className='form-group form-group-lg'>\n            <label htmlFor='11'>Large input</label>\n            <div className='input-group'>\n                <div className='input-group-addon'>\n                    <span className='rioglyph rioglyph-finish' aria-hidden='true' />\n                </div>\n                <ClearableInput id='11' defaultValue='234' onChange={(value: string) => console.log(value)} />\n                <div className='input-group-addon'>KM</div>\n            </div>\n        </div>\n\n        <div className='form-group has-error has-feedback'>\n            <label htmlFor='12'>With feedback</label>\n            <ClearableInput id='12' defaultValue='Some wrong value' />\n            <span className='form-control-feedback rioglyph rioglyph-error-sign' aria-hidden='true' />\n        </div>\n\n        <div className='form-group'>\n            <label htmlFor='1'>Disabled input</label>\n            <ClearableInput id='13' defaultValue='This input is disabled' disabled />\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600\">\n    <div class=\"form-group\">\n        <label for=\"1\">Default</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"1\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"2\">With a default value</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"2\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Matti\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"3\">With a button addon</label>\n        <div class=\"input-group\">\n            <div class=\"ClearableInput input-group\">\n                <input id=\"3\" placeholder=\"Type in here\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <span class=\"input-group-btn\">\n                <button class=\"btn btn-primary btn-icon-only\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-search\">\n                    </span>\n                </button>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"4\">With many button addons</label>\n        <div class=\"input-group\">\n            <div class=\"ClearableInput input-group\">\n                <input id=\"4\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Clear me\">\n                <span class=\"clearButton\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <span class=\"input-group-btn\">\n                <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-chat\">\n                    </span>\n                </button>\n                <button class=\"btn btn-primary btn-icon-only\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-send\">\n                    </span>\n                </button>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"5\">With addons</label>\n        <div class=\"input-group\">\n            <span class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                </span>\n            </span>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"5\" placeholder=\"Search by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <span class=\"input-group-btn\">\n                <button class=\"btn btn-primary\" type=\"button\">Button</button>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"6\">With addons on both sides</label>\n        <div class=\"input-group\">\n            <div class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph-finish\" aria-hidden=\"true\">\n                </span>\n            </div>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"6\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"234\">\n                <span class=\"clearButton\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <div class=\"input-group-addon\">KM</div>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"7\">With type password</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"1\" class=\"form-control withClearButton\" type=\"password\" tabindex=\"0\" value=\"Matti\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"8\">With type email</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"8\" class=\"form-control withClearButton\" type=\"email\" tabindex=\"0\" value=\"test@test.de\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"9\">With limited amount of characters</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"9\" class=\"form-control withClearButton\" type=\"text\" maxlength=\"20\" tabindex=\"0\" value=\"Limited to 20 chars\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"10\">Small input</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"10\" class=\"form-control input-sm withClearButton\" type=\"text\" tabindex=\"0\" value=\"Matti\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group form-group-lg\">\n        <label for=\"11\">Large input</label>\n        <div class=\"input-group\">\n            <div class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph-finish\" aria-hidden=\"true\">\n                </span>\n            </div>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"11\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"234\">\n                <span class=\"clearButton\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <div class=\"input-group-addon\">KM</div>\n        </div>\n    </div>\n    <div class=\"form-group has-error has-feedback\">\n        <label for=\"12\">With feedback</label>\n        <div class=\"ClearableInput input-group\">\n            <input id=\"12\" class=\"form-control withClearButton\" type=\"text\" tabindex=\"0\" value=\"Some wrong value\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n        <span class=\"form-control-feedback rioglyph rioglyph-error-sign\" aria-hidden=\"true\">\n        </span>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"1\">Disabled input</label>\n        <div class=\"ClearableInput input-group pointer-events-none\">\n            <input id=\"13\" class=\"form-control withClearButton disabled\" type=\"text\" disabled=\"\" tabindex=\"0\" value=\"This input is disabled\">\n            <span class=\"clearButton\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "children",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component."
+                    },
+                    {
+                      "name": "defaultValue",
+                      "type": "String",
+                      "default": "",
+                      "description": "Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value changes. Receives new value as an argument."
+                    },
+                    {
+                      "name": "onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value is cleared via the clear button"
+                    },
+                    {
+                      "name": "onKeyPress",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for every key pressed including \"Enter\" key"
+                    },
+                    {
+                      "name": "onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus"
+                    },
+                    {
+                      "name": "onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gains the focus"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element"
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element"
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The translated text that shall be shown when the input is empty"
+                    },
+                    {
+                      "name": "inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback ref for the underlying input. Alternatively, use can use a forward ref."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms"
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "\"text\"",
+                      "description": "Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password'"
+                    },
+                    {
+                      "name": "maxLength",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the maximum amount of characters that can be entered"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the input component"
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defined whether or not the input has the error styling"
+                    },
+                    {
+                      "name": "mask",
+                      "type": "string | (string | RegExp)[]",
+                      "default": "",
+                      "description": "The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"*\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"-- *** *** ***\" \"+49 00 000 00\""
+                    },
+                    {
+                      "name": "maskPlaceholder",
+                      "type": "string | null",
+                      "default": "_",
+                      "description": "Placeholder to cover unfilled parts of the mask"
+                    },
+                    {
+                      "name": "maskVisibility",
+                      "type": "'always' | 'onFocus' | 'never'",
+                      "default": "onFocus",
+                      "description": "Controls when the mask pattern is visible."
+                    },
+                    {
+                      "name": "maskOverwrite",
+                      "type": "boolean | 'shift' | undefined",
+                      "default": "true",
+                      "description": "Enable characters overwriting."
+                    },
+                    {
+                      "name": "maskDefinitions",
+                      "type": "Record<string, string | RegExp>",
+                      "default": "",
+                      "description": "Custom definitions to have more control over your mask. The defined character will be replaced in your mask."
+                    },
+                    {
+                      "name": "maskDispatch",
+                      "type": "(appended: string, dynamicMasked: any) => any",
+                      "default": "",
+                      "description": "Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work."
+                    },
+                    {
+                      "name": "min",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Minimum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "max",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Maximum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "Additional props",
+                      "type": "",
+                      "default": "",
+                      "description": "All additional properties are passed down to the underlying input like the autoComplete prop"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 form-group\"><label for=\"controlledInput\">Controlled example</label><div class=\"ClearableInput input-group\"><input id=\"controlledInput\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><br><button type=\"button\" class=\"btn btn-primary\">Set random value</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport { generateDummyText } from '../../../utils/data';\n\nconst ClearableInputControlled = () => {\n    const [inputValue, setInputValue] = useState('');\n\n    const handleSetRandomValue = () => setInputValue(generateDummyText());\n\n    const handleInputChange = (newValue: string) => {\n        setInputValue(newValue);\n        if (newValue) {\n            Notification.info(newValue);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent<HTMLSpanElement>) => {\n        const target = event.target as HTMLSpanElement;\n        Notification.info('Input cleared');\n    };\n\n    const handleKeyPress = (event: React.KeyboardEvent<unknown>) => {\n        console.log(event.key);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        Notification.info('Input lost focus');\n    };\n\n    return (\n        <div className='max-width-600 form-group'>\n            <label htmlFor='controlledInput'>Controlled example</label>\n            <ClearableInput\n                id='controlledInput'\n                value={inputValue}\n                onChange={handleInputChange}\n                onClear={handleClear}\n                onKeyPress={handleKeyPress}\n                onBlur={handleBlur}\n            />\n            <br />\n            <button type='button' className='btn btn-primary' onClick={handleSetRandomValue}>\n                Set random value\n            </button>\n        </div>\n    );\n};\n\nexport default ClearableInputControlled;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 form-group\">\n    <label for=\"controlledInput\">Controlled example</label>\n    <div class=\"ClearableInput input-group\">\n        <input id=\"controlledInput\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n        <span class=\"clearButton hide\">\n            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n            </span>\n        </span>\n    </div>\n    <br>\n    <button type=\"button\" class=\"btn btn-primary\">Set random value</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "children",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component."
+                    },
+                    {
+                      "name": "defaultValue",
+                      "type": "String",
+                      "default": "",
+                      "description": "Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value changes. Receives new value as an argument."
+                    },
+                    {
+                      "name": "onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value is cleared via the clear button"
+                    },
+                    {
+                      "name": "onKeyPress",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for every key pressed including \"Enter\" key"
+                    },
+                    {
+                      "name": "onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus"
+                    },
+                    {
+                      "name": "onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gains the focus"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element"
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element"
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The translated text that shall be shown when the input is empty"
+                    },
+                    {
+                      "name": "inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback ref for the underlying input. Alternatively, use can use a forward ref."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms"
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "\"text\"",
+                      "description": "Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password'"
+                    },
+                    {
+                      "name": "maxLength",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the maximum amount of characters that can be entered"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the input component"
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defined whether or not the input has the error styling"
+                    },
+                    {
+                      "name": "mask",
+                      "type": "string | (string | RegExp)[]",
+                      "default": "",
+                      "description": "The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"*\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"-- *** *** ***\" \"+49 00 000 00\""
+                    },
+                    {
+                      "name": "maskPlaceholder",
+                      "type": "string | null",
+                      "default": "_",
+                      "description": "Placeholder to cover unfilled parts of the mask"
+                    },
+                    {
+                      "name": "maskVisibility",
+                      "type": "'always' | 'onFocus' | 'never'",
+                      "default": "onFocus",
+                      "description": "Controls when the mask pattern is visible."
+                    },
+                    {
+                      "name": "maskOverwrite",
+                      "type": "boolean | 'shift' | undefined",
+                      "default": "true",
+                      "description": "Enable characters overwriting."
+                    },
+                    {
+                      "name": "maskDefinitions",
+                      "type": "Record<string, string | RegExp>",
+                      "default": "",
+                      "description": "Custom definitions to have more control over your mask. The defined character will be replaced in your mask."
+                    },
+                    {
+                      "name": "maskDispatch",
+                      "type": "(appended: string, dynamicMasked: any) => any",
+                      "default": "",
+                      "description": "Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work."
+                    },
+                    {
+                      "name": "min",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Minimum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "max",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Maximum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "Additional props",
+                      "type": "",
+                      "default": "",
+                      "description": "All additional properties are passed down to the underlying input like the autoComplete prop"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 form-group \"><label for=\"uncontrolledInput\">Controlled component with restriction and used with custom input</label><div class=\"ClearableInput input-group\"><input id=\"uncontrolledInput\" placeholder=\"Please enter a number\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useRef, useEffect } from 'react';\nimport toNumber from 'lodash/fp/toNumber';\nimport isNil from 'lodash/fp/isNil';\n\nimport ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\n\nconst ClearableInputControlledRestricted = () => {\n    const [value, setValue] = useState('');\n    const [showError, setShowError] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => console.log({ ref: inputRef.current }), [inputRef.current]);\n\n    const handleInputChange = (newValue: string) => {\n        const convertedValue = toNumber(newValue);\n        const isValid = !Number.isNaN(convertedValue);\n\n        setValue(isValid ? newValue : value);\n        setShowError(!isNil(newValue) && !isValid);\n    };\n\n    return (\n        <div className={`max-width-600 form-group ${showError ? 'has-error has-feedback' : ''}`}>\n            <label htmlFor='uncontrolledInput'>Controlled component with restriction and used with custom input</label>\n            <ClearableInput\n                id='uncontrolledInput'\n                ref={inputRef}\n                value={value}\n                onChange={handleInputChange}\n                onKeyPress={event => console.log(event)}\n                placeholder='Please enter a number'\n            >\n                {inputProps => <input {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)} />}\n            </ClearableInput>\n            {showError && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n            {showError && (\n                <span className='help-block'>\n                    <span>Only Number is allowed</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default ClearableInputControlledRestricted;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 form-group \">\n    <label for=\"uncontrolledInput\">Controlled component with restriction and used with custom input</label>\n    <div class=\"ClearableInput input-group\">\n        <input id=\"uncontrolledInput\" placeholder=\"Please enter a number\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n        <span class=\"clearButton hide\">\n            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n            </span>\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "children",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component."
+                    },
+                    {
+                      "name": "defaultValue",
+                      "type": "String",
+                      "default": "",
+                      "description": "Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value changes. Receives new value as an argument."
+                    },
+                    {
+                      "name": "onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value is cleared via the clear button"
+                    },
+                    {
+                      "name": "onKeyPress",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for every key pressed including \"Enter\" key"
+                    },
+                    {
+                      "name": "onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus"
+                    },
+                    {
+                      "name": "onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gains the focus"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element"
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element"
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The translated text that shall be shown when the input is empty"
+                    },
+                    {
+                      "name": "inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback ref for the underlying input. Alternatively, use can use a forward ref."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms"
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "\"text\"",
+                      "description": "Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password'"
+                    },
+                    {
+                      "name": "maxLength",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the maximum amount of characters that can be entered"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the input component"
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defined whether or not the input has the error styling"
+                    },
+                    {
+                      "name": "mask",
+                      "type": "string | (string | RegExp)[]",
+                      "default": "",
+                      "description": "The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"*\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"-- *** *** ***\" \"+49 00 000 00\""
+                    },
+                    {
+                      "name": "maskPlaceholder",
+                      "type": "string | null",
+                      "default": "_",
+                      "description": "Placeholder to cover unfilled parts of the mask"
+                    },
+                    {
+                      "name": "maskVisibility",
+                      "type": "'always' | 'onFocus' | 'never'",
+                      "default": "onFocus",
+                      "description": "Controls when the mask pattern is visible."
+                    },
+                    {
+                      "name": "maskOverwrite",
+                      "type": "boolean | 'shift' | undefined",
+                      "default": "true",
+                      "description": "Enable characters overwriting."
+                    },
+                    {
+                      "name": "maskDefinitions",
+                      "type": "Record<string, string | RegExp>",
+                      "default": "",
+                      "description": "Custom definitions to have more control over your mask. The defined character will be replaced in your mask."
+                    },
+                    {
+                      "name": "maskDispatch",
+                      "type": "(appended: string, dynamicMasked: any) => any",
+                      "default": "",
+                      "description": "Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work."
+                    },
+                    {
+                      "name": "min",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Minimum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "max",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Maximum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "Additional props",
+                      "type": "",
+                      "default": "",
+                      "description": "All additional properties are passed down to the underlying input like the autoComplete prop"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ClearableInput with input mask",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap column-gap-50\"><div class=\"form-group\"><label for=\"inputWithMask1\">Input with input mask</label><div class=\"ClearableInput input-group min-width-300\"><input id=\"inputWithMask1\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"inputWithMask2\">Input with input mask that reveals itself on focus</label><div class=\"ClearableInput input-group min-width-300\"><input id=\"inputWithMask2\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"inputWithMask3\">Input with input mask that is never shown</label><div class=\"ClearableInput input-group min-width-300\"><input id=\"inputWithMask3\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"inputWithMask4\">Input with custom mask definition</label><div class=\"ClearableInput input-group min-width-300\"><input id=\"inputWithMask4\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"form-group\"><label for=\"inputWithMask5\">Input with Date mask</label><div class=\"ClearableInput input-group min-width-300\"><input id=\"inputWithMask5\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\n\nexport default () => {\n    return (\n        <div className='display-flex flex-wrap column-gap-50'>\n            <div className='form-group'>\n                <label htmlFor='inputWithMask1'>Input with input mask</label>\n                <ClearableInput id='inputWithMask1' mask='+49 00 000 00' className='min-width-300' />\n            </div>\n\n            <div className='form-group'>\n                <label htmlFor='inputWithMask2'>Input with input mask that reveals itself on focus</label>\n                <ClearableInput\n                    id='inputWithMask2'\n                    mask='-- *** *** ***'\n                    maskVisibility='onFocus'\n                    className='min-width-300'\n                />\n            </div>\n\n            <div className='form-group'>\n                <label htmlFor='inputWithMask3'>Input with input mask that is never shown</label>\n                <ClearableInput\n                    id='inputWithMask3'\n                    mask='** *** *** ***'\n                    maskVisibility='never'\n                    className='min-width-300'\n                />\n            </div>\n\n            <div className='form-group'>\n                <label htmlFor='inputWithMask4'>Input with custom mask definition</label>\n                <ClearableInput\n                    id='inputWithMask4'\n                    mask='AA.AAA-AAAA' // is equivalent to /^[A-Z0-9]{2}[.]{1}[A-Z0-9]{3}[-]{1}[A-Z0-9]{4}/\n                    maskDefinitions={{\n                        A: /[A-Z0-9]/,\n                    }}\n                    className='min-width-300'\n                    maskPlaceholder='_'\n                    maskVisibility='always'\n                />\n            </div>\n\n            <div className='form-group'>\n                <label htmlFor='inputWithMask5'>Input with Date mask</label>\n                <ClearableInput\n                    id='inputWithMask5'\n                    mask={Date}\n                    min={new Date(1990, 0, 1)}\n                    max={new Date(2020, 0, 1)}\n                    className='min-width-300'\n                />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap column-gap-50\">\n    <div class=\"form-group\">\n        <label for=\"inputWithMask1\">Input with input mask</label>\n        <div class=\"ClearableInput input-group min-width-300\">\n            <input id=\"inputWithMask1\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"inputWithMask2\">Input with input mask that reveals itself on focus</label>\n        <div class=\"ClearableInput input-group min-width-300\">\n            <input id=\"inputWithMask2\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"inputWithMask3\">Input with input mask that is never shown</label>\n        <div class=\"ClearableInput input-group min-width-300\">\n            <input id=\"inputWithMask3\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"inputWithMask4\">Input with custom mask definition</label>\n        <div class=\"ClearableInput input-group min-width-300\">\n            <input id=\"inputWithMask4\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <label for=\"inputWithMask5\">Input with Date mask</label>\n        <div class=\"ClearableInput input-group min-width-300\">\n            <input id=\"inputWithMask5\" class=\"form-control withInputMask\" type=\"text\" tabindex=\"0\" value=\"\">\n            <span class=\"clearButton hide\">\n                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                </span>\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "children",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component."
+                    },
+                    {
+                      "name": "defaultValue",
+                      "type": "String",
+                      "default": "",
+                      "description": "Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value changes. Receives new value as an argument."
+                    },
+                    {
+                      "name": "onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the value is cleared via the clear button"
+                    },
+                    {
+                      "name": "onKeyPress",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for every key pressed including \"Enter\" key"
+                    },
+                    {
+                      "name": "onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus"
+                    },
+                    {
+                      "name": "onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gains the focus"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element"
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element"
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The translated text that shall be shown when the input is empty"
+                    },
+                    {
+                      "name": "inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback ref for the underlying input. Alternatively, use can use a forward ref."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms"
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "\"text\"",
+                      "description": "Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password'"
+                    },
+                    {
+                      "name": "maxLength",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Defines the maximum amount of characters that can be entered"
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the input component"
+                    },
+                    {
+                      "name": "tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "hasError",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defined whether or not the input has the error styling"
+                    },
+                    {
+                      "name": "mask",
+                      "type": "string | (string | RegExp)[]",
+                      "default": "",
+                      "description": "The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"*\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"-- *** *** ***\" \"+49 00 000 00\""
+                    },
+                    {
+                      "name": "maskPlaceholder",
+                      "type": "string | null",
+                      "default": "_",
+                      "description": "Placeholder to cover unfilled parts of the mask"
+                    },
+                    {
+                      "name": "maskVisibility",
+                      "type": "'always' | 'onFocus' | 'never'",
+                      "default": "onFocus",
+                      "description": "Controls when the mask pattern is visible."
+                    },
+                    {
+                      "name": "maskOverwrite",
+                      "type": "boolean | 'shift' | undefined",
+                      "default": "true",
+                      "description": "Enable characters overwriting."
+                    },
+                    {
+                      "name": "maskDefinitions",
+                      "type": "Record<string, string | RegExp>",
+                      "default": "",
+                      "description": "Custom definitions to have more control over your mask. The defined character will be replaced in your mask."
+                    },
+                    {
+                      "name": "maskDispatch",
+                      "type": "(appended: string, dynamicMasked: any) => any",
+                      "default": "",
+                      "description": "Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work."
+                    },
+                    {
+                      "name": "min",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Minimum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "max",
+                      "type": "string | number | undefined | Date",
+                      "default": "",
+                      "description": "Maximum value to be entered. This prop is extended to accept a Date when used with an input mask."
+                    },
+                    {
+                      "name": "Additional props",
+                      "type": "",
+                      "default": "",
+                      "description": "All additional properties are passed down to the underlying input like the autoComplete prop"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}