Skip to main content

TextInput

A basic input field for entering any kind of text. This matches the appearance of the search boxes in the Explorer and Properties widgets, among other inputs in Studio.

Dark Light
Dark Light

This is a controlled component, which means the current text should be passed in to the Text prop and a callback value to the OnChanged prop which gets run when the user attempts types in the input field. For example: 

local function MyComponent()
	local text, setText = React.useState("")
	return React.createElement(StudioComponents.TextInput, {
		Text = text,
		OnChanged = setText,
	})
end

This allows complete control over the text displayed and keeps the source of truth in your own code. This is helpful for consistency and controlling the state from elsewhere in the tree. It also allows you to easily filter what can be typed into the text input. For example, to only permit entering lowercase letters: 

local function MyComponent()
	local text, setText = React.useState("")
	return React.createElement(StudioComponents.TextInput, {
		Text = text,
		OnChanged = function(newText),
			local filteredText = string.gsub(newText, "[^a-z]", "")
			setText(filteredText)
		end,
	})
end

By default, the height of this component is equal to the value in Constants.DefaultInputHeight. While this can be overriden by props, in order to keep inputs accessible it is not recommended to make the component any smaller than this.

Types​

Props​

Component Props
</>
interface Props {
Text: string
OnChanged: ((newText: string) → ())?
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": "Text",
                    "lua_type": "string",
                    "desc": ""
                },
                {
                    "name": "OnChanged",
                    "lua_type": "((newText: string) -> ())?",
                    "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": 68,
                "path": "src/Components/TextInput.luau"
            }
        }
    ],
    "name": "TextInput",
    "desc": "A basic input field for entering any kind of text. This matches the appearance of the search\nboxes in the Explorer and Properties widgets, among other inputs in Studio.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/textinput/dark.png) | ![Light](/StudioComponents/components/textinput/light.png) |\n\nThis is a controlled component, which means the current text should be passed in to the\n`Text` prop and a callback value to the `OnChanged` prop which gets run when the user attempts \ntypes in the input field. For example:\n\n```lua\nlocal function MyComponent()\n\tlocal text, setText = React.useState(\"\")\n\treturn React.createElement(StudioComponents.TextInput, {\n\t\tText = text,\n\t\tOnChanged = setText,\n\t})\nend\n```\n\nThis allows complete control over the text displayed and keeps the source of truth in your own\ncode. This is helpful for consistency and controlling the state from elsewhere in the tree. It\nalso allows you to easily filter what can be typed into the text input. For example, to only\npermit entering lowercase letters:\n\n```lua\nlocal function MyComponent()\n\tlocal text, setText = React.useState(\"\")\n\treturn React.createElement(StudioComponents.TextInput, {\n\t\tText = text,\n\t\tOnChanged = function(newText),\n\t\t\tlocal filteredText = string.gsub(newText, \"[^a-z]\", \"\")\n\t\t\tsetText(filteredText)\n\t\tend,\n\t})\nend\n```\n\nBy default, the height of this component is equal to the value in [Constants.DefaultInputHeight].\nWhile this can be overriden by props, in order to keep inputs accessible it is not recommended \nto make the component any smaller than this.",
    "source": {
        "line": 47,
        "path": "src/Components/TextInput.luau"
    }
}