# Forms

Forms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.

Tabs: [About](/patterns/forms/forms.about.md) · [Accessibility](/patterns/forms/forms.accessibility.md) · [Resources](/patterns/forms/forms.resources.md)

## Articles

If you have a need to explore further the different ways of designing effective and pleasant forms, these are some resources that we've found helpful:

- [Usability Pitfalls of Disabled Buttons, and How To Avoid Them — Smashing Magazine](https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/)
- [A Complete Guide To Live Validation UX — Smashing Magazine](https://www.smashingmagazine.com/2022/09/inline-validation-web-forms-ux/)
- [How to Report Errors in Forms: 10 Design Guidelines](https://www.nngroup.com/articles/errors-forms-design-guidelines/)
- [Zendesk Garden - Disabled Buttons](https://garden.zendesk.com/patterns/buttons#disabled)
- [How to design forms](https://www.bbc.co.uk/gel/features/how-to-design-forms)
- [The Anatomy of Accessible Forms: The Problem with Placeholders](https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders)

## Other design systems

These are design systems we've been inspired by for these guidelines:

- [Primer](https://primer.style/ui-patterns/forms/overview#form-control-anatomy)
- [Spectrum](https://spectrum.adobe.com/page/text-field/)
- [Atlassian](https://atlassian.design/patterns/forms)

## Related components

- [Form control](/components/web/form-control/form-control.guidelines)
- [Input](/components/web/input/input.guidelines)
- [Button](/components/web/button/button.guidelines)