reflex-dev/reflex · error · ValueError

f"Invalid size: {size}. Available sizes: {available_sizes}"

Error message

f"Invalid size: {size}. Available sizes: {available_sizes}"

What it means

The high-level number_field wrapper validates size against NUMBER_FIELD_SIZE_VARIANTS (radix-style "1"-"3", default "md" mapped internally). Unsupported sizes raise immediately.

Source

Thrown at packages/reflex-components-internal/src/reflex_components_internal/components/base/number_field.py:287

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create a complete number field or use explicit children.

        Args:
            *children: Optional custom number field children.
            **props: Additional properties to apply to the number field root.

        Returns:
            The number field component.

        Raises:
            ValueError: If size is not a supported number field size.
        """
        size = props.pop("size", "md")
        if size not in NUMBER_FIELD_SIZE_VARIANTS:
            available_sizes = ", ".join(NUMBER_FIELD_SIZE_VARIANTS)
            msg = f"Invalid size: {size}. Available sizes: {available_sizes}"
            raise ValueError(msg)

        if children:
            return NumberFieldRoot.create(*children, **props)

        return NumberFieldRoot.create(
            NumberFieldGroup.create(
                NumberFieldDecrement.create(
                    hi("MinusSignIcon"),
                    aria_label="Decrease value",
                ),
                NumberFieldInput.create(),
                NumberFieldIncrement.create(
                    hi("PlusSignIcon"),
                    aria_label="Increase value",
                ),
                class_name=cn(NUMBER_FIELD_SIZE_VARIANTS[size]),
            ),
            **props,

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Use one of the sizes listed in the error ("1", "2", "3")
2. Map legacy names: sm→"1", md→"2", lg→"3"
3. Validate dynamic size strings against the allowed set before rendering

Example fix

# before
rx.number_field(size="lg")
# after
rx.number_field(size="3")

from reflex_components_internal.components.base.number_field import NUMBER_FIELD_SIZE_VARIANTS
if size not in NUMBER_FIELD_SIZE_VARIANTS:
    size = 'md' if 'md' in NUMBER_FIELD_SIZE_VARIANTS else '2'

def is_valid_number_field_size(s: str) -> TypeGuard[str]:
    from reflex_components_internal.components.base.number_field import NUMBER_FIELD_SIZE_VARIANTS
    return s in NUMBER_FIELD_SIZE_VARIANTS

When it happens

Trigger: rx.number_field(..., size="large") or size="xl"; also passing old Chakra sizes like "lg".

Common situations: Migrating from older Reflex/Chakra number input; sizes pulled from theme config or props spreads.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

• f"Invalid size: {size}. Available sizes: {available_sizes}"
• f"Invalid size: {size}. Available sizes: {available_sizes}"
• ChildrenTypeError(component=cls.__name__, child=child)
• Do not override _add_style directly. Use add_style instead.
• The component `{comp_name}` cannot have `{child_name}` as a

AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/ddeedea6f7dd9014. Report an issue: GitHub.