Skip to content

Commit

Permalink
👽 Fix markup of checkboxes with help text
Browse files Browse the repository at this point in the history
Left-over from the Django 4.2 upgrade where the HTML was changed.

This ensures the help text is below the checkbox, rather than next to
it with some awkward horizontal space between.
  • Loading branch information
sergei-maertens committed Nov 29, 2024
1 parent 2cd5154 commit 2eeca5a
Showing 1 changed file with 14 additions and 10 deletions.
24 changes: 14 additions & 10 deletions src/openforms/js/components/admin/forms/Inputs.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,19 +102,23 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) =
name = prefix ? `${prefix}-${name}` : name;
const idFor = disabled ? undefined : `id_${name}`;
return (
<div
className={classNames('flex-container', 'checkbox-row', {'checkbox-row--disabled': disabled})}
>
<input type="checkbox" name={name} id={idFor} {...extraProps} />{' '}
<label className={classNames('inline', {vCheckboxLabel: !noVCheckbox})} htmlFor={idFor}>
{label}
</label>
{helpText ? (
<>
<div
className={classNames('flex-container', 'checkbox-row', {
'checkbox-row--disabled': disabled,
})}
>
<input type="checkbox" name={name} id={idFor} {...extraProps} />{' '}
<label className={classNames('inline', {vCheckboxLabel: !noVCheckbox})} htmlFor={idFor}>
{label}
</label>
</div>
{helpText && (
<div className="help">
<div>{helpText}</div>
</div>
) : null}
</div>
)}
</>
);
};

Expand Down

0 comments on commit 2eeca5a

Please sign in to comment.