View in Storybook
Anatomy
The NumberField can be editable when clicking into the input or by interacting with the stepper iconButtons to the right.
- Label (optional): A title for a NumberField to describe its purpose.
- Text: Displays the numerical entry.
- Help Text (optional): When a label is not required, longer helpful text can be added.
- Actions: Fixed plus and minus buttons to increase and/or decrease a value.
Sizes
Due to the amount of numerical data that could ever be input, the NumberField is narrower than other input components by default, but can be made wider if necessary.
States
Focused
Upon clicking a NumberField, the onFocus state is displayed by default and any placeholder text is removed.
Entered
When a value has been input, the text colour darkens to highlight this.
Error
Error validation messages appear underneath the NumberField when there has been an invalid input.
Disabled
A disabled NumberField prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
ReadOnly
A read-only NumberField prevents user modification but its contents can be selectable.
Properties
TextArea offers further props for customisation when necessary within the product UI.
|
Stepper
The -/+ iconButton stepper determines the amount incremented or decremented. |
|---|
|
helpMessage
A single validation message may be displayed to provide helpful information for a user to complete their task. |
|---|
|
Hidden label
It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. Placeholder text should be made visible in these instances for users to understand what value can be input. |
|---|
Best practice
- Only extend the width of the NumberField in exceptional cases, such as aligning against other input components on smaller screens.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use helper text for important information. |
🚫 Add essential text as placeholder, use the helpMessage prop. |
|
✅ Display the label as it provides further context and remains when the user is adding information. This can be hidden when necessary. |
🚫 Remove the labal as it incurs accessibility issues. |