Form
Last updated:2026-02-03 15:40:06
Component Feature
Form is a form container component used to encapsulate form controls and address submission events.
It inherits the layout capability of the Box component and supports defining form submission actions.
Basic Usage
Use direction to control the arrangement of child components, children to define controls in the form, and gap to set the spacing between child elements.
The following example shows a user login form, including username and password input boxes, and a submit button.
Template example:
<Formdirection="col"gap="16px"onSubmitAction={{ type: "submit_form", payload: { formId: "user-form" } }}><Input name="username" placeholder="Username" /><Input name="password" inputType="password" placeholder="Password" /><Button label="Submit" submit={true} /></Form>
Effect display as follows:
Attribute Description
Form Properties
Property Name | Type | Description | Default value |
onSubmitAction | ActionConfig | Action triggered on form submission | - |
Layout Properties
Property Name | Type | Description | Default value |
direction | "row" | "col" | Layout orientation | "col" |
children | ChatKitComponent[] | Subcomponent List | - |
align | Alignment | Intersect Alignment Mode | - |
justify | Justification | Main Axis Alignment Mode | - |
wrap | "nowrap" | "wrap" | "wrap-reverse" | Line Break Method | "nowrap" |
flex | number | string | Flex value | - |
gap | number | string | child element spacing | - |
padding | number | string | Spacing | padding | - |
border | number | Border | Borders | Border Configuration | - |
background | string | ThemeColor | Background Color | - |
Dimension Properties
Property Name | Type | Description | Default value |
height | number | string | height | - |
width | number | string | width | - |
size | number | string | Set both width and height at the same time | - |
minHeight | number | string | minimum height | - |
minWidth | number | string | minimum width | - |
minSize | number | string | minimum size | - |
maxHeight | number | string | max height | - |
maxWidth | number | string | maximum width | - |
maxSize | number | string | maximum size | - |
aspectRatio | number | string | Aspect Ratio | - |
radius | RadiusValue | rounded corners | - |
margin | number | string | Spacing | margin | - |
The Form component inherits ALL layout capacity of the Box component. For detail type definition, see Box.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No
Feedback