@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,301 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:13.953Z",
+    "source": "https://uikit.developers.rio.cloud/#components/numbercontrol",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/numbercontrol",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "45c62dfdf9f01ec2b8821dd37b1badd826e79ec9b03810ce9bef9eebee10b046"
+  },
+  "title": "NumberInput",
+  "lead": null,
+  "content": [
+    {
+      "heading": "NumberInput",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"\"><div class=\"uikit-switch\"><label class=\"switch-label label-position-left\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div>No default values</label></div></div><div class=\"Divider position-relative width-100pct margin-bottom-10\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><label>NumberInput in various sizes:</label><div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\"><div class=\"form-group\"><div class=\"input-group input-group-sm\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm Test\" aria-label=\"number-input\" value=\"0\"></div></div></div><div class=\"form-group\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls Test\" aria-label=\"number-input\" value=\"0\"></div></div></div><div class=\"form-group\"><div class=\"input-group input-group-lg\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-lg Test\" aria-label=\"number-input\" value=\"0\"></div></div></div></div><label>NumberInput with unit and inputAddon in various sizes:</label><div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\"><div class=\"form-group\"><div class=\"input-group input-group-sm\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-dangerousgoods\"></span></div><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm Test\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon \">m</div></div></div><div class=\"form-group\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-dangerousgoods\"></span></div><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls Test\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon \">m</div></div></div><div class=\"form-group\"><div class=\"input-group input-group-lg\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-dangerousgoods\"></span></div><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-lg Test\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon \">m</div></div></div></div><label>NumberInput with limits:</label><div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\"><div class=\"form-group\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"-10\" max=\"7\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"-8\"></div></div></div><div class=\"form-group\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"100\" max=\"200\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"142\"></div><div class=\"input-group-addon \"><span>days</span></div></div></div><div class=\"form-group\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0.001\" max=\"1\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0.025\"></div></div></div></div><div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\"><div class=\"form-group\"><label>Disabled NumberInput</label><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" disabled=\"\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon disabled pointer-events-none\">m</div></div></div><div><label for=\"warning-input\">With warning feedback</label><div class=\"form-group has-feedback has-warning\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input id=\"warning-input\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"123\"><span class=\"form-control-feedback rioglyph rioglyph-warning-sign\"></span><span class=\"help-block white-space-normal\"><span>Short warning message</span></span></div><div class=\"input-group-addon \">unit</div></div></div></div><div><label for=\"no-default\">Fixed 'noDefault'</label><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input id=\"no-default\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"\"></div><div class=\"input-group-addon \">Pcs</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport NumberInput from '@rio-cloud/rio-uikit/NumberInput';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\n\nexport default () => {\n    const [noDefault, setNoDefault] = useState(false);\n\n    return (\n        <div>\n            <div className=''>\n                <Switch onChange={() => setNoDefault(!noDefault)} checked={noDefault} labelPosition='left'>\n                    No default values\n                </Switch>\n            </div>\n            <Divider className='margin-bottom-10' />\n\n            <label>NumberInput in various sizes:</label>\n            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>\n                <div className='form-group'>\n                    <NumberInput noDefault={noDefault} bsSize='sm' className='Test' />\n                </div>\n                <div className='form-group'>\n                    <NumberInput noDefault={noDefault} className='Test' />\n                </div>\n                <div className='form-group'>\n                    <NumberInput noDefault={noDefault} bsSize='lg' className='Test' />\n                </div>\n            </div>\n\n            <label>NumberInput with unit and inputAddon in various sizes:</label>\n            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>\n                <div className='form-group'>\n                    <NumberInput\n                        noDefault={noDefault}\n                        bsSize='sm'\n                        className='Test'\n                        inputAddon='rioglyph rioglyph-dangerousgoods'\n                        unit='m'\n                    />\n                </div>\n                <div className='form-group'>\n                    <NumberInput\n                        noDefault={noDefault}\n                        className='Test'\n                        inputAddon='rioglyph rioglyph-dangerousgoods'\n                        unit='m'\n                    />\n                </div>\n                <div className='form-group'>\n                    <NumberInput\n                        noDefault={noDefault}\n                        bsSize='lg'\n                        className='Test'\n                        inputAddon='rioglyph rioglyph-dangerousgoods'\n                        unit='m'\n                    />\n                </div>\n            </div>\n\n            <label>NumberInput with limits:</label>\n            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>\n                <div className='form-group'>\n                    <NumberInput\n                        noDefault={noDefault}\n                        min={-10}\n                        max={7}\n                        value={-8}\n                        onChange={value => Notification.info(value)}\n                    />\n                </div>\n                <div className='form-group'>\n                    <NumberInput noDefault={noDefault} min={100} max={200} value={142} unit={<span>days</span>} />\n                </div>\n                <div className='form-group'>\n                    <NumberInput noDefault={noDefault} min={0.001} max={1} value={0.025} />\n                </div>\n            </div>\n\n            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>\n                <div className='form-group'>\n                    <label>Disabled NumberInput</label>\n                    <NumberInput noDefault={noDefault} unit='m' disabled />\n                </div>\n\n                <div>\n                    <label htmlFor='warning-input'>With warning feedback</label>\n                    <div className='form-group has-feedback has-warning'>\n                        <NumberInput\n                            id='warning-input'\n                            value={123}\n                            unit='unit'\n                            warningMessage='Short warning message'\n                        />\n                    </div>\n                </div>\n\n                <div>\n                    <label htmlFor='no-default'>Fixed 'noDefault'</label>\n                    <NumberInput id='no-default' unit='Pcs' noDefault />\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"\">\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label label-position-left\">\n                <input type=\"checkbox\" class=\"switch-input\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>No default values\n            </label>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct margin-bottom-10\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <label>NumberInput in various sizes:</label>\n    <div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\">\n        <div class=\"form-group\">\n            <div class=\"input-group input-group-sm\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group input-group-lg\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-lg Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <label>NumberInput with unit and inputAddon in various sizes:</label>\n    <div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\">\n        <div class=\"form-group\">\n            <div class=\"input-group input-group-sm\">\n                <div class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-dangerousgoods\">\n                    </span>\n                </div>\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n                <div class=\"input-group-addon \">m</div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-dangerousgoods\">\n                    </span>\n                </div>\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n                <div class=\"input-group-addon \">m</div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group input-group-lg\">\n                <div class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-dangerousgoods\">\n                    </span>\n                </div>\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-lg Test\" aria-label=\"number-input\" value=\"0\">\n                </div>\n                <div class=\"input-group-addon \">m</div>\n            </div>\n        </div>\n    </div>\n    <label>NumberInput with limits:</label>\n    <div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\">\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"-10\" max=\"7\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"-8\">\n                </div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"100\" max=\"200\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"142\">\n                </div>\n                <div class=\"input-group-addon \">\n                    <span>days</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0.001\" max=\"1\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0.025\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"display-grid gap-15 grid-cols-1-xs grid-cols-3-sm\">\n        <div class=\"form-group\">\n            <label>Disabled NumberInput</label>\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" disabled=\"\" aria-label=\"number-input\" value=\"0\">\n                </div>\n                <div class=\"input-group-addon disabled pointer-events-none\">m</div>\n            </div>\n        </div>\n        <div>\n            <label for=\"warning-input\">With warning feedback</label>\n            <div class=\"form-group has-feedback has-warning\">\n                <div class=\"input-group\">\n                    <div class=\"form-control-feedback-wrapper\">\n                        <input id=\"warning-input\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"123\">\n                        <span class=\"form-control-feedback rioglyph rioglyph-warning-sign\">\n                        </span>\n                        <span class=\"help-block white-space-normal\">\n                            <span>Short warning message</span>\n                        </span>\n                    </div>\n                    <div class=\"input-group-addon \">unit</div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <label for=\"no-default\">Fixed 'noDefault'</label>\n            <div class=\"input-group\">\n                <div class=\"form-control-feedback-wrapper\">\n                    <input id=\"no-default\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"\">\n                </div>\n                <div class=\"input-group-addon \">Pcs</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "min",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The minimum value of the input."
+                    },
+                    {
+                      "name": "max",
+                      "type": "Number",
+                      "default": "Number.MAX_VALUE",
+                      "description": "The maximum value of the input."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The initial value of the input."
+                    },
+                    {
+                      "name": "step",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "The size of increment or decrement (only works with number type)."
+                    },
+                    {
+                      "name": "digitPrecision",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "Number of digits after the comma the value should be fixed to."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled the input."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(value?: number) => void",
+                      "default": "",
+                      "description": "Callback function fired when the value of the input changes."
+                    },
+                    {
+                      "name": "onKeyDown",
+                      "type": "(event: React.KeyboardEvent<HTMLInputElement>) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered after filtering out invalid key strokes."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "'sm' | 'md' | 'lg'",
+                      "default": "'md'",
+                      "description": "Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg'"
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "A unit for this value. This will be shown in a dedicated input addon."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional error message."
+                    },
+                    {
+                      "name": "warningMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional warning message."
+                    },
+                    {
+                      "name": "messageWhiteSpace",
+                      "type": "'normal' | 'prewrap' | 'nowrap'",
+                      "default": "'normal'",
+                      "description": "Optional warning message white-space."
+                    },
+                    {
+                      "name": "inputAddon",
+                      "type": "String",
+                      "default": "",
+                      "description": "A rioglyph icon tio be shown in front of the input."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder if no value is given."
+                    },
+                    {
+                      "name": "noDefault",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Lets you omit the default value of \"0\" when the vale is not defined. The input will be empty in this case."
+                    },
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "NumberControl",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column gap-20\"><div><label>NumberControl with limits and various step sizes:</label><div class=\"display-flex flex-wrap gap-15\"><div class=\"width-150\"><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-150\"><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-dangerousgoods\"></span></div><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"2\" min=\"-5\" max=\"30\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"1\"></div><div class=\"input-group-addon \">m<div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-150\"><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"0.001\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0.001\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-200\"><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" placeholder=\"Please enter a number\" value=\"\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div></div></div><div><div class=\"width-200\"><label for=\"no-default\">NumberControl without default value</label><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input id=\"no-default\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div></div><div><label>NumberControl in large and small:</label><div class=\"display-flex flex-wrap gap-15\"><div class=\"width-200\"><div class=\"NumberControl\"><div class=\"input-group input-group-lg\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-dangerousgoods\"></span></div><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"100\" max=\"200\" class=\"form-control no-controls input-lg\" aria-label=\"number-input\" value=\"142\"></div><div class=\"input-group-addon \"><span>days</span><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-150\"><div class=\"NumberControl\"><div class=\"input-group input-group-sm\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"10\" min=\"-1000\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm\" aria-label=\"number-input\" value=\"10\"></div><div class=\"input-group-addon \">m<div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-150\"><div class=\"NumberControl\"><div class=\"input-group input-group-sm\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm\" disabled=\"\" aria-label=\"number-input\" value=\"0\"></div><div class=\"input-group-addon disabled pointer-events-none\"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div></div></div><div class=\"width-200\"><label for=\"error-input\">NumberControl with error feedback</label><div class=\"form-group has-feedback has-error\"><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input id=\"error-input\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"123\"><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block white-space-nowrap\"><span>Very long error message with nowrap messageWhiteSpace prop</span></span></div><div class=\"input-group-addon \">unit<div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import NumberControl from '@rio-cloud/rio-uikit/NumberControl';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => (\n    <div className='display-flex flex-column gap-20'>\n        <div>\n            <label>NumberControl with limits and various step sizes:</label>\n            <div className='display-flex flex-wrap gap-15'>\n                <div className='width-150'>\n                    <NumberControl value={0} />\n                </div>\n                <div className='width-150'>\n                    <NumberControl\n                        min={-5}\n                        max={30}\n                        value={1}\n                        step={2}\n                        unit='m'\n                        inputAddon='rioglyph rioglyph-dangerousgoods'\n                        onChange={(value: number | undefined) => Notification.info(value)}\n                    />\n                </div>\n                <div className='width-150'>\n                    <NumberControl min={0} value={0.001} step={0.001} />\n                </div>\n                <div className='width-200'>\n                    <NumberControl placeholder='Please enter a number' />\n                </div>\n            </div>\n        </div>\n\n        <div>\n            <div className='width-200'>\n                <label htmlFor='no-default'>NumberControl without default value</label>\n                <NumberControl id='no-default' noDefault />\n            </div>\n        </div>\n\n        <div>\n            <label>NumberControl in large and small:</label>\n            <div className='display-flex flex-wrap gap-15'>\n                <div className='width-200'>\n                    <NumberControl\n                        bsSize='lg'\n                        min={100}\n                        max={200}\n                        value={142}\n                        inputAddon='rioglyph rioglyph-dangerousgoods'\n                        unit={<span>days</span>}\n                    />\n                </div>\n                <div className='width-150'>\n                    <NumberControl min={-1000} value={10} step={10} bsSize='sm' unit='m' />\n                </div>\n                <div className='width-150'>\n                    <NumberControl bsSize='sm' disabled />\n                </div>\n            </div>\n        </div>\n\n        <div className='width-200'>\n            <label htmlFor='error-input'>NumberControl with error feedback</label>\n            <div className='form-group has-feedback has-error'>\n                <NumberControl\n                    id='error-input'\n                    value={123}\n                    unit='unit'\n                    errorMessage='Very long error message with nowrap messageWhiteSpace prop'\n                    messageWhiteSpace='nowrap'\n                />\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column gap-20\">\n    <div>\n        <label>NumberControl with limits and various step sizes:</label>\n        <div class=\"display-flex flex-wrap gap-15\">\n            <div class=\"width-150\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group\">\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0\">\n                        </div>\n                        <div class=\"input-group-addon \">\n                            <div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"width-150\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group\">\n                        <div class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-dangerousgoods\">\n                            </span>\n                        </div>\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"2\" min=\"-5\" max=\"30\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"1\">\n                        </div>\n                        <div class=\"input-group-addon \">m<div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"width-150\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group\">\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"0.001\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"0.001\">\n                        </div>\n                        <div class=\"input-group-addon \">\n                            <div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"width-200\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group\">\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" placeholder=\"Please enter a number\" value=\"\">\n                        </div>\n                        <div class=\"input-group-addon \">\n                            <div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <div class=\"width-200\">\n            <label for=\"no-default\">NumberControl without default value</label>\n            <div class=\"NumberControl\">\n                <div class=\"input-group\">\n                    <div class=\"form-control-feedback-wrapper\">\n                        <input id=\"no-default\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"\">\n                    </div>\n                    <div class=\"input-group-addon \">\n                        <div class=\"display-flex padding-left-10\">\n                            <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                <div class=\"rioglyph rioglyph-minus scale-90\">\n                                </div>\n                            </div>\n                            <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                <div class=\"rioglyph rioglyph-plus scale-90\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <label>NumberControl in large and small:</label>\n        <div class=\"display-flex flex-wrap gap-15\">\n            <div class=\"width-200\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group input-group-lg\">\n                        <div class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-dangerousgoods\">\n                            </span>\n                        </div>\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"1\" min=\"100\" max=\"200\" class=\"form-control no-controls input-lg\" aria-label=\"number-input\" value=\"142\">\n                        </div>\n                        <div class=\"input-group-addon \">\n                            <span>days</span>\n                            <div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"width-150\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group input-group-sm\">\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"10\" min=\"-1000\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm\" aria-label=\"number-input\" value=\"10\">\n                        </div>\n                        <div class=\"input-group-addon \">m<div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"width-150\">\n                <div class=\"NumberControl\">\n                    <div class=\"input-group input-group-sm\">\n                        <div class=\"form-control-feedback-wrapper\">\n                            <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls input-sm\" disabled=\"\" aria-label=\"number-input\" value=\"0\">\n                        </div>\n                        <div class=\"input-group-addon disabled pointer-events-none\">\n                            <div class=\"display-flex padding-left-10\">\n                                <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                    <div class=\"rioglyph rioglyph-minus scale-90\">\n                                    </div>\n                                </div>\n                                <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                    <div class=\"rioglyph rioglyph-plus scale-90\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"width-200\">\n        <label for=\"error-input\">NumberControl with error feedback</label>\n        <div class=\"form-group has-feedback has-error\">\n            <div class=\"NumberControl\">\n                <div class=\"input-group\">\n                    <div class=\"form-control-feedback-wrapper\">\n                        <input id=\"error-input\" type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"123\">\n                        <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                        </span>\n                        <span class=\"help-block white-space-nowrap\">\n                            <span>Very long error message with nowrap messageWhiteSpace prop</span>\n                        </span>\n                    </div>\n                    <div class=\"input-group-addon \">unit<div class=\"display-flex padding-left-10\">\n                            <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                                <div class=\"rioglyph rioglyph-minus scale-90\">\n                                </div>\n                            </div>\n                            <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                                <div class=\"rioglyph rioglyph-plus scale-90\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "min",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The minimum value of the input."
+                    },
+                    {
+                      "name": "max",
+                      "type": "Number",
+                      "default": "Number.MAX_VALUE",
+                      "description": "The maximum value of the input."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The initial value of the input."
+                    },
+                    {
+                      "name": "step",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "The size of increment or decrement (only works with number type)."
+                    },
+                    {
+                      "name": "digitPrecision",
+                      "type": "Number",
+                      "default": "3",
+                      "description": "Number of digits after the comma the value should be fixed to."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled the input."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(value?: number) => void",
+                      "default": "",
+                      "description": "Callback function fired when the value of the input changes."
+                    },
+                    {
+                      "name": "onKeyDown",
+                      "type": "(event: React.KeyboardEvent<HTMLInputElement>) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered after filtering out invalid key strokes."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "'sm' | 'md' | 'lg'",
+                      "default": "'md'",
+                      "description": "Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg'"
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "A unit for this value. This will be shown in a dedicated input addon."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional error message."
+                    },
+                    {
+                      "name": "warningMessage",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional warning message."
+                    },
+                    {
+                      "name": "messageWhiteSpace",
+                      "type": "'normal' | 'prewrap' | 'nowrap'",
+                      "default": "'normal'",
+                      "description": "Optional warning message white-space."
+                    },
+                    {
+                      "name": "inputAddon",
+                      "type": "String",
+                      "default": "",
+                      "description": "A rioglyph icon tio be shown in front of the input."
+                    },
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder if no value is given."
+                    },
+                    {
+                      "name": "noDefault",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Lets you omit the default value of \"0\" when the vale is not defined. The input will be empty in this case."
+                    },
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}