Form

How it works

The form React Carbon component can contain any number of React Carbon components that are used to obtain input data from a user. Validation messages should be included to advise the user of data that is input incorrectly or a required field that is missing information. Helper text should also be used to provide instructions to help users understand how to complete the form fields as well as indicate any required and optional input, data formats, and other relevant information. See the individual form components for additional information.

Accessibility considerations

This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.

  1. Provide labels and instructions that are clear and concise.
  2. Carbon Components should be used to create the form fields.
  3. Provide instructions for completing the field. For example, passwords must contain at least eight letters and/or numbers.
  4. If the number input is a required field include the aria-required property and indicate that it is a required field.
  5. Although the form component passes accessibility testing, content authors need to ensure all content that is added to the form is accessible.

Resources

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository. For screen reader test results refer to the Accessibility guidance for each Carbon Component form control used.

Automated test

Automated test environment
Results
- macOS Mojave version 10.14.2 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations