More class names for form groups

Feature Requests / Improvements
1

it would be nice if the form groups had more class names depending on the field type.

selector specificity needed

all of this form-groups looks same but they have different fields inside.

I want to select only lets say checkbox field but I cant since its not possible to select that group only :slight_smile:

I usualy just select the nth-child but thats not the way to go soon as one of my team member changes something adds field or removes field my css style gets broken :slight_smile:

image

2 Likes
2

I want to select only lets say checkbox field but I cant since its not possible to select that group only :slight_smile:

For now, this is a solution…

.form-group:has([type=checkbox]) {
 /* style the group with the checkbox */
}
3

you can use the 'bricks/element/render_attributes' filter in bricks to programmatically add classes.

this is what I do. I plan on expanding it to include HTML-Form Groups some day, but works fine for radio-fields etc.

add_filter( 'bricks/element/render_attributes', function( $attributes, $key, $element ) {
    if ($element->name !== 'form') return $attributes;

		if (strpos($key, 'field-wrapper-') !== 0) return $attributes;

		$index = substr($key, strlen('field-wrapper-'));

		$field_key = "field-$index";

		if (isset($attributes[$field_key])) {
			$field = $attributes[$field_key];

			if (isset($field['id'][0])) {
				$id = substr($field['id'][0], strlen('form-field-'));
				$attributes[$key]['id'] = "form-group-$id";
				$attributes[$key]['data-id'] = $field['id'][0];
			}

			if (isset($field['name'][0])) {
				$attributes[$key]['data-name'] = $field['name'][0];
			}

			if (isset($field['type'][0])) {
				$attributes[$key]['data-type'] = $field['type'][0];
			}

			if (isset($attributes[$key]["role"][0]) && $attributes[$key]["role"][0] === 'radiogroup') {
				$attributes[$key]['data-type'] = 'radio';
			}

			if (isset($attributes[$key]["role"][0]) && $attributes[$key]["role"][0] === 'group' && isset($attributes[$key]["aria-labelledby"])) {
				$attributes[$key]['data-type'] = 'checkbox';
			}
		}
    
    return $attributes;
}, 10, 3 );
1 Like
4

You can hook into the form to generate responsive CSS for each repeater item based on its field ID, instead of relying on the default nth-child() selectors.

This way, field style controls will always be tied to their field IDs, ensuring that adding, removing, or reordering fields won’t affect the styles you’ve already assigned.

Look at the code at line 1407 of assets.php.

5

if those groups had class names we would use the selector detector feature to select it and style each group easily :slight_smile:

1 Like
6

Would be very useful to be able to add a class to a field in the field options.

This would help to target any specific field including the HTML field for more styling control.

7

That is a very fair point regarding maintainability. Relying on nth-child in a team environment or on dynamic forms is always risky because any small change can break the layout. Having native class names for specific field types would definitely make the workflow much more robust.

1 Like