Section Field

This is not 'real' field which has a direct connection to the value inside the form. Section was created to make form design easier, e.g. several fields in one row, fields separated section by section and etc.

The most important learning when it comes to Section field, is that you need to remember to recreate a whole tree of nodes when it comes to the initialValue property.

Let's check the example. If our form schema will look like this

type SectionFieldStructure = {
    type: 'section';
    fields: Array<Record<string, AllFieldsType>>;
    sectionProperties?: JSX.IntrinsicElements['div'];
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
    fieldLabel?: (name: string) => ReactNode;
}

const selectOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    mySection: {
        type: 'section',
        fields: [
            {
                name: {
                    type: 'text'
                }
            },
            {
                favFood: {
                    type: 'select',
                    placeholder: 'Select favourite food',
                    fieldWrapperProperties: { className: 'mb-2' },
                    optionsList: selectOptions
                }
            }
        ]
    }
}
const initialValue = {
    mySection: {
        name: 'My name',
        favFood: 'pizza'
    }
}

We need to remember that name and favFood fields are children of mySection therefor we need to replicate the whole structure in initialValue and the same structure will be generated during submit action.

Let's' make the same example with nice styling

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const foods = () => [ { label: 'Pizza', value: 'pizza' }, { label: 'Burger', value: 'burger' }, { label: 'Taco', value: 'taco' }, ] const cities = () => [ { label: 'Paris', value: 'paris' }, { label: 'Oslo', value: 'oslo' }, { label: 'Barcelona', value: 'barcelona' }, ] const schema: FormSchema = { mySection: { type: 'section', fieldWrapperProperties: { className: 'grid grid-cols-2 gap-2', }, fields: [ { name: { type: 'text' } }, { favFood: { type: 'select', placeholder: 'Select favourite food', fieldWrapperProperties: { className: 'mb-2' }, optionsList: foods } } ] }, anotherSection: { type: 'section', fieldWrapperProperties: { className: 'grid grid-cols-2 gap-2', }, fields: [ { birthday: { type: 'datepicker', closeOnSelect: true, } }, { places: { type: 'checkbox', optionsList: cities } } ] } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const foods = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const cities = () => [
    { label: 'Paris', value: 'paris' },
    { label: 'Oslo', value: 'oslo' },
    { label: 'Barcelona', value: 'barcelona' },
]
const schema: FormSchema = {
    mySection: {
        type: 'section',
        fieldWrapperProperties: {
            className: 'grid grid-cols-2 gap-2',
        },
        fields: [
            {
                name: {
                    type: 'text'
                }
            },
            {
                favFood: {
                    type: 'select',
                    placeholder: 'Select favourite food',
                    fieldWrapperProperties: { className: 'mb-2' },
                    optionsList: foods
                }
            }
        ]
    },
    anotherSection: {
        type: 'section',
        fieldWrapperProperties: {
            className: 'grid grid-cols-2 gap-2',
        },
        fields: [
            {
                birthday: {
                    type: 'datepicker',
                    closeOnSelect: true,
                }
            },
            {
                places: {
                    type: 'checkbox',
                    optionsList: cities
                }
            }
        ]
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result