Skip to content
5.3.3

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

bash
npm install @nib-components/form

Usage

jsx
import Form from '@nib-components/form';

Interactive demo

Raise an issue

We just need your first name.
Be as specific as you can.
Are you an nib customer?
Are you human?
jsx

Props

PropTypeDefaultDescription
id (required)stringThe form id.
name (required)stringThe form name.
titlestringThe form title.
containerWidthstring'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.
spaceChildrenbooleantrueWhether or not to apply consistent spacing to all direct children of the form.
onSubmitfunctionThe function to call on form submission.
formModestringDefined by the themeCan be one of "white" or "light".
isCompactbooleanfalseAdd 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.