Edit Number Formatting

Name

Also known as (comma separated)

Brief definition Locale-appropriate number presentation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "value", "type": "number", "label": "Value", "default": 1234567.891, "min": 0, "max": 99999999, "step": 0.1 }, { "id": "locale", "type": "select", "label": "Locale", "default": "en-US", "options": [ "en-US", "de-DE", "hi-IN" ] }, { "id": "decimals", "type": "number", "label": "Decimal places", "default": 2, "min": 0, "max": 4, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"numf\" data-value=\"{{value}}\" data-locale=\"{{locale}}\" data-decimals=\"{{decimals}}\">\n <p class=\"numf__label\">new Intl.NumberFormat(&quot;{{locale}}&quot;)</p>\n <p class=\"numf__value\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".numf\");\n if (!el) return;\n var fmt = new Intl.NumberFormat(el.dataset.locale, { minimumFractionDigits: Number(el.dataset.decimals), maximumFractionDigits: Number(el.dataset.decimals) });\n el.querySelector(\".numf__value\").textContent = fmt.format(Number(el.dataset.value));\n})();</script>\n<style>\n.numf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.numf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.numf__value { margin: 0; font-size: 26px; font-weight: 800; word-break: break-word; }\n</style>", "tailwind": "<div class=\"numftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" data-value=\"{{value}}\" data-locale=\"{{locale}}\" data-decimals=\"{{decimals}}\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">new Intl.NumberFormat(&quot;{{locale}}&quot;)</p>\n <p class=\"numftw__value m-0 text-[26px] font-extrabold break-words\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".numftw\");\n if (!el) return;\n var fmt = new Intl.NumberFormat(el.dataset.locale, { minimumFractionDigits: Number(el.dataset.decimals), maximumFractionDigits: Number(el.dataset.decimals) });\n el.querySelector(\".numftw__value\").textContent = fmt.format(Number(el.dataset.value));\n})();</script>", "react": "import { useMemo } from \"react\";\n\nexport function NumberFormatting({\n value = {{value}},\n locale = \"{{locale}}\",\n decimals = {{decimals}},\n accent = \"{{accent}}\",\n}) {\n const formatted = useMemo(() => new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(value), [value, locale, decimals]);\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>new Intl.NumberFormat(\"{locale}\")</p>\n <p style={{ margin: 0, fontSize: 26, fontWeight: 800, wordBreak: \"break-word\", color: accent }}>{formatted}</p>\n </div>\n );\n}" }