Introducing CSS3 Checkbox and Radio buttons in Adaptive Forms

When working with Adaptive Forms (Theme Editor) in Adobe Experience Manager Forms, the Theme Editor enables authors to style the forms using a UI interface. This blog provides information on how you can introduce stylish CSS3 based checkboxes and radio buttons in the form, replacing the default HTML widgets.

After following the steps mentioned below, you would be able use stylish radio button/checkboxes in your form as seen below:

Replacing the default ones:

Approach

CSS3 does not support replacing the Radio and Checkbox widgets with an alternate image. Thus, to achieve the desired results – we hide the existing Radio and Checkbox widgets, and use the Item label to provide an icon on the same location. Theme Editor provides support to give alternate styling for various states, which can be used to provide alternate background images (for default and selected state) – giving an impression of selected and de-selected radio button / checkbox items.

The steps involve:

  1. Creating a new Theme
  2. Hiding the existing default HTML widget
  3. Using the Radio button/Checkbox Item Label to provide a background image for Default and Selected

Taking the example of Radio buttons, here are the details steps to achieve the same (similar steps can be followed for checkboxes).

Steps

Create a new Theme
  • Under Experience Manager, click Forms, and then click Themes.
  • In the Themes page, click Create > Theme. A wizard to create a theme is launched.
  • Provide a title and name for the Theme, and click Create. Open the created theme (this will launch the Theme Editor).

For more details on other properties in the Theme Creation dialog, you can refer to the Theme Editor documentation.

Hiding the existing default HTML widget
  • Select the Radio button widget in the form (by clicking on it in the reference form):

  • Click on Radio Button Widget (as we want to perform styling specific to Radio button). This will open the property sheet on the left pane:

  • We want to hide the existing widget, for this open the Dimensions & Position accordion, and change the display setting to None, and Save the Theme.

Use the Radio Button Item Label to provide a background image for Default state
  • Click on the Radio Button label in the form, and open its property sheet

  • In the Dimension & Position accordion open the padding property and click on the ‘Edit simultaneously’ icon to edit the padding properties individually

  • Provide a 30px padding left and save the property sheet. This is required to provide a space for the icon to be displayed. The widget would now something like this:

  • Open the Background accordion and use Image & Gradient property to upload the image for unselected radio button. The image needs to be displayed with size contain (to ensure proper adjustment of height). And the Tiling needs to be No Repeat to ensure only a single icon is displayed.

Use the Radio Button Item Label to provide a background image for Selected state
  • Switch the state to ‘Selected’ to provide an alternate icon for the selected state:

  • Provide a background image for the selected state (in a similar manner as done for the default state above):

  • Save the Theme.

The Theme can now be used across forms to use the updated button styles.

Image Radio Button and Checkboxes

The above approach is optimal for the use-case where we want similar styling of radio button and checkboxes for all the instances of radio button and checkboxes in the form. But for use-cases where you want to use instance specific images (e.g. having custom images for a particular field in the form) it is recommended to use Image Choice component:

References

  1. For more details on the Theme Editor, please refer to the online documentation: https://helpx.adobe.com/aem-forms/6-3/themes.html
  2. The article uses the images from the U.S.. Web Design Standards reference theme, which uses typefaces and styles described in the Draft U.S. Web Design Standards site. AEM Forms Reference Theme package is available on package share, and provides various designs for reference: https://helpx.adobe.com/aem-forms/6-3/reference-themes.html
0 comments