Within the design system I developed for Blackstone, a pivotal component was the comprehensive system I established for forms and fields. This aspect played a vital role in fostering a cohesive user experience across our applications. Tasked with the responsibility, I took the lead in creating the complete style guide for these forms and fields, meticulously defining their visual and interaction patterns. These guidelines were subsequently translated into our developer Storybook, enabling seamless collaboration between design and development teams and ensuring consistent implementation of the established design principles across the entire platform.
Labels indicate what sort of information the field requires and should always be short and concise. Labels are placed directly above their input and aligned to the left, if the label is too long, it wraps to another line.
Required fields are all marked with an asterisk and placed at the end of the label.
Focused fields have a black outline when the user clicks in and is able to start typing.
Read only fields will display without an input box to avoid confusion for the user.
Drop Down Menus and Multi-select
The drop down menus showcase what is highlighted with copper and gray when hovered.
When a user clicks on the multi-select input field, the user can select a number of options from the list.
Options are a list of selectable items, option value will be highlighted when the user hovers over.
Tags will show what the user has selected. Each individual tag can be removed by the "x".
Clicking clear will clear all the tags in the input field, this will only appear when one or more items is selected.
