Show Menu
TOPICS×

Form Options Component

The Core Component Form Options component allows for the selection from pre-defined options in various formats.

Usage

The Core Component Form Options component allows for the submission of different types of options presented in many different ways and is intended to be used along with the Form Container component.
The presentation of the options, labels, and individual options can be defined by the content editor in the configure dialog.

Version and Compatibility

The current version of the Form Options Component is v2, which was introduced with release 2.0.0 of the Core Components in January 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
Component Version
AEM 6.3
AEM 6.4
AEM 6.5
v2
Compatible
Compatible
Compatible
Compatible
Compatible
Compatible
For more information about Core Component versions and releases, see the document Core Components Versions.

Sample Component Output

The following is sample taken from We.Retail.

Screenshot

HTML

<form method="POST" action="/content/we-retail/us/en/experience.html" id="new_form" name="new_form" enctype="multipart/form-data" class="cmp-form aem-Grid aem-Grid--12 aem-Grid--default--12">
    <input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container">
    
    <div class="hidden aem-GridColumn aem-GridColumn--default--12">
<input type="hidden" id="form-hidden-66464844" name="hidden">

</div>
<div class="hidden aem-GridColumn aem-GridColumn--default--12">
<input type="hidden" id="form-hidden-858231075" name="hidden">

</div>
<div class="hidden aem-GridColumn aem-GridColumn--default--12">
<input type="hidden" id="form-hidden-862566768" name="hidden">

</div>
<div class="container responsivegrid aem-GridColumn aem-GridColumn--default--12">

    <input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container/container">
    
    <div class="options aem-GridColumn aem-GridColumn--default--12">

    <fieldset class="cmp-form-options">
        
            <legend class="cmp-form-options__legend">What is your favorite type of toast?</legend>
            <label class="cmp-form-options__field-label">
                <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="dryToast">
                Plain dry toast
            </label>
<label class="cmp-form-options__field-label">
                <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="frenchToast">
                French Toast
            </label>
<label class="cmp-form-options__field-label">
                <input class="cmp-form-options__field cmp-form-options__field--radio" type="radio" name="favToast" value="texasToast">
                Texas Toast
            </label>

    </fieldset>

</div>

</div></form>

JSON

"container":{  
                           "columnClassNames":"aem-GridColumn aem-GridColumn--default--12",
                           "columnCount":12,
                           "gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12",
                           ":items":{  
                              "options_816658469":{  
                                 "columnClassNames":"aem-GridColumn aem-GridColumn--default--12",
                                 "id":"form-options-269951232",
                                 "title":"What is your favorite type of toast?",
                                 "name":"favToast",
                                 "type":"RADIO",
                                 "items":[  
                                    {  
                                       "value":"dryToast",
                                       "text":"Plain dry toast",
                                       "selected":false,
                                       "disabled":false
                                    },
                                    {  
                                       "value":"frenchToast",
                                       "text":"French Toast",
                                       "selected":false,
                                       "disabled":false
                                    },
                                    {  
                                       "value":"texasToast",
                                       "text":"Texas Toast",
                                       "selected":false,
                                       "disabled":false
                                    }
                                 ],
                                 ":type":"core/wcm/sandbox/components/form/options/v2/options"
                              }
                           },
                           ":itemsOrder":[  
                              "options_816658469"
                           ],
                           ":type":"core/wcm/sandbox/components/form/container/v2/container"
                        }

Technical Details

The latest technical documentation about the Form Options Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.

Configure Dialog

The configure dialog allows the content author to define the type of options that should be presented, labels, and which options are available.
  • Types - How the options will be presented
    • Checkboxes
    • Radio buttons
    • Drop-down
    • Multi-select drop-down
  • Title The title that will be displayed as the label for the options
  • Name The name of the field submitted with the form data
  • Source Where the options are defined
    • Local Defined within the component
      • Tap or click the Add button to add a value, Delete to remove a value
      • Value The value saved when that option is selected when the form is submitted
      • Text The label for the option displayed on the form
      • Active The option is marked as selected when the form loads
      • Disabled The option is not selectable but still displayed
      • List A static list defined elsewhere in AEM is used for the options
        • List The path of the static list in AEM
          • Use the Browse button to locate the list resource
      • Data source A data source is used for the options
        • Data source Resource type of the data source
  • Help message A hint for the user of what can be entered in the field

Design Dialog

Styles Tab

The Form Options Component supports the AEM Style System.