AEM forms

For more information on form best practices, refer to Anatomy:
Anatomy, Components – Form

• You must add a required message to a form control that is required
  • Otherwise, the user cannot know that that control is required
• Do not enable read-only for form controls — this will disable any required indication that was previously enabled

For information on writing effective help text, refer to Anatomy:
Anatomy, Content – Content guidelines

Never add the help text as the placeholder of the text input field.

Error messages cannot be styled because these components are out-of-the-box. Any error messaging will appear as the user’s browser default.

For general information about the Form Button, refer to AEM's Form Button Component documentation.

For general information about the Form Container, refer to AEM's Form Container Component documentation.

All form buttons, options, and text components are nested within the Form Container.

For general information about the Form Options Component, refer to AEM's Form Options Component documentation.

For checkbox best practices, refer to Anatomy:

• Anatomy, Components – Checkbox
• Anatomy, Components – Checkbox group

Use when the user needs to select one or more options out of seven or fewer options. If you have more options, use the multi-select form component.

You can’t have a single checkbox that is required without a legend. For example, when asking the user to accept terms of use, the checkbox will have a legend above the terms of use checkbox text.

For radio group best practices, refer to Anatomy:
Anatomy, Components – Radio group

Use when the user needs to select one option out of seven or fewer options. If you have more options, use the select form component.

Always author the first radio button option as “Selected”.

Use when the user needs to select one option out of seven or more options. The select’s options will appear in the user’s browser default select panel.

Use when the user needs to select one or more options out of seven or more options. The select’s options will appear in the user’s browser default select panel.

For general information about the Form Text Component, refer to AEM's Form Text Component documentation.

For text input best practices, refer to Anatomy:
Anatomy, Components – Text input

Use for when the user must enter one line of text at most.

Use for when the user must enter more than one line of text.

Use for when the user must enter an email address.

Use for when the user must enter a telephone number. 

Use for when the user must enter a date value. Our date format is mm/dd/yyyy.

The author can set a date value that will be submitted with the form, but the user will not be able to see it in the UI. The date input will still show the “mm/dd/yyyy” placeholder text, even though there’s a value set on the control in the code. Do not add a date value.

Use for when the user must enter a whole number. The stepper functionality will allow the user to increment or decrement the entered value by one. The user will only able to enter a number.

Use for when the user must enter a password. This field will mask the user’s entry for privacy.