mc-conditional

mc-conditional in action

mc-conditional is a web component that augments the behavior of traditional html form elements so that when certain values are chosen or entered into the form, the visibility of certain elements of the page is altered.

You might find this web component useful if:

• You want to simplify a long form by hiding questions that are only relevant to users that have answered a certain question
• You want to display certain messages based on the way a user has filled out a form
• Your page consists of a sequence of slides, tabs or branching paths that you want to display without having to transition to other pages or without having to build out a single page application
• You want a simple way of managing conditional visibility for situations where the added complexity or technical debt of using a framework with mvc or reactive components isn't warranted

To Install

Run:

npm install mc-conditional

Then include the file in your html:

<script src="./node_modules/mc-conditional/McConditional.js" type="module"></script>

To Use

To use the component, simply wrap any of your standard form elements with the <mc-conditional> tag like so:

`

`

Notice that some of the conditionals have some attributes commented out. You can use these custom attributes to provide some additional customization to the behavior of your elements (by for instance explicitly stating which values should alter visibility (c-value) and which html elements your component should target the visibility of (visible-element).)

As you can see, mc-conditional works on selects, inputs, checkboxes, radio buttons, and more.

If you want to see the code above in action, please visit this mc-conditional example page