FormatDigital
The FormatDigital component is designed to format numeric values into a human-readable digital format with respect to various unit prefixes such as kilo, mega, giga, etc. It offers options to customize units, display style of units and supports localization.
Basic usage
This example shows the basic formatting of a numeric value without additional display options, making the default behavior easy to understand.
Display options
This example compares several display modes for the same value so the formatting differences are immediately visible.
Byte formatting
This example focuses on converting values to byte units, which is useful for file sizes or storage metrics.
Formatting bits
This example focuses on converting values to bit units, for example for network speeds or transfer limits.
Use with slots
This example shows how to place custom content before or after the formatted value with slots, without changing the formatting logic itself.
When to use
Use wje-format-digital when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
unit
| Description | The unit of the value (byte or bit). Defaults to byte. |
| Attribute | unit |
| Type | string |
| Default | byte |
unitDisplay
| Description | Sets the unit display style for the digital format. Valid values are short, long, or narrow. |
| Attribute | unit-display |
| Type | string |
| Default | short |
unitDisplay
| Description | The display style of the unit (short, long, or narrow). Defaults to short. |
| Attribute | unitDisplay |
| Type | string |
| Default | short |
value
| Description | The numeric value to format (e.g., 1024 for 1 KB). |
| Attribute | value |
| Type | number |
| Default | - |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the component. |
formatted | The part representing the formatted value. |
start | Slot for content before the formatted value. |
end | Slot for content after the formatted value. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.