# Toggle

Yes/no or on/off toggle

****

- Read more: <https://getkirby.com/docs/guide/blueprints/fields>
- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/fields/toggle.php>

****

The toggle field is perfect for simple on/off or yes/no states.

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=1416&amp;height=328&amp;enlarge=0"><img alt="" class="rounded" height="214" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=924&amp;height=214&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=462&amp;height=107&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=690&amp;height=160&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=924&amp;height=214&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=1380&amp;height=320&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/toggle/4d8e835a2e-1717846665/toggle.png?width=1416&amp;height=328&amp;enlarge=0 1848w" width="924"></a></figure>

## Example

```yaml
fields:
  toggle:
    label: Include in menu?
    type: toggle
    text:
      - "no"
      - "yes"
```

## Field properties



<div class="table">
	<table class="parameters">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Default</th>

								<th>Description</th>
							</tr>
		</thead>
		<tbody>
						<tr>
				<td>
					after				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional text that will be shown after the input</td>
							</tr>
						<tr>
				<td>
					autofocus				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Sets the focus on this field when the form loads. Only the first field with this label gets</td>
							</tr>
						<tr>
				<td>
					before				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional text that will be shown before the input</td>
							</tr>
						<tr>
				<td>
					default				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Default value which will be saved when a new page/user/file is created</td>
							</tr>
						<tr>
				<td>
					disabled				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field is no longer editable and will not be saved</td>
							</tr>
						<tr>
				<td>
					help				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional help text below the field</td>
							</tr>
						<tr>
				<td>
					icon				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional icon that will be shown at the end of the field</td>
							</tr>
						<tr>
				<td>
					label				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The field label can be set as string or associative array with translations</td>
							</tr>
						<tr>
				<td>
					required				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field has to be filled in correctly to be saved.</td>
							</tr>
						<tr>
				<td>
					text				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Sets the text next to the toggle. The text can be a string or an array of two options. The first one is the negative text and the second one the positive. The text will automatically switch when the toggle is triggered.</td>
							</tr>
						<tr>
				<td>
					translate				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>If <code class="type type-bool">false</code>, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.</td>
							</tr>
						<tr>
				<td>
					when				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Conditions when the field will be shown (since 3.1.0)</td>
							</tr>
						<tr>
				<td>
					width				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'1/1'</code>
									</td>

								<td>The width of the field in the field grid, e.g. <code class="type">1/1</code>, <code class="type">1/2</code>, <code class="type">1/3</code>, <code class="type">1/4</code>, <code class="type">2/3</code>, <code class="type">3/4</code></td>
							</tr>
					</tbody>
	</table>
</div>

## Simple toggle field translated

```yaml
fields:
  toggle:
    label: Toggle
    type: toggle
    text:
        en: Include in menu?
        de: Im Menü anzeigen?
```

## Toggle text

```yaml
fields:
  toggle:
    label: Toggle
    type: toggle
    text:
        - Nope
        - Yay
```

<info>
Note: The values `No` and `Yes` will not work out of the box as the YAML parser will interpret them as booleans. You need to quote them as `"No"` and `"Yes"`.
</info>

### Translated text

```yaml
fields:
  toggle:
    label: Toggle
    type: toggle
    text:
        -
            en: Nope
            de: Och nö
        -
            en: Yay
            de: Juhu

```

The field content will either be 'true' or 'false'.

### Text from query

```yaml
fields:
  toggle:
    label: Toggle
    type: toggle
    text: "{{ page.toggleText }}"

```

## How to use in templates/snippet

Convert to a proper boolean:

```php
$bool = $page->toggle()->toBool();
```

Do something depending on field value:

```php
<?php
if ($page->toggle()->toBool() === true) {
  // do this
} else {
  // do that
}
```