Our approach to forms
Forms are a key part of user interaction, and our design system ensures they are consistent, accessible, and easy to use. We achieve this by using FormKit, a form framework that makes creating production-ready forms straightforward while keeping them visually aligned with our design standards. See the form design patterns for best practices.
Figma components and FormKit integration
To streamline the design and development process, we provide Figma components that visually match FormKit components. This means forms designed in Figma can be easily implemented in code using FormKit, ensuring consistency from design to development. Designers and developers can work together seamlessly, reducing the need for custom solutions and keeping everything aligned.
Theming and customisation
Our design system extends FormKit's "Genesis" theme with our own styles. We provide a CSS file that maps FormKit’s variables to our design system variables, ensuring that all forms look consistent.
Accessibility
Creating accessible forms can be challenging, but FormKit helps by automatically generating accessible HTML. This means that form elements built with our design system meet accessibility standards, making it easier to create forms that everyone can use.
Extensibility
While FormKit handles most form needs, there may be times when custom form elements are required, and FormKit has a flexible API that allows us to build custom inputs when required. This ensures that any gaps in form components are filled, keeping your forms both functional and aligned with our design principles.