# Switcher

[YouTube video](https://www.youtube.com/watch?v=6OvoIfjg60g)

The switcher component is useful for making templates where you want to let the user choose a single item from a list of shapes or patterns. It works best when combined with a **Select** parameter.

The video above demonstrates how to incorporate the switcher into a project where you can mix and match shapes and patterns, but you can use the steps below to understand the basic structure.

## How to use it

1.  Each shape or pattern in the selection should be a separate component. For example we could name a group of 3 separate components `Shape A`, `Shape B` and `Shape C` with a circle, a triangle and a square respectively.
    
    ![](https://content.cuttle.xyz/learn/switcher/0376366ad5a12ea6cb460077d6342b2c43260e5f8d53c233f6a22804625859a3.gif)
    
2.  Create an additional component, as an example we can call it `Shapes` but it can have any name that you want. Now go to to the search bar, type “switcher”, find it in the Advanced section then drag it to the center of the canvas.
    
    ![](https://content.cuttle.xyz/learn/switcher/8a6b316f3e369237b36ebb8dc76577305a661519f9e4e38c6bab477e86de3fd8.gif)
    
3.  When you have the **Switcher** component selected you’ll see there is a parameter on the right hand side called `shape` where we can type any of the existing component names
    
    ![](https://content.cuttle.xyz/learn/switcher/bf950f74849356bded3beef6f300fac7a442e68a292b0a68b691d4634455de22.gif)
    
4.  Now we can create a new parameter, we can call it `shapeSelection` and change the parameter type to **Select.** This will present us with a window where we can edit the options.
    
    ![](https://cuttle-content.imgix.net/learn/switcher/680afd2be70b604b99844a08544ac95136032a95cabb7a0fa0f552047fb821dc.jpg?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)
    
5.  Write each option on a new line, for this example we’ll use the more descriptive names of each shape: circle, triangle, square (instead of Shape A, Shape B, etc).
    
    ![](https://cuttle-content.imgix.net/learn/switcher/0f361d2b529ec287810ab6ae4bbdc8cd078954b2460b8b66fdbd93ad6a9080b7.jpg?auto=compress,format&q=60&fit=max&w=720&h=720&dpr=2)
    
6.  Now select the Switcher and type this expression in the `shape` parameter
    
    { "circle" : ShapeA, "triangle": ShapeB, "square" : ShapeC, }\[shapeSelection\]
    

This is a compact way to tell the **Switcher** to use the current selection on the `shapeSelection` parameter:

-   if the user selects “circle” then use the component `Shape A`
-   if the user selects “triangle” then use the component `Shape B`
-   if the user selects “square” then use the component `Shape C`

💡

If you are curious this is called a “lookup table” in [JavaScript](https://en.wikipedia.org/wiki/JavaScript) which is the language used inside of Cuttle.

## Creating additional options

You can always add more choices to the selection. For example if you want to add a star shape:

1.  Create a new component `Shape D` with a star shape in it.
2.  Go to the `shapeSelection` parameter, click on the 3 dot menu, and click on **Edit Select Options…**
3.  Add “star” to the list and click on **Set Options**
4.  Modify the expression on the **Switcher** parameter with the additional key (the name) and value (the component) pair, like this
    
    { "circle" : ShapeA, "triangle": ShapeB, "square" : ShapeC, "star" : ShapeD, }\[shapeSelection\]