Drupal 8 Field Groups

Drupal 8 comes with a few ways to group fields on a form via the Manage Form Display tab of content types. Thought I’d just go over them. Each one functions a little differently and some have important semantic purposes. Examples are from the Seven admin theme.

1. Fieldset
2. Tabs (and Tab)
3. Accordion (and Accordion Item)
4. Details
5. Details sidebar
6. HTML Element

Fieldset

The <fieldset> is a default HTML element used to group thematically related form fields. When you group fields with a Fieldset field group in Drupal 8, the Field Group Label acts as the <legend>.

<form>
  <fieldset>
    <legend>Label for the fieldset</legend>
    Fields here
  </fieldset>
</form>

Fieldsets are great to semantically group address fields.

Use: No special use instructions here. Place fields directly inside the Fieldset field group.

Collapsible: No. Fieldsets will always be open and cannot be closed.

Accessibility: You should be good. For visual users it’s enough that there’s a label and some kind of visual grouping, like a border, around the fields. For screenreaders we just need to make sure the <legend> is there and Drupal 8 takes care of that.

Tabs

Tabs come in two layouts: vertical and horizontal. Both are ‘components’ that come standard with Drupal 8 core.

Vertical tabs

Horizontal tabs

Use: The tabs component is set up with two types of field groups: Tabs and Tab. Place fields in Tab field groups, place Tab field groups in a Tabs field group.

Note how fields are nested inside Tab field groups which are nested in a Tabs field group.

Collapsible: Sort of. A tab has the option of open or closed for the default state. If all the tabs have a default state of closed then the first tab in the list will be open. If you want a specific tab to always be the ‘top’ tab or open tab, then set default state to open.

Accessibility: Tabs are one of those interactive components that are tricky accessibility-wise. There is a lot to read, but from what I can tell, Drupal’s implementation is quite good.

Accordion

Accordions group together collapsible sections, and each section can contain multiple fields. Semantically, there is no mechanism to thematically group the fields like a header or label, so the connection between Accordion Items is only demonstrated visually.

Example of three Accordion Items in an Accordion field group.

Use: The Accordion requires two field group types: the Accordion and Accordion Items. Place fields in Accordion Items, place Accordion Items in an Accordion.

Collapsible: Yes. Each Accordion Item can be have a default state of open or closed.

Accessibility: Accordions are another tricky component to make accessible. Drupal’s implementation is a series of h3 elements as the control for a following div that contains the item’s content. ARIA seems to be well applied to indicate the relationships and interactions between the toggles and content, and keyboard navigation works pretty well. It seems odd to me that there’s no h2 or other label that would give a name to the items collected in an accordion, though.

Details

details is a default HTML element that browsers automatically open and close without extra CSS or javascript. It just works.

Example of a closed details field group.

<details>
    <summary>A title or label</summary>
    The content of the element.
</details>

Use: No special instructions. Just place your fields in a Details field group.

Collapsible: Yes. You can set the default state as open or closed.

Accessibility: This is a very well-supported element across modern browsers and assistive technology. Drupal’s implementation fills in some of the gaps. Go nuts.

Details Sidebar

This is actually kind of wild. Placing items in a Details Sidebar field group moves them into the advanced vertical tabs. In the Seven admin theme, this is the right sidebar.

So you might be searching for, “how to add fields to the node form sidebar,” and this would be an answer.

Example of a field placed in the advanced sidebar

Use: As long as the Details Sidebar field group has content and is not disabled, it will appear in the Advanced group on the add/edit form. You can choose to have your Details Sidebar field group open by default and you can assign it a weight.

Quirks:

• Not all admin themes placed the Advanced group in a sidebar. Ours puts all that at the bottom of the page.
• Think of a Details Sidebar field group as a Details Sidebar Item. You’re not adding a whole sidebar, you’re adding a tab or item in the existing sidebar.
• It is an actual details HTML element, but Drupal does some extra work to make it work in a vertical tab style.
• The placement of the Details Sidebar field group in the Manage Form Display means nothing. As long as it’s not Disabled it will appear in the sidebar and its position in the sidebar is controlled by weight.

Accessibility: This field group is a combination of the details element and Drupal’s tabs component. Both are very well supported from an accessibility perspective.

HTML Element

This option lets you wrap fields or other field groups in any HTML element and then apply attributes like id and class.

The HTML Element field group options as found in Manage Form Display

Use: No special instructions. If you need to wrap fields or field groups in a div or something, here’s how. I don’t know why Effect is in there — it doesn’t seem to do anything.

Collapsible: No. (Unless you use the attributes to construct a custom interactive component.)

Accessibility: This is a freeform area, so maintaining accessibility is up to you. Drupal has helpfully provided the Attributes field where accessibility helpers like ARIA can be added.

That’s all!