Inputs & Textarea
Pull to Refresh
React Grid Layout
Form is a set of components that help to systematically layout and build forms.
Form includes three sub-components to build forms — Form Group, Form Text and Form Feedback.
Form Group can be wrapped around components used in a Form, such as Input or Radio. Form Group has three sizes — large, medium and small. The size controls the spacing between the groups.
Form Text should be used to display informational text that helps the user with data entry.
Form Feedback should be used to display text that provides validation information about a specific input such as an error or a warning. If both Form Text and Form Feedback are used on a component, Form Feedback should replace Form Text until resolved.
Use the status property for components used in Form to provide feedback to the user during form validation.
Form Feedback color is controlled by the status property.
In Form, labels can be placed on top of components or to the left. All labels in a single form should use the same placement.
Form can be designed to have a single column or multiple columns and change layout based on breakpoint. When adding form into a page, be sure to follow the Layout guidelines for responsive breakpoints, margins and gutters.
The recommended placement for action buttons is the right edge of a form. When using right alignment of buttons, the primary action should be the right-most button with the secondary action to the left. If a tertiary action is required, then it should be placed to the far left.
Left alignment is best used for a single button. When using left alignment for multiple buttons, the primary action should be the left-most button with the secondary action to the right. If a tertiary action is required, then it should be placed to the far right.