# Toggle

[TwebBlockToggleControl](https://github.com/tigriweb/components/blob/master/attributes/TwebBlockToggleControl.js)

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FjZA0EUpDvy6WPyRK0SI7%2Ftoggle-on.jpg?alt=media&#x26;token=ac843128-e699-40c1-8623-72aab66a1ca7" alt=""><figcaption></figcaption></figure></div>

<div align="left" data-full-width="false"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FUvaoG9FFOuj9kAWDzcdH%2Ftoggle-off.jpg?alt=media&#x26;token=6632ae5a-f24a-472e-ba39-dfd69ccf60ef" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>{ label, help, name*, onChange, attributes*, setAttributes* }</summary>

```jsx
/**
 * @param {string} [label] - Component label.
 * @param {string} [help] - Component description.
 * @param {string} name - Attribute name.
 * @param {function} [onChange] - Callback called when the value changes.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */
```

</details>

{% code title="block.json" overflow="wrap" %}

```json
"testToggle": {
	"type": "boolean",
	"default": true
}
```

{% endcode %}

{% code title="index.js" overflow="wrap" %}

```jsx
import {
	TwebBlockToggleControl,
} from '@tigriweb/components/attributes';
```

{% endcode %}

{% tabs %}
{% tab title="Array" %}
{% code title="index.js | edit()" %}

```jsx
<TwebBlockToggleControl
	label={ [
		__('Toggle Title On', 'your-theme-name'),
		__('Toggle Title Off', 'your-theme-name'),
	] }
	help={ [
		__('Toggle Description On', 'your-theme-name'),
		__('Toggle Description Off', 'your-theme-name'),
	] }
	name="testToggle"
	{ ...{ attributes, setAttributes } }
/>
```

{% endcode %}
{% endtab %}

{% tab title="String" %}
{% code title="index.js | edit()" %}

```jsx
<TwebBlockToggleControl
	label={ __('Toggle Label', 'your-theme-name') }
	help={ __('Toggle Description', 'your-theme-name') }
	name="testToggle"
	{ ...{ attributes, setAttributes } }
/>
```

{% endcode %}
{% endtab %}
{% endtabs %}
