Form
The form component is a simple styled container for our form controls. Forms should be used to collect simple data from our users. Users should be able to complete forms quickly and without confusion.
Installation
npm install @nib-components/form
Usage
import Form from '@nib-components/form';
Interactive demo
Props
Prop | Type | Default | Description |
---|---|---|---|
id (required) | string | The form id. | |
name (required) | string | The form name. | |
title | string | The form title. | |
titleComponent | string | 'h3' | The underlying component of the Form title . Must be one of h1 , h2 , h3 , h4 , h5 , h6 , div , label , span , header . |
containerWidth | string | '768px' | The form will render with a width of 100%, with an internal container to house the fields. This prop controls the width of this internal container. To disable, set to null . |
spaceChildren | boolean | true | Whether or not to apply consistent spacing to all direct children of the form. |
onSubmit | function | The function to call on form submission. | |
formMode | string | Defined by the theme | Can be one of "white" or "light" . |
isCompact | boolean | false | Add compact styles to all child form components. All form fields will be horizontally placed in a flexbox. This should only be used for internal/dashboard/portal style applications. |
Considerations
Forms are best used for simple data gathering and are to be avoided for complex interactions.
It is good practice to include a title for the form. This will provide further clarity about the context of data being gathered.
Use informative error messages as this will help the user to correct any information entered incorrectly.
Independent field validation is prefered for providing clearer and faster feedback to the user so that they are able to complete their goal faster.
We recommend not prefilling fields with placeholder text. Users can mistakenly think they have filled out the field and can also be frustrated when placeholders disappear once the field is entered.