# Toggle

The Toggle Field is a boolean toggle. You can set its value for content that needs a true and or false state.

{% code title="Toggle Field" %}

```json
{
  component: 'toggle',
  name: 'toggleName',
  label: 'Toggle Field',
  description: 'A toggle field',
  toggleLabels: {
    true: 'Enable',
    false: 'Disable',
  },
  defaultValue: true,
}
```

{% endcode %}

<table data-header-hidden><thead><tr><th>Key</th><th width="150"></th><th width="150"></th><th>Description</th></tr></thead><tbody><tr><td><strong>Key</strong></td><td><strong>Type</strong></td><td><strong>Required</strong></td><td><strong>Description</strong></td></tr><tr><td><code>component</code></td><td><code>string</code></td><td><code>yes</code></td><td>The name of the field component. (<code>toggle</code>)</td></tr><tr><td><code>name</code></td><td><code>string</code></td><td><code>yes</code></td><td>The name of the field that will be accessible by the <code>cms</code> prop of the component.</td></tr><tr><td><code>label</code></td><td><code>string</code></td><td><code>no</code></td><td>A human-readable label for the field.</td></tr><tr><td><code>description</code></td><td><code>string</code></td><td><code>no</code></td><td>A short description of the setting scope.</td></tr><tr><td><code>toggleLabels</code></td><td><code>string</code></td><td><code>no</code></td><td>An object that you use to label your <code>true</code> and <code>false</code> values. <br><br><code>{ true: string, false: string }</code></td></tr><tr><td><code>defaultValue</code></td><td><code>boolean</code></td><td><code>no</code></td><td>This will be either <code>true</code> or <code>false</code>.</td></tr></tbody></table>