Edit this page

up.form [up-switch]
HTML selector

Controls the state of another element when this field changes.

Switching form state

Example

The controlling form field gets an [up-switch] attribute with a selector for the elements to show or hide:

<select name="level" up-switch=".level-dependent">
  <option value="beginner">beginner</option>
  <option value="intermediate">intermediate</option>
  <option value="expert">expert</option>
</select>

The target elements can choose how to alter their state after the controlling field changes. For example, the [up-show-for] will show an element while the field has one of the given values:

<div class="level-dependent" up-show-for="beginner"> <!-- mark: up-show-for -->
  shown for beginner level, hidden for other levels
</div>

There are other attributes like [up-hide-for], [up-disable-for] or [up-enable-for]. You can also implement custom switching effects.


Dependencies

up-switch
required

A CSS selector for elements whose state depends on this field's value.

[up-switch-region='form']
optional

A selector for the region in which elements are switched.

By default all matching elements within the form are switched. You can expand or narrow the search scope by configuring a different selector.

Observed events

[up-watch-event='input']
optional

The type of event to watch.

See which events to watch.

[up-watch-delay=0]
optional

The number of milliseconds to wait after a change.

This can be used to batch multiple events within a short time span. See debouncing callbacks.