Skip to content

FieldSwitch

type switch

Basic example

Code
javascript
{
    name: 'switchExample',
    label: 'Enable test?',
    model: 'switchModel',
    type: 'switch'
}
Value: false

Programmatic toggle

Code
javascript
{
  model: {
    switchModel: false
  },
  schema: {
    fields: [
      {
        name: 'switchExample',
        label: 'Enable test?',
        model: 'switchModel',
        type: 'switch'
      },
      {
        type: 'button',
        buttonText: 'Toggle switch',
        onClick: (model) => {
          model.switchModel = !model.switchModel
        }
      }
    ]
  }
}
Value: false

Properties

Shared properties
PropertyDefaultTypeDescription
name-stringName of the field
model-stringKey of model in the form schema model
label-stringLabel for the field
type-stringType of field, generally input if the field is an input.
inputType-stringType of input, only required when type === 'input'
idcomputedstringid of the field
visibletrueBoolean | FunctionWhether the field is visible, method will be passed the model, field and field component*
requiredfalseBoolean | FunctionWhether the field is required, method will be passed the model, field and field component*
readonlyfalseBoolean | FunctionWhether the field is read only, method will be passed the model, field and field component*
disabledfalseBoolean | FunctionWhether the field is disabled, method will be passed the model, field and field component*
hint-string | FunctionHint to display underneath the field, can be passed a method*
validatorcomputedArray<Function> | Function | undefinedA (list of) validator(s) to be validating the field against.
onValidated-Function | undefinedMethod to be called after validation has been completed.

* see determineDynamicAttribute() for more information.