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.
- Tabs (and Tab)
- Accordion (and Accordion Item)
- Details sidebar
- HTML Element
<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>Label for the fieldset</legend>
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 come in two layouts: vertical and horizontal. Both are ‘components’ that come standard with Drupal 8 core.
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.
Collapsible: Sort of. A tab has the option of
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
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.
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.
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
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.
<summary>A title or label</summary>
The content of the element.
Use: No special instructions. Just place your fields in a Details field group.
Collapsible: Yes. You can set the
default state as
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.
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.
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.
- 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
detailsHTML 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.
This option lets you wrap fields or other field groups in any HTML element and then apply attributes like
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.