Is it possible to have two forge ui components in the same line inside a form?

Forge
, , ,
1

Hello! I have a forge form component with textfield sand checkboxes. Is it possible to align a checkbox and a textfield onto the same line instead of having them in two lines ? Here is my code. Thanks

          <CheckboxGroup label="" name="metric2">
              <Checkbox label="Enable Metric 2" value="true" defaultChecked={false}/>
          </CheckboxGroup> 
          <FormCondition when="metric2"  is={['true']}>
              <TextField isRequired="true" label="Label" name="metric2Label" defaultValue={""}/>
          </FormCondition>

Heres how it looks like in UI now.
shot

2

Hi Andrian, if you upgrade to UI Kit 2 then you can use the Inline component to lay components out horizontally.

1 Like
3

@AdamMoore Thank you for pointing that out. I tried to use this with forge/ui and kept getting this error. I assume I will have to move all of other code to use ui-kit 2 as well right. Thanks

Trace ID: 6fb88dd432c54c93a3815088d1eb7b8a
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Form:
	in ModalDialog
	in AdminPage
	in App

Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Form:
	in ModalDialog
	in AdminPage
	in App
    at /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3807:11
    at asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3742:29
    at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3742:29
    at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3742:29
    at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3804:23
    at async /tmp/tunnel-7-07YGs3FqaRcg/admin-page.js:3131:31