Form 7 Radio Input Fields

val radioAsSwitchAndOpposite = new FSDemoBSForm7Renderers()(checkboxAlignment = summon[CheckboxAlignment.Value], checkboxStyle = CheckboxStyle.Switch, checkboxSide = CheckboxSide.Opposite).radioFieldRenderer
val radioInline = new FSDemoBSForm7Renderers()(checkboxAlignment = CheckboxAlignment.Horizontal, checkboxStyle = summon[CheckboxStyle.Value], checkboxSide = summon[CheckboxSide.Value]).radioFieldRenderer

val registrationType = Seq("Teacher", "Student", "Parent")
val registrationTypeField = new F7RadioField[String](() => registrationType).label("Registration type")

val phoneType = Seq("Android", "iOS", "Other")
val phoneTypeField = new F7RadioField[String](() => phoneType)(radioAsSwitchAndOpposite).label("Phone type")

val marketingChannelsType = Seq("Android", "iOS", "Other")
val marketingChannelsTypeField = new F7RadioField[String](() => marketingChannelsType)(radioInline).label("Preferred marketing channel")

div.apply {
  new DefaultForm7() {
    override lazy val rootField: F7Field = F7VerticalField()(
      new F7HtmlField(fs_5.mb_3.border_bottom.apply("Radio input")),
      registrationTypeField,
      //
      new F7HtmlField(fs_5.mb_3.border_bottom.apply("Radio buttons as switches on the opposite side")),
      phoneTypeField,
      //
      new F7HtmlField(fs_5.mb_3.border_bottom.apply("Radio buttons inline")),
      marketingChannelsTypeField,
      new F7SubmitButtonField(implicit fsc => BSBtn().BtnPrimary.lbl("Submit").btn.d_block.w_100)
    )

    override def postSubmitForm()(implicit fsc: FSContext): Js = BSModal5.verySimple("Submitted!", "Ok") {
      modal =>
        implicit fsc =>
          <h6>Your data:</h6> ++
            <ul>
              <li>
                <b>Registration type:</b>{registrationTypeField.getInternalValue()}
              </li>
              <li>
                <b>Phone type:</b>{phoneTypeField.getInternalValue()}
              </li>
              <li>
                <b>Preferred marketing channel:</b>{marketingChannelsTypeField.getInternalValue()}
              </li>
            </ul>
    }

  }.render()
}