A Number Field allows users to enter and edit numbers. It allows much of the same functionality as a Text Field however it is restricted to Number values.
Anatomy
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when Helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Field |
An Input element that allows users to write content. |
No |
|
6. Suffix |
Text or iconography used to customize the field. Can denote units or trigger an action. |
Yes |
|
7. Number Stepper |
Native browser up and down buttons that allow users to increase and decrease the numerical value in the field. |
No |
|
8. Form validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | focus | disabled | readOnly | rest |
| validation Variant | neutral | error | neutral |
Component dependencies
Number Field is built directly off the Text Field component, which is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.validation |
InputError |
|
|
InputLabel |
|
|
FormDescription |
Code sub-components
Number Field is built directly off the Text Field component, refer to the code documentation for further information.
Figma sub-components
| Property | Values | Default |
|---|---|---|
| ↳ ✏️ defaultText Text | string | (default) |
| hasDefaultMarker Boolean | true | false | false |
| popover Boolean | true | false | false |
| ✏️ fieldLabel Text | string | Field label |
| hasRequiredMarker Boolean | true | false | false |
| hasOptionalMarker Boolean | true | false | true |
| ↳ ✏️ helperText Text | string | Optional helper text |
| helperText Boolean | true | false | false |
| ↳ helperLink Boolean | true | false | false |
| isDisabled Variant | false | true | false |
It’s also dependent on:
Popover Basic
Popover is a temporary overlay window that contains contextual information
Text Field
Used to enter free-form text that’s no longer than one line.
Help and support