---
name: "[up-switch]"
area: "API"
kind: "HTML attribute"
parent: "up.form module"
url: "https://unpoly.com/api/up-switch"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.form module](https://unpoly.com/api/up.form.md)</nav>

# [up-switch]

Controls the state of another element when this field changes.

<nav aria-label="Guides">

- [Learn: Switching form state](https://unpoly.com/learn/switching-form-state.md)

</nav>

## Example {#example}

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

```html
<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]`](https://unpoly.com/api/up-show-for.md) will show an element while the field has one of the given values:

```html
<div class="level-dependent" up-show-for="beginner">
  shown for beginner level, hidden for other levels
</div>
```

There are other attributes like [`[up-hide-for]`](https://unpoly.com/api/up-hide-for.md), [`[up-disable-for]`](https://unpoly.com/api/up-disable-for.md) or [`[up-enable-for]`](https://unpoly.com/api/up-enable-for.md). You can also [implement custom switching effects](https://unpoly.com/learn/switching-form-state.md#custom-effects).

---

## Modifying attributes {#attributes}

### Dependencies {#attributes-dependencies}

#### up-switch {#up-switch}

(required)

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

#### [up-switch-region='form'] {#up-switch-region}

(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 {#attributes-observed-events}

#### [up-watch-event='input'] {#up-watch-event}

(optional)

The type of event to watch.

See [which events to watch](https://unpoly.com/learn/watch-options.md#events).

Switching is never [debounced](https://unpoly.com/learn/watch-options.md#debouncing). `[up-switch]` ignores `[up-watch-delay]` and [`up.form.config.watchInputDelay`](https://unpoly.com/api/up.form.config.md#config.watchInputDelay), since its effects are applied on the client.