Number Component

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

A short prompt telling end-users the expected value of an input field. For example: Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Alphanumeric characters append to the start of the value entered in the field. If called by another component, the prefix stores with the value.

A short hint that displays when an end-user positions their cursor over the (Tooltip) icon. Tooltips can display across more than one line.

Setting Hide Label to  (ON) hides Label Text from displaying in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Your Label Text still displays in the Module Builder.

By default, this setting is set to (OFF).

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Autocomplete detects end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. data saved in a browser and uses it to fill relevant fields. For example, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., if there is a field labeled First Name, and an end-user clicks into the field, the end-user's browser autofill function suggests first names saved to the browser.

By default, Autocomplete is set to  (ON).

When Autocomplete is set to  (ON), the Autocomplete Value drop-down displays. Use this drop-down to select an ARIA role to better direct the autocomplete feature when an end-user clicks on a field. For example, selecting address-line1 helps the browser determine that the field should autofill with the first line of an address.

To learn more about supported ARIA values in Unqork, view our Autocomplete reference guide.

The thousands separator is the comma used wherever numbers go above 999. Adding the thousands separator improves readability. It's the difference between reading 1000 and reading 1,000.

When set to  (ON), a comma displays when the end-user enters any number above 999.

This setting does not affect how the number stores in the database.

By default, Show Thousands Separator is set to (OFF).

Use this setting to format the value as currency, applying the Prefix, Suffix, and Thousands Separator settings.

By default, Format as Currency is set to (OFF).

This setting only supports currency formats with comma separators after every three digits.

Displays as a drop-down list of the world's three-letter ISO 4217 ISO 4217 defines alpha codes and numeric codes for the representation of currencies. currencies.

By default, Currency Type is set to USD.

Controls how end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. interact with the component. Choose from the following options:

• Enable User Input: Allow end-users to view and enter data in this field.

• Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.

• Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

• Read Only - Accessible: Makes the field non-editable and applies the readonly HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. attribute, which notifies screen readers that the field cannot be modified.

Sets the styling that the end-user sees applied to the Number field. Number components can have Field, Range Slider, or Stepper styling applied.

By default, the Interaction Type is set to Field.

The Field Interaction Type displays the field as a simple text box. The end-user enters the value directly into the field.

The Field Interaction Type has three customization settings:

The Range Slider Interaction Type displays the field as a horizontal slider. The end-user moves the slider to the left or to the right to set its value. The selected value shows at the top left of the Range Slider.

The Range Slider has six customization settings:

Setting Hide Label to  (ON) hides Label Text from displaying in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Your Label Text still displays in the Module Builder.

By default, this setting is set to (OFF).

When set to  (ON), end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change.

By default, Disable User Input is set to (OFF).

Prevents the browser from autofilling the number field with the end-user's previously used values.

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

The Field Interaction Type displays the field as a simple text box. The end-user enters the value directly into the field.

The Field Interaction Type has three customization settings:

The Range Slider Interaction Type displays the field as a horizontal slider. The end-user moves the slider to the left or to the right to set its value. The selected value shows at the top left of the Range Slider.

The Range Slider has six customization settings: