# How to use a Quasar form in StippleUI?

**URL:** <https://discourse.julialang.org/t/how-to-use-a-quasar-form-in-stippleui/62930>\
**Category:** Web Stack\
**Tags:** question, genie\
**Created:** [June 15, 2021, 7:54am UTC](https://discourse.julialang.org/t/how-to-use-a-quasar-form-in-stippleui/62930 "2021-06-15T07:54:10Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [June 17, 2021, 7:31pm UTC](https://discourse.julialang.org/t/how-to-use-a-quasar-form-in-stippleui/62930/2 "2021-06-17T19:31:03Z")

</div>

with the latest versions of Stipple and StippleUI we can now do

```julia
using Stipple, StippleUI

const NO = StippleUI.NO_WRAPPER

Stipple.@kwdef mutable struct Example <: ReactiveModel
    name::R{String} = ""
    age::R{Int} = 0
end

model = Stipple.init(Example())

myform() = xelem(:div, class="q-pa-md", style="max-width: 400px", [
    StippleUI.form([
        textfield("Your name *", :client_name,
            :filled,
            hint="Name and surname",
            "lazy-rules",
            rules = "[val => val && val.length > 0 || 'Please type something']"
        ),
        numberfield("Your age *", :client_age,
            :filled,
            :lazy__rules,
            rules="""[
                val => val !== null && val !== '' || 'Please type your age',
                val => val > 0 && val < 100 || 'Please type a real age'
            ]"""
        ),
        toggle("I accept the license and terms", :accept, wrap=NO),
        Stipple.Html.div([
            btn("Submit", type="submit", color="primary", wrap=NO)
            btn("Reset", type="reset", color="primary", :flat, class="q-ml-sm", wrap=NO)
        ])
    ], @on(:submit, "onSubmit"), @on(:reset, "onReset"), class="q-gutter-md", wrap=NO)
])

import Stipple.js_methods
js_methods(m::Example) = raw"""
    onSubmit () {
      if (this.accept !== true) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning',
          message: 'You need to accept the license and terms first'
        })
      }
      else {
        this.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        });
        this.name = this.client_name;
        this.age = this.client_age;
      }
    },

    onReset () {
      this.client_name = null
      this.client_age = null
      this.accept = false
    }
  """

import Stipple.client_data
client_data(m::Example) = client_data(client_name = js"null", client_age = js"null", accept = false)

function ui()
    page(vm(model), class="container", title="Hello Stipple", 
        myform()
    )
end

route("/", ui)
up(open_browser=true)

```

---

_[View the full topic](https://discourse.julialang.org/t/how-to-use-a-quasar-form-in-stippleui/62930)._