Enforce Field Ranges and Boundaries for Validation
Range-based validation provides guardrails for user input by enforcing constraints directly in the component configuration. Components such as UiSdlNumberInput and UiSdlDateTimeInput support these boundary settings through properties like min, max, rangeStart, and rangeEnd. These settings allow forms to reject invalid values automatically before the user can submit them.
Define numeric and date boundaries
The following form enforces two types of boundaries:
- A numeric input restricts values to a range between 0 and 100, with step increments of 1.
- A date input blocks dates before January 1, 2025 and after December 31, 2025.
Use these constraints when you need to ensure the form only accepts valid data without adding external logic or epics.
Range constraints for number and date
The example below defines a form that applies strict boundaries to two input fields. The numeric input only accepts whole numbers from 0 to 100. The date input restricts selection to a calendar range between January 1, 2025 and December 31, 2025.
These constraints prevent the user from entering invalid data and provide immediate validation feedback at the component level.
{
"type": "UiSdlConnected<UiSdlForm>",
"component": {
"title": { "title": "Range Validation" }, // Main form title
"subtitle": { "title": "Applies number and date limits" }, // Brief description
"width": 20, // Optional: limits form width for consistent display
"dataSpec": {
"fieldSets": {
"type": "[UiSdlFormFieldSet]",
"value": [
{
"type": "UiSdlFormFieldSet",
"fields": [
{
"inputElement": {
"type": "UiSdlNumberInput", // Numeric input component
"min": 0, // Minimum allowed value
"max": 100, // Maximum allowed value
"step": 1, // Acceptable increment
"placeholder": "Enter efficiency" // Text shown before input
},
"fieldName": "count", // Data model field name
"label": "Count", // Display label for the input
"required": true // User must enter a value
},
{
"inputElement": {
"type": "UiSdlDateTimeInput", // Date input component
"placeholder": "Manufactured Date", // Input hint
"allowKeyboardEdit": true, // Allows manual text entry
"showTimePicker": false, // Disables time input UI
"dataSpec": {
"range": {
"rangeStart": "2025-01-01", // First selectable date
"rangeEnd": "2025-12-31" // Last selectable date
}
}
},
"fieldName": "manufacturerDate", // Data model field name
"required": true, // Field is mandatory
"label": "Manufactured Date" // Display label for the input
}
]
}
]
}
}
}
}The UiSdlNumberInput and UiSdlDateTimeInput components include native support for input validation through boundaries.
Several other components support similar built-in validation through configuration. While this example focused on UiSdlNumberInput and UiSdlDateTimeInput, components such as UiSdlDateRange, UiSdlSlider, and UiSdlDateTimeOpenRangeInput also provide ways to constrain input values.
Most UI components have out of the box validations available. To find out which validations are available, check the Type definition for the UI component you want to use.