Developer Community

I have a Form Layout component that displays some fields on my page. When I click a checkbox, I want additional fields to be added, where it is triggered by a state change. When using the Form Layout component, styling is applied properly according to the Form Layout parameters, however, when using the Core Form Layout, the styling is not applied.

Before activating the checkbox:

After activating:

As you can see, the styling works properly when using the base Form Layout and adding new fields, but not the core version.

Source code:

import { h } from "preact";
import 'oj-c/checkbox';
import 'oj-c/input-text';
import 'ojs/ojformlayout';
import 'oj-c/form-layout';
import { useState } from 'preact/hooks';


let checkboxN = {
fields: [{"label": "Field 1"},{"label": "Field 2"},{"label": "Field 3"}]
}

let checkboxY = {
fields: [{"label": "Field 1"},{"label": "Field 2"},{"label": "Field 3"},{"label": "Field 4"},{"label": "Field 5"}]
}


let Field = (props: any) => {
return (
<oj-c-input-text
label-hint={props.label}></oj-c-input-text>
)
}

export function Content() {
const [isChecked, setIsChecked] = useState(false);

const fieldsToDisplay = isChecked ? checkboxY.fields : checkboxN.fields;

return (
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Form Layout</h1>
<oj-form-layout
direction='column'
columns={1}
user-assistance-density="efficient">
<oj-c-checkbox
onvalueChanged={(event: any) => {
setIsChecked(event.detail.value === true);
}}>Show Addl Fields?</oj-c-checkbox>
{
fieldsToDisplay.map((field: any) => {
return <Field label={field.label} key={field.label} />
})
}
</oj-form-layout>
<h1>Core Form Layout</h1>
<oj-c-form-layout
direction='column'
columns={1}
user-assistance-density="efficient">
{
fieldsToDisplay.map((field: any) => {
return <Field label={field.label} key={field.label} />
})
}
</oj-c-form-layout>
</div>
);
}