Introducing CSS3 Checkbox and Radio buttons in Adaptive Forms

When work­ing with Adap­tive Forms (Theme Edi­tor) in Adobe Expe­ri­ence Man­ag­er Forms, the Theme Edi­tor enables authors to style the forms using a UI inter­face. This blog pro­vides infor­ma­tion on how you can intro­duce styl­ish CSS3 based check­box­es and radio but­tons in the form, replac­ing the default HTML wid­gets.

After fol­low­ing the steps men­tioned below, you would be able use styl­ish radio button/checkboxes in your form as seen below:

Replac­ing the default ones:

Approach

CSS3 does not sup­port replac­ing the Radio and Check­box wid­gets with an alter­nate image. Thus, to achieve the desired results — we hide the exist­ing Radio and Check­box wid­gets, and use the Item label to pro­vide an icon on the same loca­tion. Theme Edi­tor pro­vides sup­port to give alter­nate styling for var­i­ous states, which can be used to pro­vide alter­nate back­ground images (for default and select­ed state) – giv­ing an impres­sion of select­ed and de-select­ed radio but­ton / check­box items.

The steps involve:

  1. Cre­at­ing a new Theme
  2. Hid­ing the exist­ing default HTML wid­get
  3. Using the Radio button/Checkbox Item Label to pro­vide a back­ground image for Default and Select­ed

Tak­ing the exam­ple of Radio but­tons, here are the details steps to achieve the same (sim­i­lar steps can be fol­lowed for check­box­es).

Steps

Create a new Theme
  • Under Expe­ri­ence Man­ag­er, click Forms, and then click Themes.
  • In the Themes page, click Cre­ate > Theme. A wiz­ard to cre­ate a theme is launched.
  • Pro­vide a title and name for the Theme, and click Cre­ate. Open the cre­at­ed theme (this will launch the Theme Edi­tor).

For more details on oth­er prop­er­ties in the Theme Cre­ation dia­log, you can refer to the Theme Edi­tor doc­u­men­ta­tion.

Hiding the existing default HTML widget
  • Select the Radio but­ton wid­get in the form (by click­ing on it in the ref­er­ence form):

  • Click on Radio But­ton Wid­get (as we want to per­form styling spe­cif­ic to Radio but­ton). This will open the prop­er­ty sheet on the left pane:

  • We want to hide the exist­ing wid­get, for this open the Dimen­sions & Posi­tion accor­dion, and change the dis­play set­ting to None, and Save the Theme.

Use the Radio Button Item Label to provide a background image for Default state
  • Click on the Radio But­ton label in the form, and open its prop­er­ty sheet

  • In the Dimen­sion & Posi­tion accor­dion open the padding prop­er­ty and click on the ‘Edit simul­ta­ne­ous­ly’ icon to edit the padding prop­er­ties indi­vid­u­al­ly

  • Pro­vide a 30px padding left and save the prop­er­ty sheet. This is required to pro­vide a space for the icon to be dis­played. The wid­get would now some­thing like this:

  • Open the Back­ground accor­dion and use Image & Gra­di­ent prop­er­ty to upload the image for uns­e­lect­ed radio but­ton. The image needs to be dis­played with size con­tain (to ensure prop­er adjust­ment of height). And the Tiling needs to be No Repeat to ensure only a sin­gle icon is dis­played.

Use the Radio Button Item Label to provide a background image for Selected state
  • Switch the state to ‘Select­ed’ to pro­vide an alter­nate icon for the select­ed state:

  • Pro­vide a back­ground image for the select­ed state (in a sim­i­lar man­ner as done for the default state above):

  • Save the Theme.

The Theme can now be used across forms to use the updat­ed but­ton styles.

Image Radio Button and Checkboxes

The above approach is opti­mal for the use-case where we want sim­i­lar styling of radio but­ton and check­box­es for all the instances of radio but­ton and check­box­es in the form. But for use-cas­es where you want to use instance spe­cif­ic images (e.g. hav­ing cus­tom images for a par­tic­u­lar field in the form) it is rec­om­mend­ed to use Image Choice com­po­nent:

References

  1. For more details on the Theme Edi­tor, please refer to the online doc­u­men­ta­tion: https://helpx.adobe.com/aem-forms/6–3/themes.html
  2. The arti­cle uses the images from the U.S.. Web Design Stan­dards ref­er­ence theme, which uses type­faces and styles described in the Draft U.S. Web Design Stan­dards site. AEM Forms Ref­er­ence Theme pack­age is avail­able on pack­age share, and pro­vides var­i­ous designs for ref­er­ence: https://helpx.adobe.com/aem-forms/6–3/reference-themes.html
0 comments