form

Form

from dara.components.common.form import Form

class Form(LayoutComponent)

The Form component keeps track of all interactive component states inside of it. You can also obtain these through an action via the onsubmit param or store them in a Variable with value param. The components states are stored in the format {component_id: component_value}.

Interactive components inside the form must have an id prop set. Some examples of such components are Input, Select, Textarea, Datepicker and so on. It can have any type of component inside of it, not only interactive ones.

A Form component is created like so, in this example when changing the input value would return the following object: {'MyInput' : 'some text'}

from dara.core.definitions import Variable
from dara.components.common import Form, Input, Text

form_variable = Variable({'MyInput' : 'default text'})

Form(
    Text('My first form'),
    Input(id='MyInput'),
    value=form_variable,
)

If you don't need to keep track of the components as they update, but instead only need it once user submits their results, you can use the onsubmit param:

from dara.core.definitions import Variable
from dara.components.common import Form, Datepicker, RadioGroup

onsubmit_var = Variable({})

Form(
    Datepicker(id='Datepicker'),
    RadioGroup(items=['cat', 'dog', 'parrot'], direction='horizontal', id='RadioGroup'),
    onsubmit=onsubmit_var.sync(),
)

Forms may also have pages, check FormPage component docs for more info on this.

Arguments:

• value: A Variable dictionary recording the state of the form. This dictionary must have its keys matching the ids from the form components. This can also be used to set initial values to these components.
• onsubmit: An Action that is triggered when the form is submitted
• justify: How to justify the content of the form, accepts any flexbox justifications
• align: How to align the content of the form, accepts any flexbox alignments

Attributes

• value:
• onsubmit: Optional[Action]