# Forms

The design system includes components for the standard HTML form elements: [checkboxes](/components/checkbox/) and [radio buttons](/components/radio/), [text fields](/components/text-field/), [dropdowns ](/components/dropdown/), fieldsets, labels, and so on.

Below are some best practices your project should follow in order to provide the most accessible and usable experience for your users. Additional guidance, specific to each form field, is provided in each component's guidance section.

## Best practices

- Keep forms as simple as possible – only ask for what's absolutely needed.
- Display form fields in the same order in HTML as they appear on the screen. Do not use CSS to rearrange the form fields. Screen readers and keyboards navigate forms in the order they appear in the HTML.
- Ensure there's sufficient spacing between form fields. Your fields shouldn't feel cramped and users shouldn't confuse which labels and hint text belong to which fields. Use the [margin](/utilities/margin/) or [padding](/utilities/padding/) utility classes, if necessary, to add extra spacing.
- Each field should have a [`<label>`](/components/form-label/).

### Required and Optional fields

If most of the fields in a form are required, indicate the few that are optional. If most of the fields in a form are optional, indicate the few that are required. When indicating what form fields are either required or optional, always use text. Use the [`requirementLabel` prop on the `Label` component](/components/label/#usage).

Whichever choice you choose, ensure the pattern is consistent when the form is split across multiple pages.

## Learn more

- [Design Better Forms](https://uxdesign.cc/design-better-forms-96fadca0f49c)
- [Website Forms Usability: Top 10 Recommendations](https://www.nngroup.com/articles/web-form-design/)
- [Form Design Quick Fix: Group Form Elements Effectively Using White Space](https://www.nngroup.com/articles/form-design-white-space/)