Adding Error States to Checkboxes

forms

#1

Hi guys

I am trying to add error states to my radio & checkbox inputs the same way as Hubspot adds to text inputs when they are invalid however I am struggling to find a way to do this.

The ideal solution would be a way to apply the ‘invalid error’ or similar classes to a radio/checkbox input that fails validation so that I could change its styles using CSS.

I have looked at all the available calls in the form API but there doesnt appear to be one for after validation has happened.

Does anybody have any ideas on how I can accomplish this?

Thanks.
Mikey


#2

Hi @MikeyWallis,

I would recommend checking out the form markup (below) for info on the style selectors built into HubSpot forms. If you’re customizing the radio/checkbox properties required errors, you’d use the following selector:

.hs-form select:focus:required:invalid {}

If you’re trying to change styles based on some other custom arrangement of inputs, you’ll need to apply the class dynamically using JavaScript / jQuery.