New form components (Text field, Textarea, Radio Group, Checkbox, NumberField, TimePicker) can be used alongside the legacy form components (e.g. Radio Button (Deprecated), Checkbox (Deprecated), Text (Deprecated), Select, MultiSelect, Number) where appropriate. But check how they look together. Some pairings might not align correctly (For example Text Field next to a legacy Select component).
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 | read-only | 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