The Number Pad is a touch device component for numeric data entry. To create more immersive experiences, the Number Pad should be used in workflows where the numeric entry is the most important element on the screen or context. Additionally, because the Number Pad takes up so much screen space, it should only be used in contexts with 3 or less input fields. In workflows with more input fields, consider using a traditional Text Field instead.
- Digits — Small heading
- Tap target — Selectable Surface
- Backspace — 40px embedded no emphasis Quick Action Button
- Double zero or decimal — Small heading (optional)
This element should derive its elevation from the parent container.
Each tap target is a ∆spacingPlatformHuge sized square. This is a themable shape.
While the space between each row of digits is fixed, the space between each column should adjust based on viewport or container width. The maximum space between each column is shown above. The minimum space between each column is zero, but no modern device should ever require such little space between.
The various states of the Number Pad are implemented at the atomic level. While touch devices traditionally don’t require a hover state, one has been provided for the new iPad OS. When the entire Number Pad is disabled, every target should receive the disabled treatment.
There are no unique elevation considerations for this component.
There are no unique spacing considerations for this component.
The Number Pad should generally appear near the bottom of a view. It is commonly used on a Bottom Sheet, placed beneath a Display Text Field and/or above Buttons. The only time you might consider embedding a Number Pad within a base context is on a tablet device, where the additional screen real estate is generous.
When a digit is pressed, the pressed state should appear instantly and fade quickly.
Developer DocsVue Developer Docs
Component documentation coming soon!