Number
Number
Number provides formatted numeric input with support for currency, phone numbers, credit cards, and custom patterns.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Height | 48px |
| Font | Monospace for numbers |
| Alignment | Right (currency), Left (other) |
Format Types
Section titled “Format Types”Rp X.XXX format for Indonesian Rupiah (e.g., Rp 150.000)
0000-0000-0000 format (e.g., 0812-3456-789)
0000-0000-0000-0000 format (e.g., 1234-5678-9012-3456)
X.XXX format with thousand separators (e.g., 1.500.000)
Currency Format Examples
Section titled “Currency Format Examples”| Input | Displayed |
|---|---|
| 150000 | Rp 150.000 |
| 1000000 | Rp 1.000.000 |
| 500 | Rp 500 |
Separator Options
Section titled “Separator Options”| Option | Description |
|---|---|
| Thousand Separator | Groups digits (default: dot) |
| Decimal Separator | Separates decimals (default: comma) |
| Precision | Number of decimal places |
| Prefix | Value prefix (e.g., Rp) |
| Suffix | Value suffix |
When to use
Section titled “When to use”- Currency input (Indonesian Rupiah)
- Phone number formatting
- Credit card input
- Any numeric input with formatting
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use appropriate format for data type | Store formatted values in database |
| Show formatted value to user | Use text input for numbers |
| Store raw value in forms | Confuse formatted vs raw value |
| Set precision for decimal values | Mix separators inconsistently |