---
title: "Toggler"
language: "en"
type: "Symbol"
summary: "Toggler[x] represents a toggler button with setting x, that toggles between True and False. Toggler[Dynamic[x]] takes the setting to be the dynamically updated current value of x, with the value of x being toggled if the button is clicked. Toggler[x, {val1, val2, ...}] represents a toggler button that cycles through any sequence of values vali. Toggler[x, {val1 -> pict1, val2 -> pict2, ...}] cycles through values vali displaying them as picti. Toggler[x, vlist, dpict] displays as dpict if x is none of the vali."
keywords: 
- toggler
- flipping state
- round robin state
- mode switching
canonical_url: "https://reference.wolfram.com/language/ref/Toggler.html"
source: "Wolfram Language Documentation"
related_guides: 
  - 
    title: "Control Objects"
    link: "https://reference.wolfram.com/language/guide/ControlObjects.en.md"
related_functions: 
  - 
    title: "Checkbox"
    link: "https://reference.wolfram.com/language/ref/Checkbox.en.md"
  - 
    title: "Opener"
    link: "https://reference.wolfram.com/language/ref/Opener.en.md"
  - 
    title: "TogglerBar"
    link: "https://reference.wolfram.com/language/ref/TogglerBar.en.md"
  - 
    title: "Setter"
    link: "https://reference.wolfram.com/language/ref/Setter.en.md"
  - 
    title: "Panel"
    link: "https://reference.wolfram.com/language/ref/Panel.en.md"
  - 
    title: "PaneSelector"
    link: "https://reference.wolfram.com/language/ref/PaneSelector.en.md"
  - 
    title: "FlipView"
    link: "https://reference.wolfram.com/language/ref/FlipView.en.md"
  - 
    title: "SlideView"
    link: "https://reference.wolfram.com/language/ref/SlideView.en.md"
  - 
    title: "PopupMenu"
    link: "https://reference.wolfram.com/language/ref/PopupMenu.en.md"
related_tutorials: 
  - 
    title: "Introduction to Dynamic"
    link: "https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md"
  - 
    title: "Introduction to Control Objects"
    link: "https://reference.wolfram.com/language/tutorial/IntroductionToControlObjects.en.md"
  - 
    title: "Generalized Input"
    link: "https://reference.wolfram.com/language/tutorial/GeneralizedInput.en.md"
  - 
    title: "Views"
    link: "https://reference.wolfram.com/language/tutorial/Views.en.md"
---
# Toggler

Toggler[x] represents a toggler button with setting x, that toggles between True and False. 

Toggler[Dynamic[x]] takes the setting to be the dynamically updated current value of x, with the value of x being toggled if the button is clicked. 

Toggler[x, {val1, val2, …}] represents a toggler button that cycles through any sequence of values vali. 

Toggler[x, {val1 -> pict1, val2 -> pict2, …}] cycles through values vali displaying them as picti. 

Toggler[x, vlist, dpict] displays as dpict if x is none of the vali.

## Details and Options

* ``Checkbox`` and ``Opener`` are effectively special cases of ``Toggler``. »

* ``Toggler[x]`` by default displays as ``x``.

* Clicking anywhere inside a ``Toggler`` advances to the next value.

* Shift-clicking goes to the previous value.

* The ``dpict`` case cannot be reached by clicking, only by externally setting ``x``. »

* The ``vali`` and ``picti`` in ``Toggler`` can be strings, boxes, graphics or any other expressions, including dynamic expressions. »

* The following options can be given:

|                   |           |                                                                        |
| :---------------- | :-------- | :--------------------------------------------------------------------- |
| AutoAction        | False     | whether to change the toggler automatically when the mouse is over it  |
| BaselinePosition  | Automatic | alignment relative to surrounding text                                 |
| BaseStyle         | {}        | base style specifications for the displayed toggler                    |
| ContentPadding    | True      | whether to shrink the margins tightly around the contents              |
| Enabled           | Automatic | whether the toggler is enabled or grayed out                           |
| ImageMargins      | 0         | margins around the image of the displayed toggler                      |
| ImageSize         | All       | the overall image size of the displayed toggler                        |

* Controls such as ``Button`` and ``Slider`` are not clickable inside ``Toggler``.

* ``EventHandler`` intercepts mouse clicks, but passes them through to ``Toggler`` if the setting ``PassEventsDown -> True`` is given.

* The settings for ``BaseStyle`` are appended to the default style typically given by the ``"Toggler"`` style in the current stylesheet.

---

## Examples (17)

### Basic Examples (2)

Click the output to toggle its value:

```wl
In[1]:= Toggler[1, {1, 2, 3, 4}]

Out[1]= Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3", 4 -> "4"}, "1"]
```

---

Dynamically change the value of $x$ :

```wl
In[1]:= {Toggler[Dynamic[x], {1, 2, 3, 4}], Dynamic[x]}

Out[1]=
{Toggler[Dynamic[x], {1 -> "1", 2 -> "2", 3 -> "3", 4 -> "4"}, 
 DynamicBox[ToBoxes[x, StandardForm], 
  ImageSizeCache -> {7.2, {0., 7.656000000000001}}]], Dynamic[x]}
```

### Scope (3)

Include labels:

```wl
In[1]:= Toggler[3, {1 -> "One", 2 -> "Two", 3 -> "Three"}]

Out[1]= Toggler[2, {1 -> "\"One\"", 2 -> "\"Two\"", 3 -> "\"Three\""}, "3"]
```

---

Display the last element (``\[WarningSign]``) since the setting is not in the list of values:

```wl
In[1]:= Toggler[0, {1, 2}, Style[\[WarningSign], 30]]

Out[1]= Toggler[0, {1 -> "1", 2 -> "2"}, StyleBox["\[WarningSign]", StripOnInput -> False, FontSize -> 30]]
```

Sometimes the setting is affected by external actions; in this display, ``"N/A"`` :

```wl
In[2]:= {Button["x=a", x = a], Toggler[Dynamic[x], {1, 2, 3}, "N/A"]}

Out[2]= {"x=a", Toggler[Dynamic[x], {1 -> "1", 2 -> "2", 3 -> "3"}, "\"N/A\""]}
```

---

Use any type of expression as values:

```wl
In[1]:=
g = Plot[Sin[x], {x, 0, 2π}, Axes -> False, ImageSize -> 40];
f = Sqrt[y]Tan[α y - β];
s = "αβγ";

In[2]:= {Toggler[Dynamic[x], {g, f, s}, Alignment -> Center], Dynamic[x]}

Out[2]=
{Toggler[Dynamic[x], 
 {Graphics[{{{}, {}, {Hue[0.67, 0.6, 0.6], Line[{{1.2822827157509358*^-7, 1.2822827157509324*^-7}, 
         {0.0019271655319089223, 0.001927164339004283}, {0.0038542028355462695, 
          0.00385419329326691}, {0.0077082774 ...  ", RowBox[{"Tan", "[", RowBox[{RowBox[{"y", " ", "α"}], "-", "β"}], 
       "]"}]}], "αβγ" -> "\"αβγ\""}, DynamicBox[ToBoxes[x, StandardForm], 
  ImageSizeCache -> {40., {9.715171962497894, 15.006187587497894}}], Alignment -> Center], Dynamic[x]}
```

### Options (10)

#### Alignment (1)

Align labels in the toggler:

```wl
In[1]:= Table[Toggler[1, {1, 2, 3}, Background -> Pink, ImageSize -> {30, 30}, Alignment -> a], {a, {Left, Right, Center, Bottom, Top}}]

Out[1]=
{Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Alignment -> Left, 
 Background -> RGBColor[1, 0.5, 0.5], ImageSize -> {30, 30}], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Alignment -> Right, 
 Background -> RGBColor[1, 0.5, 0.5], ImageSize  ...  -> "1", 2 -> "2", 3 -> "3"}, "1", Alignment -> Bottom, 
 Background -> RGBColor[1, 0.5, 0.5], ImageSize -> {30, 30}], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Alignment -> Top, 
 Background -> RGBColor[1, 0.5, 0.5], ImageSize -> {30, 30}]}
```

All possible alignment positions:

```wl
In[2]:= Table[Toggler[Dynamic[x], {1, 2, 3}, Background -> Pink, ImageSize -> {30, 30}, Alignment -> {j, i}], {i, {Top, Center, Bottom}}, {j, {Left, Center, Right}}]//Grid

Out[2]=
|     |     |     |
| --- | --- | --- |
| Toggler[Dynamic[x], {1 -> "1", 2 -> "2", 3 -> "3"},   DynamicBox[ToBoxes[x, StandardForm],    Imag ... , 7.8}}], Alignment -> {Left, Top},   Background -> RGBColor[1, 0.5, 0.5], ImageSize -> {30, 30}] | Tog ... Color[1, 0.5, 0.5], ImageSize -> {30, 30}] | Toggler[Dynamic[x], {1 -> "1", 2 -> "2", 3 -> "3"},   DynamicBox[ToBoxes[x, StandardForm],    Imag ... 8}}], Alignment -> {Right, Bottom},   Background -> RGBColor[1, 0.5, 0.5], ImageSize -> {30, 30}] |
```

#### AutoAction (2)

By default, clicking the output toggles its value:

```wl
In[1]:= Toggler[1, {1, 2, 3}]

Out[1]= Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1"]
```

---

By setting ``AutoAction -> True``, the value toggles when the mouse moves over the output:

```wl
In[1]:= Toggler[1, {1, 2, 3}, AutoAction -> True]

Out[1]= Toggler[3, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", AutoAction -> True]
```

#### Background (1)

Specify the background color:

```wl
In[1]:= Table[Toggler[1, {1, 2, 3}, Background -> c], {c, {Pink, Purple, Gray, Yellow}}]

Out[1]= {Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 0.5, 0.5]], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[0.5, 0, 0.5]], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> GrayLevel[0.5]], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 1, 0]]}
```

#### BaselinePosition (1)

Align with surrounding text:

```wl
In[1]:= Row[Table[Toggler[1, {1, 2, 3}, BaselinePosition -> c], {c, {Bottom, Center, Top}}], "xxx"]

Out[1]=
Row[{Toggler[1, {1, 2, 3}, BaselinePosition -> Bottom], 
  Toggler[1, {1, 2, 3}, BaselinePosition -> Center], Toggler[1, {1, 2, 3}, 
   BaselinePosition -> Top]}, "xxx"]
```

#### Enabled (2)

By default ``Toggler`` is enabled:

```wl
In[1]:= Toggler[1, {1, 2, 3}]

Out[1]= Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1"]
```

---

By setting ``Enabled -> False``, the toggler is disabled but visible in its current state:

```wl
In[1]:= Toggler[2, {1, 2, 3}, Enabled -> False]

Out[1]= Toggler[2, {1 -> "1", 2 -> "2", 3 -> "3"}, "2", Enabled -> False]
```

#### FrameMargins (1)

Increase the clickable area:

```wl
In[1]:= Table[Toggler[1, {1, 2, 3}, Background -> Yellow, FrameMargins -> m], {m, {0, 10, 20}}]

Out[1]= {Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 1, 0], FrameMargins -> 0], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 1, 0], FrameMargins -> 10], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 1, 0], FrameMargins -> 20]}
```

#### ImageMargins (1)

Add margins to the toggler image:

```wl
In[1]:= Table[Framed@Toggler[1, {1, 2, 3}, ImageMargins -> m], {m, {0, 10, 20}}]

Out[1]= {Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", ImageMargins -> 0], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", ImageMargins -> 10], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", ImageMargins -> 20]}
```

#### ImageSize (1)

Use numeric values:

```wl
In[1]:= Table[Toggler[1, {1, 2, 3}, Background -> Pink, ImageSize -> {s, s}], {s, {10, 40, 100}}]

Out[1]=
{Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 0.5, 0.5], 
 ImageSize -> {10, 10}], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 0.5, 0.5], 
 ImageSize -> {40, 40}], Toggler[1, {1 -> "1", 2 -> "2", 3 -> "3"}, "1", Background -> RGBColor[1, 0.5, 0.5], 
 ImageSize -> {100, 100}]}
```

### Applications (1)

Use ``Toggler`` to create a tic-tac-toe board, where every cell knows the game logic:

```wl
In[1]:= Column[{Row[{"Player ", Toggler[Dynamic[player], {"X", "O"}, Enabled -> False]}], Grid[Table[Module[{x = " "}, Dynamic[Toggler[Dynamic[x, (x = #;player = player /. {"X" -> "O", "O" -> "X"};)&], {" ", player}, Enabled -> (Dynamic[x == " "]), ImageSize -> {15, 15}, Alignment -> {Center, Center}]]], {3}, {3}], Frame -> All]}]

Out[1]=
Row[{"Player ", Toggler[Dynamic[player], {"X", "O"}, Enabled -> False]}]
|     |     |     |
| --- | --- | --- |
| Dynamic[Toggler[Dynamic[x$354,     (x$354 = #1; player = player /.         {"X" -> "O", "O" -> "X" ... },    Enabled -> Dynamic[x$354 ... 5, 15},    Alignment -> {Center, Center}]] | Dynamic[Toggler[Dynamic[x$362,     (x$362 = #1; player = player /.         {"X" -> "O", "O" -> "X" ... },    Enabled -> Dynamic[x$362 == " "], ImageSize -> {15, 15},    Alignment -> {Center, Center}]] |
```

### Properties & Relations (1)

``Checkbox`` and ``Opener`` are special cases of ``Toggler`` :

```wl
In[1]:= {Toggler[Dynamic[x], {False, True}], Dynamic[x]}

Out[1]=
{Toggler[Dynamic[x], {False -> "False", True -> "True"}, 
 DynamicBox[ToBoxes[x, StandardForm], 
  ImageSizeCache -> {7.2, {0.14400000000000002, 7.8}}]], Dynamic[x]}

In[2]:= {Checkbox[Dynamic[y]], Dynamic[y]}

Out[2]= {[-], Dynamic[y]}

In[3]:= {Opener[Dynamic[z]], Dynamic[z]}

Out[3]= {Opener[Dynamic[z]], Dynamic[z]}
```

## See Also

* [`Checkbox`](https://reference.wolfram.com/language/ref/Checkbox.en.md)
* [`Opener`](https://reference.wolfram.com/language/ref/Opener.en.md)
* [`TogglerBar`](https://reference.wolfram.com/language/ref/TogglerBar.en.md)
* [`Setter`](https://reference.wolfram.com/language/ref/Setter.en.md)
* [`Panel`](https://reference.wolfram.com/language/ref/Panel.en.md)
* [`PaneSelector`](https://reference.wolfram.com/language/ref/PaneSelector.en.md)
* [`FlipView`](https://reference.wolfram.com/language/ref/FlipView.en.md)
* [`SlideView`](https://reference.wolfram.com/language/ref/SlideView.en.md)
* [`PopupMenu`](https://reference.wolfram.com/language/ref/PopupMenu.en.md)

## Tech Notes

* [Introduction to Dynamic](https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md)
* [Introduction to Control Objects](https://reference.wolfram.com/language/tutorial/IntroductionToControlObjects.en.md)
* [Generalized Input](https://reference.wolfram.com/language/tutorial/GeneralizedInput.en.md)
* [Views](https://reference.wolfram.com/language/tutorial/Views.en.md)

## Related Guides

* [Control Objects](https://reference.wolfram.com/language/guide/ControlObjects.en.md)

## History

* [Introduced in 2007 (6.0)](https://reference.wolfram.com/language/guide/SummaryOfNewFeaturesIn60.en.md)