Form Master Component Best Practices

Here is the process of how I designed the Form Component after taking inspiration various other design systems.

Why I created it?

Form component plays a crucial role in providing relatable data to users and configure the options.

How I created it?

I used different components in it such as:
- Tabs
- Alerts and Notifications
- Toggle field
- Input field
- Checkbox
- Buttons

When I was designing “form component” before giving the final design this is how I made some rough sketches:

I created in the universally used width sizes such as 400, 600 and 800.

Form Component with width size of 800px

Form Component with width size of 600px

Form Component with width size of 400px

Playing around with permutation and combination method I created it’s various variants.

I created 876 variants of it.

Some of the most common variant here are:

• Label + Alerts + Input Field + CTA
• Label + Input Filed + CTA
• Label + Tabs +Input Filed + CTA
• Label + Tabs + Alerts + Input Field + CTA
• Label + Input Field + Checkbox + CTA

What are your thoughts on it?