Form Component

Configuration Options
Form Configuration
Theme Options


The form component can be used to quickly gather multiple inputs from the user. It can automatically generate the required input fields based on the datasource selected.

It can also be manually configured when no datasource exists.


The form component also comes with dropzones for the header and the footer. Any component from the component library can be dropped into these zones for customizing the form component.

For example, you can drop a button component in the footer dropzone for submitting the form.


Configuration Options


Expected Type: Object | Item

The datasource powering the form. Must be a single object that contains the fields that are required as inputs from the form.

Once the datasource is entered, the component automatically tries to generate a list of inputs to the form based on the structure of the datasource. It's always better to check if the datasource field's types were generated as desired.

If no datasource is specified, the inputs to the form must be manually configured.

Form Configuration


Each component corresponds to an input to the form. The component is then available as one of the fields in the form's value.

The form component supports multiple types of inputs such as data, text, image etc. All of that can be configured here.

Creating a component

Click on + Component under the form configuration section to create a new component. Each component can be configured with the following properties:

Property Description Type Example
Label The label for the input String First Name
Key A unique identifier for this input. User entered data is stored under this key String firstName
Type The type of input to collect. Text | Rich Text | Date | Time | Image | File | Picker Text


  • Form Change: Triggers whenever the value of the form is changed.

Theme Options

  • Padding: The form's padding. (Number | Pixels)
  • Shadow: The form's shadow. (Shadow)
  • Border: The form's border. You can also specify the radius for the edges. (Border)
  • Background Color: The form's background color. (String | Hex)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →