# UI Maker Nested Fields

> Learn how to create nested fields (fields inside fields) in UI Maker.

Source: https://docs.apimaker.dev/v1/extensions/ui_maker/fields_inside_fields.html

> **UI Maker is deprecated**
>
> UI Maker is kept for the projects which use it and will be removed in API Maker v4. New admin screens are better built with any frontend framework on top of the [generated APIs](https://docs.apimaker.dev/v1/docs/apis-all/overview.html).

👉 We can use fields inside fields using below syntax.

```typescript

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [ // 👈 Array of rows
            [ // 👈 Row
                { // 👈 Column 1
                    label: 'Address',
                    control: T.EDBMasterFormControl.textarea,
                    path: 'current_address',
                    cssClassDiv: 'mt-4 col-sm-3',
                    textAreaSettings: {
                        rows: 15
                    }
                },
                { // 👈 Column 2
                    cssClassDiv: 'mt-4 col-sm-3',
                    fields: [ // 👈 Array of rows
                        [ // 👈 Row
                            { // 👈 Column 1
                                label: 'Ratings',
                                control: T.EDBMasterFormControl.rating,
                                path: 'rating_field_1',
                                cssClassDiv: 'col-sm-3 mt-4',
                            },
                        ],
                        [
                            { // 👈 Column 2
                                label: 'Ratings',
                                control: T.EDBMasterFormControl.rating,
                                path: 'rating_field_2',
                                cssClassDiv: 'col-sm-3 mt-4',
                            },
                        ]
                    ],
                },
                { // 👈 Column 3
                    cssClassDiv: 'mt-4 col-sm-6',
                    fields: [
                        [
                            {
                                label: 'Knob',
                                control: T.EDBMasterFormControl.knob,
                                path: 'knob_settings_field',
                                cssClassDiv: 'col-sm-3 mt-4',

                                knobSettings: {
                                    size: 200,
                                }
                            },
                        ]
                    ],
                },
            ]
        ],
    },
};

```

![Fields inside fields output](https://docs.apimaker.dev/v1/extensions/img/fields_inside_fields_sample_output_1.png)