reflex-dev/reflex · error · VarValueError

Unknown format code '{format_spec}' for object of type 'Numb

Error message

Unknown format code '{format_spec}' for object of type 'NumberVar'. It is only supported to use ',', '_', and '.f' for float numbers.If possible, use computed variables instead: https://reflex.dev/docs/vars/computed-vars/

What it means

NumberVar.__format__ only supports a small set of format specs: ',' (thousands separator), '_' (digit grouping), and float precision like '.2f'. Any other format code (e.g. 'x', 'b', 'e', '%') cannot be translated to JavaScript, so VarValueError is raised.

Source

Thrown at packages/reflex-base/src/reflex_base/vars/number.py:491

            format_spec
            and format_spec[-1] == "f"
            and format_spec[0] == "."
            and format_spec[1:-1].isdigit()
        ):
            how_many_decimals = int(format_spec[1:-1])
            return f"{get_decimal_string_operation(self, Var.create(how_many_decimals), Var.create(separator))}"

        if not format_spec and separator:
            return (
                f"{get_decimal_string_separator_operation(self, Var.create(separator))}"
            )

        if format_spec:
            msg = (
                f"Unknown format code '{format_spec}' for object of type 'NumberVar'. It is only supported to use ',', '_', and '.f' for float numbers."
                "If possible, use computed variables instead: https://reflex.dev/docs/vars/computed-vars/"
            )
            raise VarValueError(msg)

        return super().__format__(format_spec)


def binary_number_operation(
    func: Callable[[NumberVar, NumberVar], str],
) -> Callable[[number_types, number_types], NumberVar]:
    """Decorator to create a binary number operation.

    Args:
        func: The binary number operation function.

    Returns:
        The binary number operation.
    """

    @var_operation
    def operation(lhs: NumberVar, rhs: NumberVar):

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Restrict specs to ',', '_', or '.Nf' (e.g. f"{value:,.2f}").
2. For other formats, use a computed var (@rx.var) that formats the value in Python and returns a string.
3. Do the conversion client-side logic manually or precompute the string on the backend.

Example fix

# before
rx.text(f"{State.amount:%}")

# after
class State(rx.State):
    amount: float = 0.1
    @rx.var
    def amount_pct(self) -> str:
        return f"{self.amount:%}"
# rx.text(State.amount_pct)

import re

def spec_supported(spec: str) -> bool:
    return bool(re.fullmatch(r"[,_]?[0-9]*\.?[0-9]*f?", spec)) and not set(spec) - set(',._0123456789f')

When it happens

Trigger: Applying an unsupported format spec to a NumberVar, e.g. f"{self.value:x}", f"{n:e}", f"{p:%}", or fill/align specs like f"{n:>8}".

Common situations: Copying Python format strings into Reflex templates; trying to render hex/binary/percent from a number var directly; forgetting that formats are limited because they compile to JS.

Related errors

• Unsupported Operand type(s) for {operator}: {', '.join(t.__n
• 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
• The component `{comp_name}` only allows the components: {val

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