Decimal input, numeral input, numeral input field, numeral field, number field, text box, currency value, currency input field.
Component preview
No live controls configured for this component.
Decimal input
ECT approvedUpdated May 23, 2026
Description
- A decimal input captures whole filled numbers, auto decimal points, and a value's unit of measurement.
- It allows users to enter and edit numerical data such as item costs.
- It can display pre-filled numerical information.
- It's easy to format. For example, the default decimal value is "0.00". So when the user enters "0.2", the input will automatically format it to "0.20".
- Consider local standards when formatting thousand and decimal separators.
- See more localization guidance in the Content tab
Anatomy
Decimal input: prefix-suffix
Size
Height
- Available in S, M and L size.
- Choose the most suitable height based on context, space, and screen size.
- Note that font size, padding, and spacing differ according to the field height that you choose.
- For guidance on spacing between text inputs, see the Form pattern.
Width
- Choose the appropriate width for your container based on the expected number of digits.
- Additional considerations:
- Include space for prefix or suffix if required.
- Adjust based on visual balance.
- Adjust based on your specific user input analysis or collected data.
- Learn more about designing a Unit container from Dropdown.
Below are suggestions for common digit counts.
6 digits or fewer
7-8 digits
8 digits or more
States
Variations
Unit prefix
Unit suffix
Trigger button for popover container
Color mode
Light
Dark
Dos and don'ts
Do
Do
Do
Do
Do
Do
Do
Don't
Technical example
Hint text
Prefix and suffix
Localization
- Consider using 3-letter ISO currency codes for extra clarity. For example:
- GBP, EUR, USD, AUD, ZAR
- Thousand and decimal separators can differ from one locale to another. So can currency code placement. For example:
- €1,000.00 (Ireland)
- 1 000,00 € (France)
Requirements
Users should be able to:
- Navigate to the input and enter information using assistive technology.
- Understand how to format and input information into a field.
- Receive and understand hints about the type of information that needs to be input.
Interactions
Keyboard Interactions
- Tab. Moves focus from the previous interactive element on the page to the leading input.
- Users can enter numbers, number separators, and decimal separators by typing in the field.
- Pressing tab again will move focus to the next interactive element on the page.
Design considerations
- Make sure there's a 3:1 minimum contrast ratio between the input borders and the background.
- Use consistent formatting hints for users, including prefix-suffix and decimal placement.
- Make sure the input or suffix does not overlap with, or truncate input information.
Development considerations
- The input should have a clear visible label which identifies the purpose of the field using the label and for attributes.
- When asking for decimal numbers, use input type=”text” to allow users to enter information in whatever format they like.
- Format the provided information onblur.
- Do not rely on prefixes and suffixes alone, as some screen readers will not read them out. Provide hint text so that this information is relayed to screen reader users.
- Use aria-hidden=true to hide prefixes and suffixes from screen reader users.
- Make sure hint text is programmatically associated with the input field using aria-describedby targeting the id of the hint text.
| Date | Changes |
|---|---|
| November 2025 | Removed dropdown variant as it's now included in Fieldset. |
| August 2025 | Updated guidance on the accessibility tab.Added a content tab to include hint text guidance. |
| July 2025 | Added a callout that hint is mandatory when prefix and suffix are used.Added a Do for when prefix and suffix are used. |
| May 2025 | Changed component name from "Number input" to "Decimal input" |
| April 2025 | Added a new component variation ‘with popover', where components can be pasted (up to 5).Added popover menu assets. |
| November 2024 | Updated the introduction by adding more relevant names.Added new example in Dos and don'ts. |
| September 2024 | New version created. Previous version archived in the frozen Product design system. |