Fieldset with some basic CSS

Some extra's for fieldset components.

Better classes

The classes on taxonomy-terms has been changed to:

{%
  set classes = [
    'js-form-wrapper',
    'form-wrapper',
    'fieldset',
    element['#type'] == 'checkboxes' ? 'fieldset--checkboxes',
    element['#type'] == 'radios' ? 'fieldset--radios',
    element['#type'] == 'radios' ? 'fieldset--' ~ element['#name']|clean_class,
  ]
%}

Which gives you the following classes:

// Default Drupal classes
.js-form-wrapper {}
.form-wrapper {}

// new classes
.fieldset {}

// if the fieldset is being used by checkboxes
.fieldset--checkboxes {}

// if the fieldset is being used by radiobuttons
.fieldset--radios {}
.fieldset--name-of-radiobuttons-field {}

Note: Fieldset is by default being used by Drupal Core Checkboxes and Radio buttons. This component gives us a few classes to accomodate this.

More theme-able HTML

Instead of using the <legend> html inside <fieldset> we are using a <h3>. While being a bit less semantic, it does give us a way easier way of theming those titles. 

Theming of fieldset siblings

When using fieldsets in sequence after each other, there will be a line drawn between the different fieldsets. (screenshot 1)

Theming of nested fieldset

Fieldset's are often used inside other fieldsets by Drupal. To normalise how they look and to give us sanity theming them, the theming for nested fieldset's is resetted.

The fieldset-title of the nested fieldset will be themed the same way as normal field labels. (screenshot 2)

There are 2 ways of using this component:

Hardcoding inside a form template

Inside a form--variation.html.twig, you could add: 

{% extends 'form.html.twig' %}

{% block content %}
  {{ attach_library('compony/fieldset') }}
  <fieldset class="fieldset form-wrapper js-form-wrapper">
    <div class="fieldset-wrapper">
      <div class="form-item__wrapper">
        {{ children }}
      </div>
    </div>
  <fieldset>
{% endblock %}

This means you will wrap all the children of a form in to a fieldset component.

Defining in a form definition in the backend

$build['my_custom_fieldset'] = [
  '#type' => 'fieldset',
  '#title' => $this->t('This is my fieldset title'),
];

// This checkbox will be inside the fieldset
$form['my_custom_fieldset']['my_custom_field'] = [
  '#type' => 'checkbox',
  '#title' => $this->t('This is a checkbox'),
];

Specifications

Machine name

fieldset

Built upon

Drupal Core

Perks

Using Sass
Responsive
Accessible

Building blocks

HTML
CSS

Inspired by

Flat design

Stats

Public component
50 downloads
No open issue

Contributors