# Conditional

Add a Conditional to a component to define when the component should be shown or hidden based on data or properties of the form. With the properties of this class, an equation like show when "NameTextField" equals "Bart" can determine whether or not the component is shown.

## Properties

NameDescriptionDatatypeDefault
showDo or do not show when a condition is met.BooleanFalse
whenKey of the component whose value to compare to the eq property value.String
eqValue to compare the value of the component given in when to.Unspecified
jsonInstead of the show, when, eq approach, you can use JSON logic to determine whether the component must be available. This facilitates toggling the component based on other properties than the value of the linked component.String

It is also possible to specify a customConditional which evaluates a Javascript expression to determine whether the component should be shown. When conditional and customConditional are both specified, the latter has precedence.

## Example

The following example shows a form whose Number component is only shown when a checkbox is checked.

The initialization code is as follows:

% Create a Checkbox.
cb          = component.Checkbox("CalibrateCb", form);
cb.label    = "Calibrate";

% Create a Number and add a Conditional for toggling its visibility.
nr          = component.Number("CalibrationNr", form);
nr.label    = "Calibration value";
nrCond      = componentProperties.Conditional(nr);
nrCond.show = true;
nrCond.when = "CalibrateCb";
nrCond.eq   = true;

# Create a Checkbox.
cb = component.Checkbox('calibration_cb', form)
cb.label = 'Calibrate'

# Create a Number and add a Conditional for toggling its visibility.
nr = component.Number('calibration_number', form)
nr.label = 'Calibration value'
nr_cond = component_properties.Conditional(nr)
nr_cond.show = True
nr_cond.when = 'calibration_cb'
nr_cond.eq = True