Skip to main content

NumericInput

An input field matching the appearance of a TextInput but which filters inputted text to only allow numeric values, optionally with arrow and slider controls.

Dark Light
Dark Light

This is a controlled component with similar behavior to TextInput. The current numeric value to display should be passed to the Value prop, and a callback should be passed to the OnValidChanged prop which is run when the user types a (valid) numeric input.

Optionally, a minimum value can be passed to the Min prop, as well as a maximum value to the Max prop. A step (increment) value may also be passed to the the Step prop, which defaults to 1 (allowing only whole number values). Passing a non-integer step value will also allow a decimal point to be typed in the input box.

Use the Arrows and Slider props to specify whether up/down arrows and a slider should be included. If arrows or a slider are displayed, they will increment the value by the amount of the step. Completing a slide with a slider will call the OnSubmitted prop (if provided) with the latest value.

Only decimal inputs are allowed (so, for example, hex characters a-f will not be permitted).

Types​

Props​

Component Props
</>
interface Props {
Value: number
OnValidChanged: ((n: number) → ())?
Min: number?
Max: number?
Step: number?
OnSubmitted: ((n: number) → ())?
FormatValue: ((n: number) → string)?
Arrows: boolean?
Slider: boolean?
PlaceholderText: string?
ClearTextOnFocus: boolean?
OnFocused: (() → ())?
OnFocusLost: ((
text: string,
enterPressed: boolean,
input: InputObject
) → ())?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Value",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "OnValidChanged",
                    "lua_type": "((n: number) -> ())?",
                    "desc": ""
                },
                {
                    "name": "Min",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "Max",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "Step",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "OnSubmitted",
                    "lua_type": "((n: number) -> ())?",
                    "desc": ""
                },
                {
                    "name": "FormatValue",
                    "lua_type": "((n: number) -> string)?",
                    "desc": ""
                },
                {
                    "name": "Arrows",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "Slider",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "PlaceholderText",
                    "lua_type": "string?",
                    "desc": ""
                },
                {
                    "name": "ClearTextOnFocus",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "OnFocused",
                    "lua_type": "(() -> ())?",
                    "desc": ""
                },
                {
                    "name": "OnFocusLost",
                    "lua_type": "((text: string, enterPressed: boolean, input: InputObject) -> ())?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 60,
                "path": "src/Components/NumericInput.luau"
            }
        }
    ],
    "name": "NumericInput",
    "desc": "An input field matching the appearance of a [TextInput] but which filters inputted text to only\nallow numeric values, optionally with arrow and slider controls.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/numericinput/dark.png) | ![Light](/StudioComponents/components/numericinput/light.png) |\n\n\nThis is a controlled component with similar behavior to [TextInput]. The current numeric value\nto display should be passed to the `Value` prop, and a callback should be passed to the\n`OnValidChanged` prop which is run when the user types a (valid) numeric input.\n\nOptionally, a minimum value can be passed to the `Min` prop, as well as a maximum value to the\n`Max` prop. A step (increment) value may also be passed to the the `Step` prop, which defaults \nto 1 (allowing only whole number values). Passing a non-integer step value will also allow a \ndecimal point to be typed in the input box. \n\nUse the `Arrows` and `Slider` props to specify whether up/down arrows and a slider should be\nincluded. If arrows or a slider are displayed, they will increment the value by the amount of the step. \nCompleting a slide with a slider will call the `OnSubmitted` prop (if provided) with the latest value.\n\nOnly decimal inputs are allowed (so, for example, hex characters a-f will not be permitted).",
    "source": {
        "line": 27,
        "path": "src/Components/NumericInput.luau"
    }
}