Using #type 'details' for collapsible sections

In our previous lessons, we discussed how to manage form control using interactive elements like #access for element visibility. Now, we'll explore how the #type 'details' property revolutionizes form organization in Drupal by creating collapsible sections—streamlining complex forms and enhancing the user experience.

Understanding #type 'details'

The #type 'details' in Drupal's Form API is a container element used to group form fields into sections that users can expand or collapse. This type leverages HTML5's <details> element to improve form navigation and minimize the visual clutter on the page by grouping related form items.

Benefits of Collapsible Sections

Incorporating collapsible sections within forms offers numerous advantages:

Improved Organization: Organize related fields together, making forms more intuitive.
Enhanced Usability: Users can focus on one section at a time, preventing overwhelm from too many inputs.
Space Management: Reduces visible sections on the screen, ideal for multi-step processes.

Implementing #type 'details'

Here’s how you might use collapsible sections in a form for managing user information, with fields grouped into personal details and account settings:


$form['personal_info'] = [
    '#type' => 'details',
    '#title' => t('Personal Information'),
    '#open' => TRUE, // Defaults to opened
];

$form['personal_info']['first_name'] = [
    '#type' => 'textfield',
    '#title' => t('First Name'),
];

$form['personal_info']['last_name'] = [
    '#type' => 'textfield',
    '#title' => t('Last Name'),
];

$form['account_settings'] = [
    '#type' => 'details',
    '#title' => t('Account Settings'),
    '#open' => FALSE, // Defaults to closed
];

$form['account_settings']['email'] = [
    '#type' => 'email',
    '#title' => t('Email Address'),
];

$form['account_settings']['password'] = [
    '#type' => 'password',
    '#title' => t('Password'),
];

$form['actions']['submit'] = [
    '#type' => 'submit',
    '#value' => t('Save'),
];

In this example, the "Personal Information" section is set to be open by default while "Account Settings" remains collapsed. Users can expand and modify sections as needed, fostering a streamlined experience.

Enhancing User Experience with Details

To effectively use the #type 'details' property, consider these strategies:

Logical Grouping: Combine fields that are naturally related to aid navigation.
Cohesive Titles: Utilize clear and explanatory titles for each section to guide users.
Optimize Visibility: Determine which sections should be open or closed initially based on user needs or task frequency.

Advanced Usage of Collapsible Sections

Consider scenarios where certain sections should dynamically display based on user input:


$form['preferences'] = [
    '#type' => 'details',
    '#title' => t('Preferences'),
    '#states' => [
        'visible' => [
            ':input[name="receive_updates"]' => ['checked' => TRUE],
        ],
    ],
];

$form['preferences']['updates_freq'] = [
    '#type' => 'select',
    '#title' => t('Email Updates Frequency'),
    '#options' => [
        'daily' => t('Daily'),
        'weekly' => t('Weekly'),
        'monthly' => t('Monthly'),
    ],
];

This configuration ensures the "Preferences" section appears only when "Receive Updates" is selected, tailoring visibility to user selections.

Conclusion

The #type 'details' property is a pivotal tool for structuring comprehensive forms, offering users a clear, simple interface with expandable sections. This approach not only aids in navigation but also significantly improves the overall usability of forms.

DrupalZone

Using #type 'details' for collapsible sectionsfor Drupal 8 , 9 , 10 , and 11