Displays a formatted number with thousand separators.

Attributes

• number - The number to format (required, integer or float)
• format - Format style (default: :grouped)
  • :grouped - Add comma separators (1,234,567)
  • :short - Abbreviate large numbers (1.2M, 3.5K)
• decimals - Decimal places to keep. Required to format a float at all — see below.
• class - Additional CSS classes

Floats

Both formats used to guard on is_integer/1, so a float fell through to to_string/1 and 1234.5 rendered as "1234.5" — ungrouped, in a component whose entire job is grouping.

Passing decimals: now rounds and groups the whole part:

<.formatted_number number={1234.5} decimals={2} />   # 1,234.50

⚠️ Without decimals: a float still renders as before. Grouping floats by default would silently change output for every existing float caller, which is a behaviour change rather than a fix — so it is opt-in.

Examples

<.formatted_number number={1234567} />
# Renders: 1,234,567

<.formatted_number number={1234567} format={:short} />
# Renders: 1.2M

<.formatted_number number={1234.5} decimals={2} />
# Renders: 1,234.50

<.formatted_number number={0} />
# Renders: 0

Attributes

• number (:any) (required)
• format (:atom) - Defaults to :grouped. Must be one of :grouped, or :short.
• decimals (:integer) - Decimal places. Opt-in for floats; omitting it preserves existing output. Defaults to nil.
• class (:string) - Defaults to "".