Currency Field
Control to enter a formatted currency value.
Module
import '@capitec/omni-components/currency-field';import { OmniCurrencyField } from "@capitec/omni-components-react/currency-field";Source
@capitec/omni-components
Properties
| Name | Attribute | Type | Description |
|---|---|---|---|
| currencySymbol | currency-symbol | |
Currency symbol. |
| thousandsSeparator | thousands-separator | |
Thousands separator. |
| fractionalSeparator | fractional-separator | |
Fractional separator. |
| fractionalPrecision | fractional-precision | |
Fractional precision. |
| noNativeKeyboard | no-native-keyboard | |
Disables native on screen keyboards for the component. |
| formatter | formatter | |
Formatter provided to format the value. |
| label | label | |
Text label. |
| value | value | |
Value entered into the form component. |
| data | data | |
Data associated with the component. |
| hint | hint | |
Hint message to assist the user. |
| error | error | |
Error message guiding a user to correct a mistake. |
| disabled | disabled | |
Indicator if the component should be disabled. |
| clearable | clearable | |
Toggles the ability to clear the value of the component. |
| dir | dir | |
Used to set the base direction of text for display |
| lang | lang | |
Used to identify the language of text content on the web |
Events
| Name | Type | Description |
|---|---|---|
| change | |
Dispatched when the component value changes. |
Slots
| Name | Description |
|---|---|
|
Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called |
|
Replaces the icon for the clear slot. |
|
Replaces the icon for the prefix slot. |
|
Replaces the icon for the suffix slot. |
Theme Variables
| Name | Description |
|---|---|
|
Theme primary color. |
|
Theme primary hover color. |
|
Theme primary active color. |
|
Theme accent color. |
|
Theme accent hover color. |
|
Theme accent active color. |
|
Theme background color. |
|
Theme background hover color. |
|
Theme background active color. |
|
Theme font color. |
|
Theme disabled border color. |
|
Theme disabled background color. |
|
Theme disabled background color. |
|
Theme error border color. |
|
Theme hint font color. |
|
Theme inactive color. |
|
Theme inactive color. |
|
Theme font family. |
|
Theme font size. |
|
Theme font weight. |
|
Theme border radius. |
|
Theme border width. |
|
Theme box shadow. |
Base Form Variables
| Name | Description |
|---|---|
|
Container font family. |
|
Container width. |
|
Container height. |
|
Layout border radius. |
|
Layout background color. |
|
Layout height. |
|
Layout width. |
|
Form border top. |
|
Form border bottom. |
|
Form border left. |
|
Form border right. |
|
Form border width. |
|
Form border radius. |
|
Form border style. |
|
Form border color. |
|
Form label margin left. |
|
Form label text align. |
|
Form label color. |
|
Form label font size. |
|
Form label font weight. |
|
Form label z-index. |
|
Form focussed border width. |
|
Form focussed border color. |
|
Form focussed label disabled background color. |
|
Form focussed label transform scale. |
|
Form focussed label left margin. |
|
Form focussed label color. |
|
Form focussed error label color. |
|
Form focussed label background color. |
|
Form focussed label left. |
|
Form focussed label right. |
|
Form error label color. |
|
Form error border color. |
|
Form label disabled color. |
|
Form disabled border color. |
|
Form disabled background color. |
|
Form disabled label focussed background color. |
|
Form hint label font color. |
|
Form hint label font family. |
|
Form hint label font size. |
|
Form hint label font weight. |
|
Form hint label top padding. |
|
Form hint label left padding. |
|
Form hint label border width. |
|
Form error label font color. |
|
Form error label font family. |
|
Form error label font size. |
|
Form error label font weight. |
|
Form error label top padding. |
|
Form error label left padding. |
|
Form error label border width. |
|
Form hover color. |
|
Form disabled hover color. |
|
Form error hover color. |
|
Form clear control right margin. |
|
Form clear control left margin. |
|
Form clear control width. |
|
Form clear icon color. |
|
Form clear slot height. |
|
Form clear slot width. |
Component Variables
| Name | Description |
|---|---|
|
Currency field text align. |
|
Currency field font color. |
|
Currency field font family. |
|
Currency field font size. |
|
Currency field font weight. |
|
Currency field padding. |
|
Currency field height. |
|
Currency field width. |
|
Currency field disabled font color. |
|
Currency field label left margin. |
|
Currency field symbol font size. |
|
Currency field symbol font color. |
|
Currency field symbol left padding. |
|
Currency field symbol selectable state. |