Examples

Code

React

See Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Form components:

Guidance

• Inline errors are built in to all design-system form fields but can be used on their own to create custom fields.
• Inline errors should sit either directly above or below the input, depending on the theme defaults.
• Visually align inline validation messages with the input fields, so people using screen magnifiers can read them quickly.
• The form field should have an aria-describedby attribute that references the id of the error message.

Content

• Describe what the user still needs to do in a mandatory field that has been left incomplete or unanswered, or answered incorrectly.
• Repeat what the form label is asking the user to do, but with slightly more detail.
• Use the fewest words possible (i.e., don't use "please").
• Use sentence case.
• End with a period.

Learn More

• Form Guidelines

Component maturity