The Component class

The numerous different components all inherit properties and methods from the Component superclass. The following alphabetically ordered list of properties may be relevant for every component, regardless of their type:

NameDescriptionDatatype
allowCalculateOverrideWhether to allow the calculateValue to be overridden by the user. See the calculateValue property. Set to False by default.Boolean
attributesSet of HTML attributes for additional styling. See the setAttribute method described below.dict/struct​/containers.Map​
calculateValueThe value of the component, calculated using the values of other components. Can be JavaScript or JSON Logic. Set using the setCalculateValue method described below. See Custom JavaScript.String
clearOnHideWhether or not the component's value should be cleared when it becomes hidden. Is set to False by default (different from the default value in Form.io)Boolean
conditionalDefines when the component should be shown or hidden depending on values or properties of components in the form. For more info, see the Conditional section.Conditional
customClassCustom HTML class(es) to use for the component. Separate multiple classes with spaces. Adding custom classes is easily done using the addCustomClass method described below. You can add your own custom classes as described here.String
customConditionalA component can be hidden using this advanced conditional. Assign the variable show in a piece of JavaScript. For example: show = data.checkbox1 && data.checkbox2;. See Custom JavaScript. An example is provided in How to.String
defaultValueThe default value of the component shown after initialization and that is received when the form is submitted and the component value was not edited.Unspecified
customDefaultValueA custom default value can be derived in the frontend, using other data in the form. Assign the variable value in a piece of JavaScript. For example: value = data.number1 + data.number2;.String
descriptionText to display below the component in dark-gray.String
disabledWhether or not the component is disabled for the user. If it is disabled, the value cannot be changed by the user, but it can still be altered from the back-end. You can disable a component based on a condition as described in How to.Boolean
errorsAllows customizable errors to be displayed for the component when an error occurs or validation fails. For more info, see the Error section.Error
hiddenSet to true to make the component hidden by default.Boolean
inputWhether the component is an input from the user, or is purely visual. Generally does not need to be changed from the default value of the component.Boolean
keyUnique string by which the component can be identified. This can not be changed after calling the component's constructor.String
labelText to display on, in or around the component.
For example, the text to display on a button.
String
logicSpecifies custom behaviour for the component, such as enabling/disabling the component based on a condition. For more info, see the Logic section.Logic
modalEditEdit the value in a modal dialog instead of the component in the form. Defaults to False for all components.Boolean
placeholderText/value to display in an editable field, such as a textfield. The placeholder disappears when the component gains focus.Unspecified
prefixThe text to display as prefix of the component. Available for all components that allow textual input, such as textfields and numbers. The prefix is not part of the value of the component.String
redrawOnWhen to redraw the component. If the value of the component is set by for example custom JavaScript using Logic, you may require setting this property. The value can have the following forms:
  • submit: redraw the component when the form is submitted.
  • data: Redraw the component when any data in the form changes.
  • <key>: Redraw the component when a component with key <key> has its value changed.
String
suffixThe text to display as suffix of the component. Available for all components that allow textual input, such as textfields and numbers. The suffix is not part of the value of the component.String
tabindexSet this to override the tab index of the form, allowing you to control the order in which a user can tab through the application. The index can have decimals.Double
tableViewWhen true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid.Boolean
tooltipTooltip to display when the question mark icon on the component is hovered over. This is available for most, but not all components.String
typeType of the component. This is generally the name of the class, but lower-case. This property value cannot be changed.String
validateDefines validation criteria for the component. If the validation fails, a message is shown and a Submit button is disabled. For more info, see the Validate section.Validate

The following methods are available for all components:

NameSyntaxDescription
addComponentaddComponent(obj, comp1, ..., compN)Add a number of components to the input component. The input component must be able to host child components.
addCustomClassaddCustomClass(obj, class1, ..., classN)Sets the customClass property by adding the given HTML class names. These names can include custom classes you define as described here.
disableWhendisableWhen(obj, triggerType, triggerValue, disableComponent)Add disable (or enable) logic to a component. Does the same as the createDisableLogic function.
setAttributesetAttribute(obj, name, value)Set an HTML attribute of a component. If the attribute is already set, append it instead of overwriting it. Example: obj.setAttribute("style", "color: red")
setCalculateValuesetCalculateValue(obj, theValue, allowOverride)Set the calculateValue property to theValue and (optionally) the allowCalculateOverride property to allowOverride.
setRequiredsetRequired(obj)Makes the component required so that a Submit button cannot be clicked until the component has a value.

Available components

The components that can be added to your application have been divided into five categories. Each category contains an alphabetical list of all components including descriptions and examples.

  • Basic: These can be used to collect basic user inputs such as text fields and checkboxes.
  • Advanced: These components are for more advanced user inputs such as e-mail addresses or dates.
  • Layout: Use these to define the layout of your application.
  • Data: These can hold and/or present data, generally in tabular form.
  • Miscellaneous: These components can be used to perform uploads, downloads or to nest forms.