VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page
  • Special properties of field
  • Usage

Was this helpful?

  1. Fields
  2. Optional Fields

switch

This is a switch/toogle input field for any values. It can toggle true/false, yes/no, on/off values.

Special properties of field

Property

Default

Accepted values

Description

textOn

none

String

Visible label if the switch state is on

textOff

none

String

Visible label if the switch state is off

valueOn

none

any primitives or Object

Value if the switch state is on

valueOff

none

any primitives or Object

Value if the switch state is off

Usage

Simple example with active/inactive labels

{
    type: "switch",
    label: "Status (switch field)",
    model: "status",
    textOn: "Active",
    textOff: "Inactive"
}

Example with male/female model values

{
    type: "switch",
    label: "Sex",
    model: "sex",
    textOn: "Female",
    textOff: "Male",
    valueOn: "female",
    valueOff: "male"
}
PreviousstaticMapNextvueMultiSelect

Last updated 6 years ago

Was this helpful?