Number Fields

Web components for number, percent and currency fields that format and parse values in the user's locale.

mo-field-number — A field for a number, formatted in the user's language and clamped to min and max when committed.

mo-field-currency — A number field for an amount of money, showing the currency's symbol at the end.

mo-field-percent — A number field for a percentage, from 0 to 100 unless min and max say otherwise, with a percent sign at the end.

Installation

npm install @3mo/number-fields

import '@3mo/number-fields'

Usage

<mo-field-number label='Quantity' value='1'></mo-field-number>

Examples

• Range — A value outside min and max is clamped when it is committed - type 80 and leave the field.
• Formatting — The value is formatted in the page's language - switch it in the toolbar to see the separators change.
• Slots — start and end hold icons or units beside the number.
• States — Required, read-only, disabled and dense.

Currency Field

• Default
• Currencies — currency takes an ISO 4217 code and shows its symbol; without one no symbol is shown.

Percent Field

• Default
• Range — The value is clamped to 0-100 when committed - type 150 and leave the field.
• Percent Sign — percentSign replaces the sign shown at the end.

API

mo-field-number

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | min | min | number \| undefined | | The minimum value of the field. | | max | max | number \| undefined | | The maximum value of the field. | | step | step | number \| undefined | | The step value of the field. | | selectOnFocus | selectOnFocus | true | true | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | number \| undefined | | The value of the field. | | label | label | string | "" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-currency

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | currency | currency | Currency \| undefined | "defaultCurrency" | The currency of the field. | | min | min | number \| undefined | | The minimum value of the field. | | max | max | number \| undefined | | The maximum value of the field. | | step | step | number \| undefined | | The step value of the field. | | selectOnFocus | selectOnFocus | true | true | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | number \| undefined | | The value of the field. | | label | label | string | "" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

mo-field-percent

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | percentSign | percentSign | string | "%" | The percent sign of the field. | | min | min | number | 0 | The minimum value of the field. | | max | max | number | 100 | The maximum value of the field. | | step | step | number \| undefined | | The step value of the field. | | selectOnFocus | selectOnFocus | true | true | Selects the input text when the field receives focus. | | dense | dense | boolean | false | Whether the field is dense | | value | value | number \| undefined | | The value of the field. | | label | label | string | "" | The field's label | | readonly | readonly | boolean | false | Whether the field is readonly | | disabled | disabled | boolean | false | Whether the field is disabled | | required | required | boolean | false | Whether the field is required |

Events

| Name | Detail | Description | | --- | --- | --- | | change | T \| undefined | Dispatched with the value when the user commits it | | input | T \| undefined | Dispatched with the value while the user edits it | | validityChange | boolean | Dispatched with whether the value is valid, after every validation |

Slots

| Name | Description | | --- | --- | | (default) | The field's content | | start | Content to be placed at the start of the field | | end | Content to be placed at the end of the field |

CSS parts

| Name | Description | | --- | --- | | input | The input element. | | container | Field's container |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH