Description

The depends pattern makes it possible to make visibility of content conditional on form data.

Documentation

The depends pattern makes it possible to make visibility of content conditional on form data. A common use case is to only show parts of a form when relevant. Here is an example from a hypothetical pizza order form:

In this example the fieldset with options for extra toppings is only shown when the user indicates he wants to add extra toppings.

Another common use case is filtering a list based on some options:

Show paid invoices Show draft invoices Show overdue invoices

• A paid invoice
• Another paid invoice
• An overdue invoice
• A draft invoice
…

Dependency expressions

Dependencies are specified via dependency expression. These are expressions that specify when an item should be visible or not.

The simplest form of a dependency expression is <input name> which indicates that an input element with the given name (or id) must have a value (if it is a checkbox must be checked). You can also test for a specific value:

• <input name> = <value>: indicates that an input element must have a specific value. This is most useful when used to check which radio button is checked.
• <input name> != <value>: indicates that an input element must not have a specific value. This is most useful when used to check if a specific radio button is not checked.
• <input name> <= <value>: indicates that an input element must have a value less than or equal than the given value. This is most useful for number and range inputs.
• <input name> < <value>: indicates that an input element must have a value less than the given value. This is most useful for number and range inputs. inputs.
• <input name> > <value>: indicates that an input element must have a value greater than the given value. This is most useful for number and range inputs. inputs.
• <input name> >= <value>: indicates that an input element must have a value greater than or equal than the given value. This is most useful for number and range inputs.
• <input name> ~= <value>: check if the value is a substring of the current value of the input.

You can also revert a test by putting the not keyword in front of it. Here are some examples:

Hidden items will be included.

Not showing hidden items.

Showing cheap options.

You can also combine multiple tests using and and or, optionally using parenthesis to specify the desired grouping. Here is a more complex example which demonstrates the use of and:

Adding bacon means your pizza is no longer vegetarian!

This pizza menu will show a warning if the user selects a vegetarian pizza but then also adds extra bacon to it.

Actions

Two types of actions can be taken by the pattern: changing visibility and disabling elements. The action can be specified using the action property.

Submit

This example shows a submit button which is disabled if the title input has no value.

The available actions are:

• show: make an item's visibility conditional, based on the dependencies. If the dependencies are not met the item will be made invisible. In addition a CSS class of hidden or visible will be set.
• enable: disables items and adds a disabled class if the dependencies are not met. Input elements are disabled by setting their disabled property. Links are disabled by registered a temporary event handler that blocks their default behaviour.
• both: both the enable and show actions will be applied. Conversely, an element will be both hidden and disabled when the condition is not met.

Transitions

When hiding or showing items you can specify a transition effect to be used. The default behaviour is to not use any transition and immediately hide or show the element by toggling its display style. If you prefer to control the effect completely with CSS you can use the css transition.

This allow full control in CSS, including the use of animation for browsers supporting CSS animation. Two non-CSS based animation options are also included: fade will fade the element in and out, and slide uses a vertical sliding effect. During a transition an in-progress class will be set on the element.

Option reference

The depends can be configured through a data-pat-depends attribute. The available options are: