Allow CSS class changes within Conditional Form Fields

Created on 22 January 2023, almost 2 years ago
Updated 19 February 2023, almost 2 years ago

Problem/Motivation

When using the Conditional Form Fields functionality to alter form fields based on the status of other form fields, it could be useful to allow the addition and removal of CSS classes to target fields.

An example use case is to, using CSS, change the colour/appearance of one field based on the choice selected in another. Another is to make a field (including its wrapper and label) unclickable using CSS pointer-events and opacity values. The latter would not affect the field value being submitted/handled – which in the case of a select field, for example, can cause problems.

Proposed resolution

A patch is attached to add this functionality. It expects a #states value as follows, to toggle the 'class' values provided based on the provided logic:

// Test Field Three is given the classes 'TESTING' and 'TESTINGTWO' when Test Field One has the value 'One' selected.
$form['field_test_field_three']['#states'] = [
  'classes' => [
    'select[name="field_test_field_one"]' => [
      'value' => 'one',
    ],
    'class' => [
      'TESTING',
      'TESTINGTWO',
    ],
  ],
];

Remaining tasks

Test coverage
Change record
Code review

Peer review, and adding suitable documentation to core if this is moved forward.

User interface changes

None directly, but changes will be made if this new functionality is used.

API changes

As described above.

Data model changes

None.

Feature request
Status

Needs work

Version

10.1

Component
Form 

Last updated 2 days ago

Created by

🇬🇧United Kingdom simonminter

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024