See Storybook for React guidance of this component.
The following CSS variables can be overridden to customize Form components:
- Hints are built in to all design-system form fields but can be used on their own to create custom fields.
- Use hint text for supporting contextual help that is always visible.
- Hint text should sit between a form label and the input.
- Use lower visual style (i.e., lighter gray than the form label or the input option) so it won't compete for users' attention with the field label.
- Use hint text to indicate which inputs are optional when there are more required fields than optional.
- Hint text can also appear after an input box when the text is being used to show the value someone should be entering in the field (e.g., income amount input box displays text after the input box to highlight the amount should be "monthly income".)
- Use when appropriate to support a field label.
- Describe how to best answer the question/form label.
- Use the fewest words possible (i.e. don't use "please").
- Use sentence case.
- End with a period.
- Be consistent with phrase and sentence structure.
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Not applicable
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete