I created an Address custom field type, with two text fields (street and city).

When I add a new Address field on a content type, I get this form inside the edit page.

edit form

How can I change the layout of the form above?

For example, I would like to add some space between the Street text line and the City label, or display both fields on the same line.

This is the code for the AddressDefaultWidget class.

 * Field type widget implementation.
 * @FieldWidget(
 *   id = "AddressDefaultWidget",
 *   label = @Translation("Address select"),
 *   field_types = {
 *     "Address"
 *   }
 * )
class AddressDefaultWidget extends WidgetBase {

   * Define the form for the field type.
  public function formElement(
    FieldItemListInterface $items,
    Array $element, 
    Array &$form, 
    FormStateInterface $formState
  ) {

    // Street

    $element['street'] = [
      '#type' => 'textfield',
      '#title' => t('Street'),
      '#default_value' => isset($items[$delta]->street) ? 
          $items[$delta]->street : null,
      '#empty_value' => '',
      '#placeholder' => t('Street'),

    // City

    $element['city'] = [
      '#title' => t('City'),
      '#type' => 'textfield',
      '#default_value' => isset($items[$delta]->city) ? 
          $items[$delta]->city : null,
      '#empty_value' => '',
      '#placeholder' => t('City'),

    return $element;

  • Your examples could both be done with simple CSS, no need to write any code
    – Clive
    Apr 15, 2016 at 12:46
  • @Clive Can you provide me an example? Should I add a custom CSS class on divs containing form fields?
    – Andrea
    Apr 15, 2016 at 12:57
  • Is this code part of a custom module? May 5, 2016 at 13:33
  • @KevinNowaczyk yes, it is a custom module for a custom field type.
    – Andrea
    May 5, 2016 at 14:36

1 Answer 1


This is off the top of my head, so there might be a few kinks. The way I would do it would be to:

  1. Add a new class to each of the form elements that your module produces
  2. Create some CSS to pad the top/bottom of elements with this class
  3. Tell Drupal to include this CSS file whenever the form elements are on the page

In your Widget file add the following to each element to add an additional class to the form elements.

'#attributes' => [
  'class' => 'address_widget_class',

To add CSS styles to a custom module, you will need to create a few files and directories.

  • module/module.libraries.yml
  • module/css/style.css

In your CSS file, add the following to add 10 pixels above and below each item.

.address_widget_class {
  margin: 10px 0;

Next, you need to tell Drupal that the CSS file exists. In the module.libraries.yml file, add the following code.

  version: 1.x
      css/style.css: {}

Finally, to include the library when the element is used, add the following to your Widget.

$element['street']['#attached']['library'][] = 'module/style_name';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.