# Input Currency

InputCurrency is a component that displays a currency input field with a
currency symbol.

## Design & usage guidelines

InputCurrency defaults to displaying a minimum of two decimal places and a
maximum of five decimal places. If a user continues to try and enter numbers
beyond the `maxDecimalPlaces` default or set number, the component will
automatically round the value to the nearest two decimal places.

By setting `showCurrencySymbol` to true, the users currency prefix will be
displayed to them.


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
| `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
| `decimalPlaces` | `number` | No | — | The minimum decimal places for the currency number Default value is 2 |
| `defaultValue` | `number` | No | — |  |
| `disabled` | `boolean` | No | — | Disable the input |
| `invalid` | `boolean | string` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
| `keyboard` | `"decimal-pad" | "numbers-and-punctuation"` | No | — |  |
| `loading` | `boolean` | No | — | Show loading indicator. |
| `loadingType` | `"glimmer" | "spinner"` | No | — | Change the type of loading indicator to spinner or glimmer. |
| `maxDecimalPlaces` | `number` | No | — | The maximum decimal places for the currency number Default value is 5 |
| `maxLength` | `number` | No | — | The maximum length of the input Default value is 10 |
| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
| `name` | `string` | No | — | Name of the input. |
| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
| `onChange` | `(newValue?: string | number) => void` | No | — |  |
| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
| `readonly` | `boolean` | No | — | Makes the input read-only |
| `secureTextEntry` | `boolean` | No | — | Use secure text entry |
| `showCurrencySymbol` | `boolean` | No | — | Whether to display the user's currency symbol or not Default value is true |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
| `textContentType` | `"none" | "name" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | ... 33 more ... | "shipmentTrackingNumber"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `none` which disables auto complete ... |
| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
| `value` | `number` | No | — |  |