Component

Form item

Default theming for form-item components and some extra functionality.

 

Better classes

The classes on form-element-label are now:

{%
  set wrapper_classes = [
    'form-item__label',
    variation ? 'form-item__label--' ~ variation,
    title_display == 'invisible' ? 'form-item__label--visually-hidden',
    required ? 'is-required',
  ]
%}

Which gives you the following classes:

.form-item__label {}

// In case you've added a variation from the backend
.form-item__label--my-custom-variation {}

// In case a label is visually hidden
.form-item__label--visually-hidden {}

// In case the form item is required
.is-required {}

 

Making more variables available in Twig

In this component 1 extra variable have been added that is available in the template: 

{{ variation }} can contain any string, that is passed along from the backend.

An example of how this works can be found in the Checkbox component.

 

Some very basic CSS

Some resetting CSS to keep the theming sane.

Optional usage of the new "variation" variable

When defining your form in the backend, you can pass along the variation variable, in case you want to make use of it in the template.

$form['show_salary'] = [
  '#type' => 'checkbox',
  '#title' => $this->t('this is a checkbox'),
  '#default_value' => 0,
  '#variation' => 'switcher',
];

The string "switcher" will be available in form-element-label.html.twig as {{ variation }}.

An example of how this works can be found in the Checkbox component.

form-item
Drupal Core
Using Sass
Responsive
Accessible
HTML
CSS
Flat design
7 downloads
horizontal beam No open issue