Class: Toggle

new Toggle(options) → {Class}

A toggle component to use wherever boolean based form fields are needed.

Parameters:

Name Type Description

options

object

The options for the component.

Properties

Name	Type	Description
`customAttributes`	object	Any custom attributes for the component.
`customClasses`	Array	An array of additional classes for the component.
`disabled`	Array	Is the toggle disabled on render?
`icons`	boolean	Do we use the checkmark and x icons for this instance?
`id`	string	Id for the component, auto generated if not passed.
`initialChecked`	boolean	Is it checked on render?
`label`	string	The label, required for accessibility.
`labelPosition`	string	Position for the label, defaults to right.
`labelVisible`	boolean	Is the label visible?
`rendered`	string	Is the component already rendered in the dom, eg by php?
`renderOnInit`	string	Render the component on init of the class?
`name`	string	Name for the input.
`size`	string	Size for the component. Small (size-s), medium (size-m), or large (size-l).
`spacing`	string	Spacing for the component.
`target`	string	The target to render to. Any valid css selector string.
`targetPosition`	string	The insert position for the component relative to the target.
`theme`	string	Theme for the component, primary or cosmos.

Since: 1.1.16
Source: elements/Toggle/index.js, line 98

Returns:

The class instance.

Type:: Class

Example

import Toggle from '@gravityforms/components/html/admin/elements/Toggle';

function Example() {
     const toggleInstance = new Toggle( {
         id: 'example-toggle',
         label: 'Example Toggle',
         name: 'example-toggle',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
         theme: 'cosmos',
     } );

     // Some time later we can render it. This is only done if we set renderOnInit to false.
     // If true it will render on initialization.
     toggleInstance.init();
}

Methods

(static) init() → {void}

Initialize the component.

Since: 1.1.16
Source: elements/Toggle/index.js, line 227

Fires:

event:gform/toggle/post_render

Returns:

Type:: void

(static) render() → {void}

Renders the component into the dom.

Since: 1.1.16
Source: elements/Toggle/index.js, line 201

Returns:

Type:: void

(static) toggleTemplate(options) → {string}

Generates the markup for a toggle in the admin.

Parameters:

Name Type Description

options

object

The options for the component template.

Properties

Name	Type	Description
`customAttributes`	object	Any custom attributes.
`customClasses`	Array	An array of additional classes for the toggle.
`disabled`	boolean	If the toggle is disabled.
`icons`	boolean	Do we use the checkmark and x icons for this instance.
`iconPrefix`	string	Prefix for the icon class.
`iconBefore`	string	Icon to display when toggle is off.
`iconAfter`	string	Icon to display when toggle is on.
`id`	string	Id for the toggle, auto generated if not passed.
`initialChecked`	boolean	Is it checked on render?
`label`	string	The label, required for accessibility.
`labelPosition`	string	Position for the label, defaults to right.
`labelVisible`	boolean	Is the label visible?
`name`	string	Name for the input.
`size`	string	Size for the toggle. Small (size-s), medium (size-m), or large (size-l).
`spacing`	string \| number \| Array \| object	The spacing for the component, string, number, object or array.
`theme`	string	Theme for the toggle, primary or cosmos.
`ariaDescribedby`	string	Class of the element that describes this input.

Since: 1.1.16
Source: elements/Toggle/index.js, line 10

Returns:

Type:: string

Example

import { toggleTemplate } from '@gravityforms/components/html/admin/elements/Toggle';

function Example() {
     const toggleHTML = toggleTemplate( options );
     document.body.insertAdjacentHTML( 'beforeend', toggleHTML );
}