Toggle Element

An element used to render a vue-js-toggle-button.

Examples
Options
Properties

#Examples

Basic Usage

Renders a toggle with text next to it.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        toggle: {
          type: 'toggle',
          text: 'Remember me'
        }
      }
    })
  }
</script>

With labels

Renders labels for the toggle using labels option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        toggle: {
          type: 'toggle',
          labels: {
            checked: 'On',
            unchecked: 'Off',
          }
        }
      }
    })
  }
</script>

Faster, Bigger With Different Color

Renders a bigger toggle in green, which animates faster.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        toggle: {
          type: 'toggle',
          dimensions: {
            width: 70,
            height: 32
          },
          colors: {
            background: '#1edc1e',
            handle: 'white'
          },
          speed: 150
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
text	`string`	Text to appear next to the toggle.
labels	`object`	Labels to be displayed for the toggle. If `false` no labels are displayed. Example: `{checked: 'Foo', unchecked: 'Bar'}`
speed	`number`	The speed of toggle animation in milliseconds.
dimensions	`object`	Dimensions of the toggle input. Example: `{ width: 50, height: 22 }`
colors	`object`	Colors of the toggle input. If not specified toggle input colors will be based on CSS. Example: `{ background: '#777777', handle: '#FFFFFF' }`
default	`boolean`	Value of element when the form is initially loaded or reseted.
disabled	`boolean`	Whether the field is disabled.

#Properties

Name	Type	Default	Description
disabled	`boolean`	`false`	Whether the field is disabled.
text	`string`	`null`	Text to appear next to the toggle.
trueValue	`str\|num\|bool`	`true`	Value of the element if toggle is on.
falseValue	`str\|num\|bool`	`false`	Value of the element if toggle is off.
labels	`object`	`false`	Labels to be displayed for the toggle. If `false` no labels are displayed.
speed	`number`	`300`	The speed of toggle animation in milliseconds.
dimensions	`object`	`{...}`	Dimensions of the toggle input. Default: `{ width: 50, height: 22 }`
colors	`object`	`{...}`	Colors of the toggle input. Default: `{ background: '#777777', handle: '#FFFFFF' }`
defaultValue	`boolean`	`false`	Value of element when the form is initially loaded or reseted.

Toggle Element

#Examples

#Options

#Properties

#Methods

# .disable()

# .enable()