Form Container Component
Form Containers expose a submit event which will populate the node's formData Prop with the contained input nodes' values; the submit event will also run the selected action therein.
Properties
Visible
| Prop | isVisible |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is visible.
Enabled
| Prop | isEnabled |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is enabled.
Tooltip
| Prop | tooltip |
|---|---|
| Type | string |
| Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
| Prop | top |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the top side of the grid (grid-row-start).
Left
| Prop | left |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the left side of the grid (grid-column-start).
Width
| Prop | width |
|---|---|
| Type | string |
| Default | 768px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Width
| Prop | minWidth |
|---|---|
| Type | string |
| Default | undefined |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
| Prop | maxWidth |
|---|---|
| Type | string |
| Default | undefined |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
| Prop | height |
|---|---|
| Type | string |
| Default | 392px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Height
| Prop | minHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
| Prop | maxHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
| Prop | overflow |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | visible |
The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.
Overflow X
| Prop | overflowX |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | visible |
The strategy used to handle overflow in the horizontal axis for content that is larger than its container.
Overflow Y
| Prop | overflowY |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | visible |
The strategy used to handle overflow in the vertical axis for content that is larger than its container.
Custom Styles
| Prop | styles |
|---|---|
| Type | string |
| Default | ::component { } |
Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.
Object Fit
| Prop | objectFit |
|---|---|
| Type | ObjectFit ('none' | 'contain' | 'cover' | 'fill' | 'scale-down') |
| Default | cover |
The strategy used to set how the content of a replaced element should be resized to fit its container.
Layout Style
| Prop | layoutStyle |
|---|---|
| Type | NodeLayoutStyle ('GRID' | 'HORIZONTAL_STACK' | 'VERTICAL_STACK') |
| Default | GRID |
The layout style used by the container to arrange its children. Can be either a horizontal or vertical stack.
Grid Columns
| Prop | gridColumns |
|---|---|
| Type | number |
| Default | 12 |
The number of columns in the container's grid system.
Grid Rows
| Prop | gridRows |
|---|---|
| Type | number |
| Default | 16 |
The number of rows in the container's grid system, expanding to fill the container.
Grid Row Height
| Prop | gridRowHeight |
|---|---|
| Type | string |
| Default | 0 |
The height of each row within the container's grid system, in pixels.
Row Gap
| Prop | gridRowGap |
|---|---|
| Type | string |
| Default | 4px |
The space between each row within the container's grid system, in pixels.
Column Gap
| Prop | gridColumnGap |
|---|---|
| Type | string |
| Default | 4px |
The space between each column within the container's grid system, in pixels.
Padding
| Prop | padding |
|---|---|
| Type | string |
| Default | 16px |
The internal padding of the container to place around its children.
Spacing
| Prop | spacing |
|---|---|
| Type | string |
| Default | 16px |
The spacing to use between child nodes of the container.
Background Color
| Prop | backgroundColor |
|---|---|
| Type | string |
| Default | background.base |
The background color of the container.
Box Shadow
| Prop | boxShadow |
|---|---|
| Type | string |
| Default | md |
The box shadow of the container. Supports standard box-shadow values or tokens defined in the theme.
Border Radius
| Prop | borderRadius |
|---|---|
| Type | string |
| Default | 4px |
The radius of the rounding of the corners of the container. Set to 0 to have no rounded corners.
Distribute Content
| Prop | distributeContent |
|---|---|
| Type | NodeLayoutDistributeStyle ('start' | 'center' | 'end' | 'around' | 'between' | 'even') |
| Default | start |
The distribution of the children nodes within the container. Corresponds to the justify-content CSS Flexbox property.
Align Content
| Prop | alignContent |
|---|---|
| Type | NodeLayoutAlignStyle ('start' | 'center' | 'end') |
| Default | start |
The alignment of the children nodes within the container. Corresponds to the align-items CSS Flexbox property.
Wrap Content
| Prop | wrapContent |
|---|---|
| Type | NodeLayoutWrapStyle ('wrap' | 'nowrap' | 'wrap-reverse') |
| Default | nowrap |
How the children nodes wrap within the container. Corresponds to the flex-wrap CSS Flexbox property.
Form Data
| Prop | formData |
|---|---|
| Type | unknown |
| Default | undefined |
Stores the values from form inputs contained within the node when the user submits the form.
Event Handlers
On Mount
| Handler | formNode.onMount |
|---|
Called when this node is mounted. Use this event to trigger downstream actions when this node first appears.
On Unmount
| Handler | formNode.onUnmount |
|---|
Called when this node is unmounted. Use this event to trigger downstream actions when this node is removed.
On Hover
| Handler | formNode.onHover |
|---|
Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.
On Leave
| Handler | formNode.onLeave |
|---|
Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.
On Focus
| Handler | formNode.onFocus |
|---|
Called when the user focuses the node. Use this event to trigger downstream actions when this node is focused.
On Blur
| Handler | formNode.onBlur |
|---|
Called when the user blurs the node. Use this event to trigger downstream actions when this node is blurred.
On Submit
| Handler | formNode.onSubmit |
|---|
Called when the user hits "Enter". Use this event to trigger downstream actions when the form is submitted.