Currency Input
Currency input enables entering of monetary figures as well as the selection of the currency type.
Anatomy
Similar to Phone Number Input, Currency Input is a combo of Prompt, Text Input, and Number Input.
- Label: Title or brief description of input.
- Pill: Displays the flag of the country or geographical region most closely associated with the currency code and opens the Bottom Sheet upon interaction.
- Input Placeholder and Text: Displays a numerical placeholder and darker text upon input.
- Contextual Message: (Optional) Message to aid in users understanding of acceptable input text. (Conditional) Appears if the warning or error state is triggered, in which case the help message would be replaced by Error/Warning message when triggered. See Text Input for full details.
- Input Field: Contains the Pill, currency symbol, and input text.
- Bottom Sheet: Opens when the pill has been tapped. Allows for selection of currency symbol.
- Search: Used to search for currency.
- Expandable: Used as a section header to separate different groups of content.
- List: Displays flag and commonly known currency name.
Usage Guidelines
When to Use
- Use Currency Input for entering a monetary figure.
When to Consider Something Else
- Use a Number Input if the figure does not have a monetary context.
Behaviors
Tapping on Pill
Tapping the pill in Currency Input invokes our Bottom Sheet, which follows the typical patterns found in Prompt. Pill should be defaulted to the standard currency of the tenant the user belongs to.
Frequently Used
After invoking Bottom Sheet, currencies are automatically sorted into two groups, frequently used and all currencies. The frequently used section is pre-determined based on Workday’s global usage data. The all currencies section is displayed alphabetically by default.
Selecting A Currency
Once in the Prompt / Bottom Sheet, a user can either cancel their decision, returning to their previous location on the page of inputs, or select a new currency.
Upon selection of a new currency, users should be redirected back to their preceding screen with their new selection. Please note that the location of the input on the screen should remain the same to prevent a disorienting experience.
Inputting A Value
When selecting the input field instead of the pill, the Currency Input should enter its active state, where the keyboard simultaneously comes into view. The currency type automatically populates the symbol, which is not editable via keyboard.
Searching for A Currency
Currencies are searchable by both their country / geographical region of origin, the currency name, and the currency symbol.
API Guidelines
Methods
Class name: CurrencyInput Module name: UIComponentsPlugin
public init<Currency: CurrencyRepresenting>(
inputLabel: String,
selectedCurrency: Binding<Currency?>,
input: Binding<String>,
unformattedOutput: Binding<String>,
isRequired: Bool = false,
inputAppearance: BaseLabeledInputAppearance,
helperText: LabeledInputHelperText? = nil,
locale: Locale,
localizer: LocalizationAdapting,
featureData: FeatureMetricsData
)Consumers should use enum SupportedCurrency: CurrencyRepresenting for the Currency type when
using this component.
Parameters
| Name | Description |
|---|---|
| inputLabel | The label of the input field in CurrencyInput. |
| selectedCurrency | The selected currency, also used to provide an initial/default currency. Selection defaults to nil but display falls back to USD. |
| input | The input value of the LabelledNumberInput contained by CurrencyInput. This value has number grouping separators and may be modified by NumberProcessor. |
| unformattedOutput | The unformatted output value of the LabelledNumberInput contained by CurrencyInput. This value is the same as the input value, but without any formatting. |
| isRequired | Adds a red asterisk to the input label if true. |
| inputAppearance | Styles the input field to have a normal, warning, or error appearance. |
| helperText | The helper text to be displayed below the input label. |
| locale | The locale to be used for the currency input. Localizes currency names, for example. |
| localizer | The localization adapter to be used for the currency input. |
| featureData | The feature name/context and the screen ID in which the component appears. |
Accessibility Guidelines
Coming Soon
Content Guidelines
When writing content for Currency Input, please refer to the placeholder and instructional text sections of Content’s UI Text recommendations.
Anatomy
Similar to Phone Number Input, Currency Input is a combo of Prompt, Text Input, and Number Input.
- Label: Title or brief description of input.
- Pill: Displays the flag of the country or geographical region most closely associated with the currency code and opens the Bottom Sheet upon interaction.
- Input Placeholder and Text: Displays a numerical placeholder and darker text upon input.
- Contextual Message: (Optional) Message to aid in users understanding of acceptable input text. (Conditional) Appears if the warning or error state is triggered, in which case the help message would be replaced by Error/Warning message when triggered. See Text Input for full details.
- Input Field: Contains the Pill, currency symbol, and input text.
- Bottom Sheet: Opens when the pill has been tapped. Allows for selection of currency symbol.
- Search: Used to search for currency.
- Expandable: Used as a section header to separate different groups of content.
- List: Displays flag and commonly known currency name.
Usage Guidelines
When to Use
- Use Currency Input for entering a monetary figure.
When to Consider Something Else
- Use a Number Input if the figure does not have a monetary context.
Behaviors
Tapping on Pill
Tapping the pill in Currency Input invokes our Bottom Sheet, which follows the typical patterns found in Prompt. Pill should be defaulted to the standard currency of the tenant the user belongs to.
Frequently Used
After invoking Bottom Sheet, currencies are automatically sorted into two groups, frequently used and all currencies. The frequently used section is pre-determined based on Workday’s global usage data. The all currencies section is displayed alphabetically by default.
Selecting A Currency
Once in the Prompt / Bottom Sheet, a user can either cancel their decision, returning to their previous location on the page of inputs, or select a new currency.
Upon selection of a new currency, users should be redirected back to their preceding screen with their new selection. Please note that the location of the input on the screen should remain the same to prevent a disorienting experience.
Inputting A Value
When selecting the input field instead of the pill, the Currency Input should enter its active state, where the keyboard simultaneously comes into view. The currency type automatically populates the symbol, which is not editable via keyboard.
Searching for A Currency
Currencies are searchable by both their country / geographical region of origin, the currency name, and the currency symbol.
API Guidelines
Coming soon
Accessibility Guidelines
Coming Soon
Content Guidelines
When writing content for Currency Input, please refer to the placeholder and instructional text sections of Content’s UI Text recommendations.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.