{% extends "../../../layout.twig" %} {% set page_title = 'Conditionals and branching' %} {% set page_slug = '/functionality/conditionals-and-branching/' %} {% block page %}

{{page_title}}

Setup conditional flows, show only a tag if certain conditionals from other tags are meet.

Conditionals must be set on tag-level, adding them on eg. fieldset-tag does nothing.

A simple conditional

Setup some initial radio buttons

<fieldset cf-questions="Ready to try a conditional flow?">
	<input type="radio" name="cfc-intro" id="intro-yes" value="yes">
	<label for="intro-yes">Yes

	<input type="radio" name="cfc-intro" id="intro-no" value="no">
	<label for="intro-no">No thanks
</fieldset>

Then add a new tag with cf-conditional- + attribute name -> ex.: <input type="text" cf-conditional-[input-name]="...

<!--this input tag shows only if radio button with value yes was clicked-->
<input
	type="text"
	cf-questions="Question to ask.."
	cf-conditional-cfc-intro="yes" /> <!-- here we do the mapping -->

Multiple conditions

Add multiple conditions to a tag.

<input
	type="text"
	cf-questions="Question to ask.."
	cf-conditional-cfc-hello="world"
	cf-conditional-cfc-world="hello" />

Multiple values for condition

Add multiple values for a condition.

<input
	type="text"
	cf-questions="Question to ask.."
	cf-conditional-cfc-intro="yes||no" /> <!-- multiple values -->

Regular expression

<input
	type="text"
	cf-questions="Question to ask.."
	cf-conditional-cfc-intro="^yes$" /> <!-- regexp -->

Example

See the Pen Conversational Forms - Conditionals and branching by SPACE10 (@space10) on CodePen.

{% endblock %} {% block toc %} {% endblock %}