# Switch Case ❺🧪

{% hint style="danger" %}
**NOT YET AVAILABLE** 

Internal R\&D only. 
{% endhint %}

**Think tabs, but more versatile.** 

SA5's Switch Case is a modeled on the programming concept of the same name;

```javascript
switch(x) {
  case 'item1': {
    console.log("item1 selected.");
    break;
  }
  case 'item2': {
    console.log("item2 selected.");
    break;
  }
  default: {
    console.log("no matching item found.");
    break;
  }
}
```

Here we have a series of defined case value.  When this block is evaluated;

* if x = 'item1', then we'll get the message *item1 selected*. 
* if x = 'item2', then we'll get the message *item2 selected*. 
* if x = 'item3', or any other value, then we'll get the message *no matching item found*. 

This simple concept adapts well to a number of UX concepts that already exist in Webflow;

* Tabs 
* Sliders 
* Forms, with the form, success, and error messages 
* Conditional visibility blocks 

**Think of it as dynamic conditional visibility.** 

{% hint style="success" %}
**EXPERIMENTAL** \
This will likely be most useful in SA6 if reactive techniques are included. 
{% endhint %}

## Basic Usage Notes

Here's an example setup; 

```html
<div wfu-switch="my-switch">
  <div wfu-switch-case="item1">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2">
     ... some content ... 
  </div>
  <div wfu-switch-case="?">
     ... some default content ... 
  </div>  
</div>
```

## Switch Attributes&#x20;

### wfu-switch = ( *switch-name* )&#x20;

**Required.** Defines the switch block. Place on the outer switch DIV.&#x20;

Set to a unique name, to identify this switch block.

### wfu-switch-match = ( *match-type* ) &#x20;

One of;&#x20;

* `default` ( *default* ) - Use the default case matching rules.&#x20;

### wfu-switch-display = ( *display-type* )&#x20;

**Optional.** Specify a display type you want the case elements to be displayed in.&#x20;

* `block` ( default )&#x20;
* `flex`&#x20;
* `grid`&#x20;
* `inline-block`&#x20;
* `contents`&#x20;

{% hint style="warning" %}
**TECHNICAL TEAM NOTE** &#x20;

This attribute may not be needed in the final implementation, since we may use `style` tags.&#x20;
{% endhint %}

## Switch Case Attributes &#x20;

### wfu-switch-case = ( *case-name* )

**Required.** Defines a case block. Place on an immediate child DIV of the `wfu-switch`.&#x20;

Set to the value you want to match. When your switch is triggered by script, or on page load, or by an SA5 event, a case div that matches the specified value will display, and a case div that does not match the specified value will hide.&#x20;

{% hint style="success" %}
When the case-name is set to a **question-mark ( `?` )**, this is handled as a special default case. This item will be shown when there are no other matches.&#x20;
{% endhint %}

Using the above example,

e.g. switching to "item1" will show the first item only

e.g. switching to "item3" will show the last item only, as there were no matches and it's the default &#x20;

## Advanced Usage Notes

Here's a more advanced example setup;&#x20;

```html
<div wfu-switch="my-switch-2">
  <div wfu-switch-case="item1,item3">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2,item3">
     ... some content ... 
  </div>
  <div wfu-switch-case="?">
     ... some content ... 
  </div>  
</div>

... some content ...

<div wfu-switch="my-switch-2">
  <div wfu-switch-case="item1">
     ... some content ... 
  </div>
  <div wfu-switch-case="item2,?">
     ... some content ... 
  </div>
</div>
```

Note;

* We have multiple separate switch blocks with the same name.&#x20;
* Case items can have comma separated values&#x20;
* Values can be repeated across case items&#x20;
* Case default can exist multiple times, and on elements that also have case&#x20;

Using the above example,

e.g. switching to "item1" will show items 1 & 4&#x20;

e.g. switching to "item3" will show items 1 & 2&#x20;

e.g. switching to item8 will show items 3 and 5 ( which have defaults ) &#x20;

## Designer Experience

To create the best experience in the designer, it's often effective to hide all case items on the page but show them all in the designer.&#x20;

You can use this as a custom HTML embed.&#x20;

```html
<style>
[wfu-switch-case] {
  display: none;
}
html:not([data-wf-domain]) [wfu-switch-case] {
  display: block;
}
</style>
```

## Future

Make it Reactive, so that a variable value change would change the&#x20;

When placed on a Tabs element, behave differently?&#x20;

When placed on a Slider element, behave differently?

When placed on a Form element, behave differently?&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-html/switch-case.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.