# Number Field ## Description: Number Field Number Field is an input dedicated for numerical values. It may be used in a variety of components like forms, comment sections and forums. ### Allowed Parent Components: 1. Col 2. Form ### Allowed Child Components: 1. Popover 2. Pulse 3. Trigger Before Render 4. Trigger On Change 5. Trigger On Enter Key Press ### Properties ### ➤ Field Label Allowed Values: An expression which should return string after evaluation ### ➤ Help Text1 Provide some helpful level one text for this field and see how it looks on the UI Allowed Values: Free text field ### ➤ Help Text2 Provide some helpful level two text for this field and see how it looks on the UI Allowed Values: Free text field ### ➤ Hide Label Check this to hide the label Allowed Values: Yes/No ### ➤ Label Primary Check to render the label in primary color Allowed Values: Yes/No ### ➤ Placeholder Allowed Values: An expression which should return string after evaluation ### ➤ Tool Tip A message which appears when a cursor is positioned over. Allowed Values: An expression which should return string after evaluation ### ➤ Tool Tip Position Select an option to change the placement of the tooltip when appears. Allowed Values: 1. left 2. right 3. top 4. bottom ### ➤ View Attribute Allowed Values: Attribute ### ➤ Insert Allowed Allowed Values: Yes/No ### ➤ Insert Allowed Condition Specify an expression to conditionally allow editing this field while creating a new row Allowed Values: An expression which should return boolean after evaluation ### ➤ Update Allowed Allowed Values: Yes/No ### ➤ Update Allowed Condition Specify an expression to conditionally allow editing this field while updating an existing row Allowed Values: An expression which should return boolean after evaluation ### ➤ Required Check this to make this field mandatory. Allowed Values: Yes/No ### ➤ Required Condition Specify an expression to conditionally make this field mandatory Allowed Values: An expression which should return boolean after evaluation ### ➤ Min Length Specify the minimum number of characters to be allowed. Allowed Values: Any number value ### ➤ Max Length Specify the maximum number of characters to be allowed. Allowed Values: Any number value ### ➤ Min Value A minimum value allowed for this field. Leave blank to not put any minimum value restriction. Allowed Values: Any number value ### ➤ Max Value A maximum value allowed for this field. Leave blank to not put any maximum value restriction. Allowed Values: Any number value ### ➤ Validate On Commit Check this to perform validations after commit. Allowed Values: Yes/No ### ➤ Column Size Choose 6 for a two column form or 4 for a three column form Allowed Values: Choose 6 for a two column form or 4 for a three column form ### ➤ Transparent Check this if you want this field to be displayed without any borders around the input field. Typically used for readonly fields on a grey background. Allowed Values: Yes/No ### ➤ Format Type Allowed Values: 1. Pattern 2. Custom ### ➤ Pattern Format If hash format defined, hash string allow number input inplace of hash. ex: #### #### #### #### Allowed Values: Free text field ### ➤ Format Allowed Values: Free text field ### ➤ Mask Format If mask defined, component will show non entered placed with masked value. ex: \_ Allowed Values: Free text field ### ➤ Prefix Provide a symbol which is placed before the value. e.g. $50. Allowed Values: Free text field ### ➤ Thousand Separator Add thousand separators on number Allowed Values: Yes/No ### ➤ Decimal Scale If defined it limits to given decimal scale Allowed Values: Any number value ### ➤ Fixed Decimal Scale If true it add 0s to match given decimalScale Allowed Values: Yes/No ### ➤ Allow Negative Allow negative numbers (Only when format option is not provided) Allowed Values: Yes/No ### ➤ Text Align Choose an option to change the alignment of the number. Allowed Values: 1. Left 2. Center 3. Right 4. Default ### ➤ All Caps Select this property for capitalizing the text. Allowed Values: Yes/No ### ➤ Text Color Select a color or enter the custom class to change the color of the text. Allowed Values: Select a color or enter the custom class to change the color of the text. ### ➤ Font Weight This property sets how thick or thin characters in text should be displayed. Allowed Values: 1. Light 2. Normal 3. Semi Bold 4. Bold 5. Default ### ➤ Hint Text Check this property to fade the font color of the text. Allowed Values: Yes/No ### ➤ Italic Check this property to change the font style of the text to italic. Allowed Values: Yes/No ### ➤ Muted Check this property to change the color of the font to light grey. Allowed Values: Yes/No ### ➤ No Decoration Check this property to remove decoration of the text Allowed Values: Yes/No ### ➤ Overflow Ellipsis Check this property to show hidden overflow content as an ellipsis ('…'). Allowed Values: Yes/No ### ➤ Text Size Select an option to change the size of the text. Allowed Values: 1. Small 2. Normal 3. Large 4. Default ### ➤ On Change Allowed Values: Controller Function ### ➤ On Focus Looking for a tip? Avoiding the use of onFocus! Allowed Values: Controller Function ### ➤ On Blur Looking for a tip? Avoiding the use of onBlur! Allowed Values: Controller Function ### ➤ On Value Change Allowed Values: Controller Function