F01 Forms
A form is a structured collection of input fields used to capture and submit user information. It guides users through completing tasks by providing clear labels, logical organization, and real-time validation, ensuring accurate input and a smooth, consistent experience.
Component requirements
Required:
- Form name: Text field.
- Form name must match the name defined in Form.io, which is used to generate the form.
- Thank you page URL: Text field along with associated link type (internal/external/anchor/email/phone).
- The thank you page is created in Sitecore and used as the redirect destination after a successful form submission.
ADA requirements
- All form fields include properly associated labels to ensure assistive technologies can accurately convey their purpose.
- Forms are fully operable via keyboard, including navigation between fields, selections, and form submission without requiring a mouse.
- Validation errors are clearly communicated using accessible messaging and are programmatically associated with the relevant fields.
- Required fields are clearly indicated both visually and programmatically (e.g., aria-required).
- Field groupings (such as checkboxes or radio buttons) use appropriate semantic structure and labels for clarity.
- All interactive elements meet accessible focus states and contrast requirements.
Form elements, states, and validation
Form fields are designed to be clear, accessible, and consistent across experiences. Each field includes a visible label positioned above the input to provide clear context. Fields are fully ADA compliant.
The example demonstrates key states including default, focus, error, and disabled.
Dropdown fields allow users to select a single option from a predefined list. Each dropdown includes a visible label positioned above the field, and selecting the field or its associated label will open the dropdown menu for interaction. The component is fully ADA compliant.
The example demonstrates the two primary states: closed (default) and open.
Checkbox fields allow users to select one or more options independently. Each checkbox is paired with a clearly associated label, and selecting the label will also toggle the checkbox to improve usability and accessibility. The component is fully ADA compliant.
The example demonstrates key states including default, checked, focus, disabled, and disabled (checked).
Radio button fields allow users to select a single option from a grouped set. Only one radio button can be selected at a time within a group. Each option includes a clearly associated label, and selecting the label will also select the corresponding radio button to improve usability and accessibility. The component is fully ADA compliant.
The example demonstrates key states including default, selected, disabled, and disabled (selected).
