Arabic Number Utilities
View on StorybookStorybookComprehensive utilities for formatting numbers in Arabic contexts. Includes Arabic-Indic numeral conversion (٠-٩), SAR currency formatting, and locale-aware number display. Designed for Islamic and Arabic-speaking contexts.
Preview
Western Numerals
Standard format
Number
1,234,567.89Currency
9,999.99 SARPercentage
75.4%Arabic-Indic Numerals
٠١٢٣٤٥٦٧٨٩
Number
١,٢٣٤,٥٦٧.٨٩Currency
٩٬٩٩٩٫٩٩ ر.سPercentage
٪٧٥٫٤Installation
Copy the utility functions and component into your project:
Dependencies: No external dependencies required. Uses built-in Intl.NumberFormat API.
Utility Functions
Numeral Conversion
Convert between Western (0-9) and Arabic-Indic (٠-٩) numerals.
toArabicNumerals()
Input: 2025
٢٠٢٥
Input: 123.45
١٢٣.٤٥
toWesternNumerals()
Input: ٢٠٢٥
2025
Input: ١٢٣٫٤٥
123٫45
Currency Formatting (SAR)
Format numbers as Saudi Riyal currency with full locale support.
English Format
1,234.50 SAR
1,235 SAR
999,999.00 SAR
999,999 SAR
Arabic Format
١٬٢٣٤٫٥٠ ر.س
١٬٢٣٥ ر.س
٩٩٩٬٩٩٩٫٠٠ ر.س
٩٩٩٬٩٩٩ ر.س
Number Formatting
Format numbers with locale-specific separators and decimal points.
Standard
1,234,567.89
Arabic Locale
١٬٢٣٤٬٥٦٧٫٨٩
Arabic Numerals
١٬٢٣٤٬٥٦٧٫٨٩
Percentage Formatting
Format decimal numbers as percentages (0.15 = 15%).
75.5%
75.5%
23.67%
23.67%
Arabic: ٪٩٩٫٩
٪٩٩٫٩
Compact Number Formatting
Format large numbers in compact form (1K, 1M, 1B).
1.2K
1.2K
1.2M
1.2M
1.2B
1.2B
Arabic
١٫٢ مليون
Display Component
Use the ArabicNumber component for consistent number display in your UI.
Inline Usage
The product costs 499.99 SAR and is currently on sale with a 25.0% discount!
سعر المنتج ٤٩٩٫٩٩ ر.س ويوجد خصم ٪٢٥٫٠
Badge Variant
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | number | — | The number to display. |
format | "number" | "currency" | "percentage" | "number" | Format type for the number. |
useArabicNumerals | boolean | false | Use Arabic-Indic numerals (٠-٩) instead of Western (0-9). |
locale | "en" | "ar" | "en" | Locale for formatting (affects separators and symbols). |
decimals | number | undefined | Number of decimal places to display. |
variant | "default" | "inline" | "badge" | "default" | Visual style variant. |
className | string | undefined | Additional CSS classes. |
Accessibility
Arabic Number utilities follow accessibility best practices:
- Tabular Numerals: Uses tabular-nums for consistent width and alignment.
- Semantic HTML: Numbers are displayed in appropriate semantic elements.
- High Contrast: Default styling maintains proper contrast ratios.
- Screen Readers: Numbers are read correctly by screen readers in both formats.
RTL Considerations
These utilities are built with RTL support in mind:
- Automatic Locale Detection: Component auto-detects Arabic locale for proper formatting.
- Arabic-Indic Numerals: Full support for ٠١٢٣٤٥٦٧٨٩ numerals.
- Proper Separators: Uses locale-appropriate thousands separators and decimal points.
- Currency Symbols: Shows "ر.س" (Riyal symbol) in Arabic mode.
- Percentage Format: Percentage symbol position adapts to locale (٪٧٥ vs 75%).
Best Practices
Do
- ✓ Use Eastern Arabic numerals (٠١٢٣) for Arabic contexts
- ✓ Support both numeral systems based on locale
- ✓ Apply proper number formatting (thousands separators)
Don't
- ✗ Don't mix numeral systems within the same view
- ✗ Don't assume all Arabic locales prefer Eastern numerals
- ✗ Don't hardcode number formatting — use locale-aware formatting