Conditional Field Example

Modify the inputs to see the conditional fields appear or disappear based on the logic defined in their data-storepress-conditional-field attribute.

data-storepress-conditional-field--relation="OR"

1. Basic String & Boolean Conditions

Text Input (STRING)

Type "show" to reveal:

✅ Visible! Value is "show".

Type "SENSITIVE" (case-sensitive):

✅ Visible! Case-sensitive match.

Boolean (Exists)

Type anything to reveal:

✅ Visible! Input is not empty.

Clear this input to reveal:

✅ Visible! Input is empty.

Select Input

Choose "Option B":

✅ Visible! Option B is selected.

2. Number (Length) & MINMAX Conditions

NUMBER (Length)

Type exactly 5 characters:

✅ Visible! Length is 5.

Type more than 3 characters (GT):

✅ Visible! Length > 3.

Type 3 or less characters (LTEQ):

✅ Visible! Length <= 3.

MINMAX (Length Range)

Type between 10 and 20 characters:

✅ Visible! Length is between 10 and 20.

Type at least 5 characters:

✅ Visible! Length is at least 5.

3. Range (Value) Conditions (ONLY for "number" and "range" input type)

Number Input (RANGE)

Enter a value between 10 and 20:

✅ Visible! Value is between 10 and 20.

Range Slider Input

Select a value greater than 75:

✅ Visible! Value is > 75.

Range value is exactly 50:

✅ Visible! Value is 50.

4. Array-Based Conditions

STRING-ARRAY (Select)

Select "A" or "C":

✅ Visible! Value is in ["A", "C"].

STRING-ARRAY (Checkboxes - Any Match)

Check "Red" or "Blue": Red Green Blue

✅ Visible! Red or Blue is checked.

STRING-ARRAY (Checkboxes - All Match)

Check BOTH "Red" and "Blue": Red Green Blue

✅ Visible! Red AND Blue are checked.

STRING-ARRAY (Checkboxes - Exact Match)

Check BOTH "Red" and "Blue": Red Green Blue

✅ Visible! Exactly Red AND Blue are checked..

STRING-ARRAY (Select Multiple - Any Match)

Select Apple or Orange:

✅ Visible! Apple or Orange are selected.

STRING-ARRAY (Select Multiple - All Match)

Select Apple and Orange:

✅ Visible! Apple and Orange are selected.

STRING-ARRAY (Select Multiple - Exact Match)

Select ONLY Apple and Orange:

✅ Visible! Exactly Apple and Orange are selected.

NUMBER-ARRAY (Length)

Type 3, 5, or 7 characters:

✅ Visible! Length is 3, 5, or 7.

5. Advanced Conditions (RegExp, Element)

REGEXP

Enter a valid email address:

✅ Visible! Value looks like an email.

ELEMENT (Value Equals Other Element's Value)

Password: Confirm Password (must match):

✅ Visible! Passwords match.

ELEMENT (Length Equals Other Element's Value)

Type some text: Enter a number matching the length of the text above:

✅ Visible! Text length matches the number.

ELEMENT (Value in Range of Other Element's Values)

Min Value: Max Value: Enter a value to check if it's in the range above:

✅ Visible! "Check" value is within the Min/Max range.

ELEMENT (Check Visibility)

Check name

I am the element to show on check name.

✅ Visible! The red element above is visible.

6. Relational Logic (AND, OR)

AND Relation

Type "A": Type "B":

✅ Visible! Both A and B are correct.

OR Relation

Type "A": Type "B":

✅ Visible! Either A or B is correct.

✅ Visible! Both A and B are correct.

Complex AND/OR

Type "start": Check A or B: A B

✅ Visible! Text is "start" AND (A or B is checked).

7. `inert` Inversion Logic

Inert on Match

Type "hide" to hide the box below:

I am visible by default. Typing "hide" will match the condition and apply `inert`, hiding me.

8. Form Reset

Type something, then click reset:

This box will disappear when you type, and reappear on form reset.