Form
Forms are critical for collecting user inputs and data. They can include various field types like text, numbers, dates, and dropdowns.
Forms are essential for tasks such as registrations, logins, or data entry. They usually include validation logic to ensure data accuracy and can be styled to match the application's design. Features like auto-complete, field grouping, and dynamic form controls enhance the user experience.
Examples
Various examples showcasing different configurations of the component
Property
Value
Fields
[{"label":"Name","key":"name","type":"TEXT","placeholder":"Type here...","required":true},{"label":"Email","key":"email","type":"TEXT","placeholder":"Type here...","validations":[{"operateOn":"value","operator":"EMAIL"}]},{"label":"Date","key":"date","type":"DATE","placeholder":"Type here..."},{"label":"Tags","key":"tags","type":"DROPDOWN","placeholder":"Type here..."},{"label":"Avatar","key":"avatar","type":"IMAGE","placeholder":"Type here..."},{"label":"Actions","key":"actions","type":"ACTIONS","placeholder":"Type here..."},{"label":"Toggle","key":"actions","type":"TOGGLE","placeholder":"Type here..."},{"label":"Toggle","key":"actions","type":"RADIO","placeholder":"Type here...","options":[{"label":"Option 1","value":"OPTION_1"}]}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Fields
An array of field configurations for the form.
[]
Array
Default Value
Default value for the form.
Object string
Validate on
When to validate the form.
Blur
String
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On submit
The handler executed when the form is submitted.