Bixby Developer Center

A control component that is used in a form, which enables a switch for user to toggle on or off to indicate a choice.

If there multiple objects that users can select, it is stylistically recommended to use a checkbox instead of a switch.

Examples

Here is a structure, which has a property isSigningUp that can be populated with a switch-input element in a form:

structure (Survey) {
  property (fullName) {
    type (FullName)
    min (Required) max (One)
  }
  property (email) {
    type(Email)
    min (Required) max(One)
  }
  property (comments) {
    type (Comments)
    min (Optional) max (One)
  }
  property (isSigningUp) {
    type (IsSigningUp)
    min (Required) max (One)
  }
  property (favoriteColors) {
    type (FavoriteColors)
    min (Required) max (One)
  }
  property (funMeter) {
    type (FunMeter)
    min (Required) max (One)
  }
  property (age) {
    type (Age)
    min (Required) max (One)
  }
}

View master on GitHub

For the input view of a switch-input:

input-view {
  match {
    IsSigningUp (isSigningUp) { 
      to-input: SubmitSurvey
    }
  }

  message {
    template ("Sign up for the mailing list?")
  }

  render {
    form {
      elements {
        switch-input {
          id (isSigningUp)
          type (IsSigningUp)
          primary-text("Mailing List")
          secondary-text("Receive monthly updates from our company")
          value("{raw(survey.isSigningUp)}")
        }
      }
      on-submit {
        goal: IsSigningUp
        value: viv.core.FormElement(isSigningUp)
      }
    }
  }
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.