Currency fields allow users to input an amount of money. By default this is £ GBP.
- When users have to input a monetary value and currency.
- If users need to enter a non-monetary value — use the Field component instead.
- If users need to select a currency — use the SelectField component instead.
Live examaple
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
How to use it
When using a currency field for a user to update a monetary amount, for example to change their monthly payment, do not use a pre-filled value.
Write the current monetary amount before the field, followed by an an empty currency field for the user to enter a new amount.
Custom currency
Currency icons we can use are:
- £ GBP - British pounds
- € EUR - euros
- $ AUD - Australian dollars
- $ USD - US dollars
Properties
These are the properties for anyone implementing this component and code.
|
Name |
Values |
Default |
|---|---|---|
|
Accepts all FieldProps |
FieldProps |
affixWidth = 40 |
|
currency |
GBP EUR AUD USD |
GBP |
|
... |
JSX.IntrinsicElements["input"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to easily understand the information required from me.
- As someone with a cognitive disability, I want to be able to understand if any personal information is required, for example whether it's the transaction amount I paid or the transaction currency I paid in.
- As someone with a cognitive disability, I want to be able to understand any errors related to the currency field, as well as how to resolve the error.
- As a keyboard-only user, I want to be able to navigate to the currency field using the Tab key.
- As a screen reader user, I want the label relating to the currency field to be announced when navigating to the field.
- As a screen reader user, I want any additional information provided alongside the currency field's label to be announced when navigating to the field.
- As a screen reader user, I want any error messages relating to the currency field to be announced when they become present.
- As a screen reader user, I want to be able to understand the currency that the information is required in.
- As a voice-control user, I want to be able to navigate to the currency field using the associated label.
Test steps
Use these steps to check that the checkbox component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the currency field using the Tab key.
- Verify that the currency field has a visible label.
- Verify that a name for the currency field is announced and that it includes the visible label.
- Verify that the correct currency type is announced.
If any errors appear when the form is validated, complete the following checks:
- Turn on a screen reader.
- Verify that when an error message appears after the form has been submitted, that the error is included in the ErrorSummary component.
- Navigate to the currency field using the Tab key.
- Verify that once the currency field receives focus, that there is an announcement to convey that there is an error with this field.