Form Examples

Design Docs
  • Refer to this link for design documentation of spaceweb forms

All form fields have are of md size by default. In case, fields should be of some other size, then size can be passed to fields using componentProps.

Basic Form

Header Title
Header sub copy
Section Header

Form with groups

First Group
description for first group
second group
description for second group
Section Header
Form with all FieldsFull page form
Form with all fields
Enter form properties
Name of the campaign
Section Header Component
Date of Campaign
Press down arrow key to navigate quick select options and tab key to navigate to calendar. Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.
Date of Campaign
Press down arrow key to navigate quick select options and tab key to navigate to calendar. Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.Selected date is 05/09/2024.
Select a time, 12-hour format.
Add Business Hours
open
We will try to re-publish your campaign after this duration.
Add Retry Strategy
open
+1
Press down arrow key to navigate quick select options and tab key to navigate to calendar. Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Important Specifications:

  • Form Container should have 32 px horizontal padding and 16 px vertical padding. This can be achieved by passing px-8 py-4 classes to form container. No additional spacing should be added to the form.

  • <FormHeader/> is used as a separate component along with <Form/>. FormHeader needs to be passed mb-6 class to follow the design guidelines.

  • SectionHeader can be used as a field in fieldConfigMap. To follow the design specifications, SectionHeader must be passed mt-4 as classNames.