Skip to main content

RadioButton

An input element similar to a Checkbox which can either be selected or not selected. This should be used for an option in a mutually exclusive group of options (the user can only select one out of the group). This grouping behavior is not included and must be implemented separately.

Dark Light
Dark Light

The props and behavior for this component are the same as Checkbox. Importantly, this is also a controlled component, which means it does not manage its own selected state. A value must be passed to the Value prop and a callback should be passed to the OnChanged prop. For example: 

local function MyComponent()
	local selected, setSelected = React.useState(false)
	return React.createElement(StudioComponents.RadioButton, {
		Value = selected,
		OnChanged = setSelected,
	})
end

For more information about customizing this component via props, refer to the documentation for Checkbox. The default height for this component is found in Constants.DefaultToggleHeight.

Types​

Props​

Component Props
</>
interface Props {
Value: boolean?
OnChanged: (() → ())?
Label: string?
ContentAlignment: HorizontalAlignment?
ButtonAlignment: HorizontalAlignment?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Value",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "OnChanged",
                    "lua_type": "(() -> ())?",
                    "desc": ""
                },
                {
                    "name": "Label",
                    "lua_type": "string?",
                    "desc": ""
                },
                {
                    "name": "ContentAlignment",
                    "lua_type": "HorizontalAlignment?",
                    "desc": ""
                },
                {
                    "name": "ButtonAlignment",
                    "lua_type": "HorizontalAlignment?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 52,
                "path": "src/Components/RadioButton.luau"
            }
        }
    ],
    "name": "RadioButton",
    "desc": "An input element similar to a [Checkbox] which can either be selected or not selected.\nThis should be used for an option in a mutually exclusive group of options (the user can\nonly select one out of the group). This grouping behavior is not included and must be \nimplemented separately.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/radiobutton/dark.png) | ![Light](/StudioComponents/components/radiobutton/light.png) |\n\nThe props and behavior for this component are the same as [Checkbox]. Importantly, this is\nalso a controlled component, which means it does not manage its own selected state. A value\nmust be passed to the `Value` prop and a callback should be passed to the `OnChanged` prop.\nFor example:\n\n```lua\nlocal function MyComponent()\n\tlocal selected, setSelected = React.useState(false)\n\treturn React.createElement(StudioComponents.RadioButton, {\n\t\tValue = selected,\n\t\tOnChanged = setSelected,\n\t})\nend\n```\n\nFor more information about customizing this component via props, refer to the documentation\nfor [Checkbox]. The default height for this component is found in [Constants.DefaultToggleHeight].",
    "source": {
        "line": 31,
        "path": "src/Components/RadioButton.luau"
    }
}