Field Group

Provides the ability to group fields on both form and display modes for all fieldable entities.

field_group
295,844 sites
275
drupal.org
gui api theme
fields form display layout organization ux tabs fieldset collapsible entity display
Drupal 8 Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10 v4.0.0
composer require 'drupal/field_group:^4.0'
Drupal 9 v8.x-3.6
composer require 'drupal/field_group:8.x-3.6'
Drupal 8 v8.x-3.3
composer require 'drupal/field_group:8.x-3.3'

概要

Field Groupは、エンティティのフォームとビュー表示でフィールドを整理・グループ化できる強力なモジュールです。コンテンツタイプ、ユーザー、タクソノミーターム、カスタムエンティティなど、Drupalのすべてのフィールド対応エンティティで動作します。

このモジュールはプラグインベースのアーキテクチャを採用しており、フィールドグループの無制限のネストが可能で、フィールドセット、詳細（折りたたみ可能）、タブ（水平・垂直）、HTML要素などの複数のフォーマッタータイプを提供します。各フォーマッターには外観と動作をカスタマイズするための独自の設定オプションがあります。

フィールドグループはフィールド表示管理と同じインターフェースで設定するため、フィールドを論理的なグループに整理することが直感的にできます。グループにはフィールド、他のグループ、または他のモジュールが提供する追加フィールドを含めることができ、複雑な多階層レイアウトが可能です。

Features

  • エンティティフォーム表示（追加・編集フォーム）でカスタマイズ可能なフォーマッターを使用してフィールドをグループ化
  • エンティティビュー表示（コンテンツ表示ページ）でカスタマイズ可能なフォーマッターを使用してフィールドをグループ化
  • フィールドグループ内で他のフィールドグループを無制限にネスト可能
  • 複数の組み込みフォーマッタータイプ：Fieldset、Details、Details Sidebar、Tabs（水平・垂直）、Tab、HTML Element
  • 他のモジュールがカスタムフォーマッターを作成できるプラグインベースのアーキテクチャ
  • 開閉のデフォルト状態を持つ折りたたみ・展開可能なグループ
  • 各グループにカスタムCSSクラスとID属性を設定可能
  • 自動無効化のための幅ブレークポイントを設定可能なレスポンシブタブ
  • 必須フィールドを含む場合にグループを必須としてマーク可能（フォームコンテキスト）
  • XSSフィルタリング付きでグループラベルにHTMLをサポート
  • Field UIとの統合によるシームレスな設定体験
  • contribモジュール経由でDrupal 6/7のフィールドグループからの移行をサポート
  • エンティティタイプ・バンドルごとにグループの外観をカスタマイズするためのテーマサジェスチョン

Use Cases

Organizing Long Node Edit Forms

For content types with many fields, use field groups to organize related fields into logical sections. Create a Tabs group with horizontal direction, then add Tab groups for each section (e.g., 'Basic Info', 'SEO Settings', 'Advanced Options'). Each tab contains related fields, making the form more manageable for content editors.

Creating Collapsible Configuration Sections

Use Details formatter to create collapsible sections on edit forms. Set 'open' to FALSE for less-frequently used options to reduce visual clutter. For example, group advanced settings in a collapsed Details section so they're available but not distracting.

Sidebar Organization on Node Forms

Use Details Sidebar formatter to move groups to the entity form sidebar alongside publishing options. Useful for metadata fields, scheduling options, or other settings that don't need to be in the main content area.

Custom Styled Content Sections on Display

Use HTML Element formatter on view displays to wrap groups of fields in semantic HTML elements (section, article, aside) with custom CSS classes. This enables rich theming and layout control without template overrides.

Multi-step Style Forms

Create vertical tabs to simulate a multi-step form workflow. Each tab represents a logical step or category, guiding users through complex content entry while keeping all data on a single form submission.

Responsive Tab Layouts

Configure the Tabs formatter with a width_breakpoint setting to automatically disable tabs on mobile devices, converting them to a standard stacked layout for better mobile UX.

Tips

  • Use meaningful group machine names as they appear in template suggestions (e.g., field-group--group-name.html.twig)
  • Combine tabs with details inside them for two-level organization without deep nesting
  • The 'Show empty fields' setting is useful for debugging but should typically be disabled in production
  • Use the HTML Element formatter with semantic elements (section, article, aside) for better accessibility and SEO
  • Set width_breakpoint on Tabs to ensure good mobile experience - tabs automatically convert to stacked layout below the breakpoint
  • Groups can contain other groups for unlimited nesting, but keep UX in mind - deep nesting can confuse users
  • Theme suggestions are generated based on entity type, bundle, view mode, and group name for granular theming control

Technical Details

Admin Pages 2
Add field group (Form Display) /admin/structure/types/manage/{bundle}/form-display/add-group

Add a new field group to the form display of a content type. This page uses a two-step form: first select the group type and name, then configure the formatter settings.

Add field group (View Display) /admin/structure/types/manage/{bundle}/display/add-group

Add a new field group to the view display of a content type. Works identically to form display but for entity view pages.

Hooks 7
hook_field_group_pre_render

Pre-render the build of the field group element. Called before the group element is rendered.

hook_field_group_pre_render_alter

Alter the pre-rendered build of the field group element after the formatter has processed it.

hook_field_group_build_pre_render_alter

Alter the pre-rendered build of the entire entity view, allowing modification of all field groups.

hook_field_group_form_process

Process the field group element during form building. Allows adding Form API states or other modifications.

hook_field_group_form_process_alter

Alter the processed build of a specific field group during form processing.

hook_field_group_form_process_build_alter

Alter the complete form after all field groups have been processed. Allows global modifications.

hook_field_group_delete_field_group

React to the deletion of a field group. Allows cleanup of related data.

Troubleshooting 5
Field groups not appearing on forms or displays

Ensure the field group is not in the 'Disabled' region. Drag it to the 'Content' region in the Manage form display or Manage display page. Also verify the field group contains at least one field or has 'Display element also when empty' enabled.

Tabs showing as fieldsets instead of proper tabs

Tab formatters must be children of a Tabs formatter. Create a parent Tabs group first, then create Tab groups inside it. The Tab formatter alone will render as a details element if not properly nested.

Validation errors not opening collapsed groups

Ensure the field_group/details_validation or field_group/tab_validation library is attached. These are automatically attached by the formatters when required_fields setting is enabled.

Accordion not working

The accordion formatter requires the jquery_ui_accordion module and field_group_accordion submodule. Note that this is deprecated due to jQuery UI EOL. Consider migrating to tabs or details formatters.

Field groups from Drupal 7 migration appearing disabled

After migration, field groups may have NULL region values. Run the field_group_post_update_0001 update or manually assign regions through the UI.

Security Notes 3
  • HTML in group labels is filtered through Drupal's XSS filter (Xss::filterAdmin) when 'Allow HTML in label' is enabled
  • Custom attributes entered in the HTML Element formatter are parsed and added safely through Drupal's Attribute class
  • CSS class and ID inputs are validated to only allow letters, numbers, underscores, dashes, and spaces