Number
The number component is designed to enter integer or decimal numbers. See Currency for a similar component designed to enter currency amounts.

You use the number component like a regular input field, for example:
<fr:number ref="my-number">
<xf:label>Quantity</xf:label>
</fr:number>
Form builder shows extended control settings for Number and Currency fields:

Number and Currency field control settings
These are also available at the form level:

Number and Currency field form settings
fr:number
must be bound to either of:xs:decimal
xs:integer
[SINCE Orbeon Forms 2016.1]
fr:number
supports parameters, which you can set via properties or directly on fr:number
:prefix
: optional prefix shown before the numbersuffix
: optional suffix shown after the numberdigits-after-decimal
: digits to show after the decimal point (by default 0, which means the number is an integer)decimal-separator
: single character to use as decimal separator- use
.
or,
only
grouping-separator
: single character to use as thousands separator separator (can be blank)round-when-formatting
: when formatting the number for display, whether to round the value todigits-after-decimal
if there are more digits after the decimal point or not. The default isfalse
.- SINCE Orbeon Forms 2016.1
round-when-storing
: when storing the number entered by the user, whether to round the value todigits-after-decimal
if there are more digits after the decimal point or not. The default isfalse
.- SINCE Orbeon Forms 2016.1
pattern
- SINCE Orbeon Forms 2016.1
- overrides the HTML
pattern
attribute
field-align
: determines the alignment of the value in the field- SINCE Orbeon Forms 2022.1.1
left
(default): align content to the leftright
: align content to the right
These are the default values of the properties:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.prefix"
value=""/>
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.suffix"
value=""/>
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.digits-after-decimal"
value=""/>
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.decimal-separator"
value="."/>
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.grouping-separator"
value=","/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-formatting"
value="false"/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-storing"
value="false"/>
The
digits-after-decimal
parameter controls how the value entered by the user gets formatted when the field displays it. This does not impact validation of the data at all.[SINCE Orbeon Forms 2016.1]
In order to validate the number to have a specific number of decimal digits, the
xxf:fraction-digits()
function should be used.[SINCE Orbeon Forms 2016.1]
On iOS, when the control identifies that the value is a non-negative integer, it shows a numeric keypad:

This is the case if:
- the control is bound to
xs:integer
OR is bound toxs:decimal
and has anxxf:fraction-digits(0)
constraint
Otherwise, the control shows the numeric pane of the regular keyboard:

Here is an example with a suffix:

<fr:number ref="my-number" suffix="m/s">
<xf:label>Number</xf:label>
<xf:hint>Number field with validation</xf:hint>
</fr:number>
[SINCE Orbeon Forms 2016.1]
Assume the following properties or corresponding attributes:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.digits-after-decimal"
value="2"/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-formatting"
value="true"/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-storing"
value="false"/>
Scenario:
- User types "12345.678".
- Because
round-when-storing
isfalse
, the value is not rounded and stored as is in the data. - When the user focuses out of the field, the value is formatted and rounded, because
round-when-formatting
is set totrue
. - Field displays "12,345.68".
This is useful if you want to keep the full precision of decimal values in the data, but format them nicely to a given number of decimals.
Assume the following properties or corresponding attributes:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.number.digits-after-decimal"
value="2"/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-formatting"
value="true"/>
<property
as="xs:boolean"
name="oxf.xforms.xbl.fr.number.round-when-storing"
value="true"/>
Scenario:
- User types "12345.678".
- Because
round-when-storing
istrue
, the value is rounded and stored as "12345.68" in the data. - When the user focuses out of the field, the value is formatted and rounded, because
round-when-formatting
is set totrue
. - Field displays "12,345.68".
NOTE: Here rounding during formatting doesn't change the value since it was rounded when stored in the first place.
This is useful if you don't want to keep the full precision of decimal values in the data and want to force a maximum number of digits after the decimal point.
[SINCE Orbeon Forms 2022.1.1]
Regular controls:

Right-aligned content
Within a repeated grid:

Right-aligned content in a repeated grid
Last modified 2mo ago