{"record":{"id":"44c833698797dabf","repo":"reflex-dev/reflex","slug":"only-radix-textfieldroot-and-debounceinput-are-all","errorCode":null,"errorMessage":"Only Radix TextFieldRoot and DebounceInput are allowed as children of FormControl","messagePattern":"Only Radix TextFieldRoot and DebounceInput are allowed as children of FormControl","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/reflex-components-radix/src/reflex_components_radix/primitives/form.py","lineNumber":112,"sourceCode":"\n        Args:\n            *children: The children of the form.\n            **props: The properties of the form.\n\n        Returns:\n            The form control component.\n\n        Raises:\n            ValueError: If the number of children is greater than 1.\n            TypeError: If a child exists but it is not a TextFieldInput.\n        \"\"\"\n        if len(children) > 1:\n            msg = f\"FormControl can only have at most one child, got {len(children)} children\"\n            raise ValueError(msg)\n        for child in children:\n            if not isinstance(child, (TextFieldRoot, DebounceInput)):\n                msg = \"Only Radix TextFieldRoot and DebounceInput are allowed as children of FormControl\"\n                raise TypeError(msg)\n        return super().create(*children, **props)\n\n\nLiteralMatcher = Literal[\n    \"badInput\",\n    \"patternMismatch\",\n    \"rangeOverflow\",\n    \"rangeUnderflow\",\n    \"stepMismatch\",\n    \"tooLong\",\n    \"tooShort\",\n    \"typeMismatch\",\n    \"valid\",\n    \"valueMissing\",\n]\n\n\nclass FormMessage(FormComponent):","sourceCodeStart":94,"sourceCodeEnd":130,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/packages/reflex-components-radix/src/reflex_components_radix/primitives/form.py#L94-L130","documentation":"rx.form_control only accepts a Radix TextFieldRoot or a DebounceInput as its single child. Any other component (text, select, checkbox, custom component) raises TypeError because the wrapper forwards props like size/invalid specifically to those input types.","triggerScenarios":"rx.form_control(rx.select(...)), rx.form_control(rx.checkbox(...)), or rx.form_control(rx.input(...)) (the non-TextField input).","commonSituations":"Migrating from plain rx.form_control(rx.input()) patterns; wrapping native or third-party inputs in the themed form control.","solutions":["Use the TextField composite: rx.form_control(rx.text_field.root(rx.text_field.input()))","Use DebounceInput if debouncing is desired: rx.form_control(rx.debounce_input())","For selects/checkboxes use their own themed components (rx.select has its own label/error props) instead of form_control"],"exampleFix":"# before\nrx.form_control(rx.input(placeholder='Name'))\n# after\nrx.form_control(rx.text_field.root(rx.text_field.input(placeholder='Name')))","handlingStrategy":"type-guard","validationCode":"from reflex_components_radix.primitives.text_field import TextFieldRoot\nassert isinstance(child, (TextFieldRoot, DebounceInput))","typeGuard":"def is_allowed_form_child(c) -> bool:\n    from reflex_components_radix.primitives.text_field import TextFieldRoot\n    from reflex.components.core.debounce import DebounceInput\n    return isinstance(c, (TextFieldRoot, DebounceInput))","tryCatchPattern":null,"preventionTips":["Wrap only text_field.root or debounce_input in form_control","Use themed select/checkbox components directly for other input types"],"tags":["reflex","radix","form-control","type-error"],"backgroundTag":"component-child-type-mismatch","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}