Field Groups

Field groups allow you to organize fields into groups which are rendered as collapsible boxes. Use field groups if you have a lot of input fields which can be organized into groups.

Setting Value(s) Value Type Mandatory
#field-groups ['key1' => ['title' => 'Title 1', 'help' => 'This is some help text.'], 'key2' => ['title' => 'Title 2', 'help' => 'This is another help text.']] Key-value pairs no
#field-group 'key1' String no

Example config.php with two field-groups:

    return [

      '#theme-name' => 'Example Theme',
      '#theme-key' => 'example-theme',
      '#theme-version' => '1.0',
      '#ideaspace-version' => '>=1.2.0',
      '#theme-description' => 'Example.',
      '#theme-author-name' => 'IdeaSpaceVR',
      '#theme-author-email' => '[email protected]',
      '#theme-homepage' => 'https://www.ideaspacevr.org/themes',
      '#theme-keywords' => 'example, simple',
      '#theme-view' => 'scene',

      '#content-types' => [

                'blog-posts' => [
                    '#label' => 'Blog Posts',
                    '#description' => 'Manage your blog posts.',
                    '#max-values' => 'infinite',

                    '#field-groups' => [
                            'north' => [
                                    'title' => 'North',
                                    'help' => 'Create content for direction North.'
                            ], 
                            'south' => [
                                    'title' => 'South',
                                    'help' => 'Create content for direction South.'
                            ]
                    ],

                    '#fields' => [

                        'post-title' => [
                            '#label' => 'Title',
                            '#description' => 'Write a text.',
                            '#help' => 'Write a text.',
                            '#type' => 'textfield',
                            '#maxlength' => 1000,
                            '#contentformat' => 'html/text',
                            '#required' => true,
                        ],

                        'post-audio' => [
                            '#label' => 'Sound',
                            '#description' => 'Add a background sound to your post.',
                            '#help' => 'Add a background sound to your post.',
                            '#type' => 'options-select',
                            '#options' => ['birds' => 'Birds', 'ocean' => 'Ocean', 'street' => 'Street'],
                            '#required' => false,
                        ],

                        'post-text-north' => [
                            '#label' => 'Text',
                            '#description' => 'Write a text.',
                            '#help' => 'Write a text.',
                            '#type' => 'textarea',
                            '#rows' => 10,
                            '#maxlength' => 20000,
                            '#contentformat' => 'html/text',
                            '#required' => false,

                            '#field-group' => 'north',
                        ],

                        'post-image-north' => [
                            '#label' => 'Image',
                            '#description' => 'Add an image.',
                            '#help' => 'Add an image.',
                            '#type' => 'image',
                            '#content-preview-image' => true,
                            '#file-extension' => ['jpg', 'png', 'gif'],
                            '#required' => false,

                            '#field-group' => 'north',
                        ],

                        'post-text-south' => [
                            '#label' => 'Text',
                            '#description' => 'Write a text.',
                            '#help' => 'Write a text.',
                            '#type' => 'textarea',
                            '#rows' => 10,
                            '#maxlength' => 20000,
                            '#contentformat' => 'html/text',
                            '#required' => false,

                            '#field-group' => 'south',
                        ],

                        'post-image-south' => [
                            '#label' => 'Image',
                            '#description' => 'Add an image.',
                            '#help' => 'Add an image.',
                            '#type' => 'image',
                            '#content-preview-image' => true,
                            '#file-extension' => ['jpg', 'png', 'gif'],
                            '#required' => false,

                            '#field-group' => 'south',
                        ],

                    ], /* fields */

                ], /* blog-posts */

      ], /* content types */

    ];