Forms Documentation

Overview

TBit Forms is a powerful form builder and renderer that allows you to create dynamic, embeddable forms with advanced field types, validation, and integrations.

Supported Field Types

Field TypeDescriptionValidation
TEXTSingle-line text inputRequired, min/max length
EMAILEmail address inputEmail format validation
TELPhone number inputPhone format validation
URLWebsite URL inputURL format validation
NUMBERNumeric inputNumber validation, min/max
TEXTAREAMulti-line text inputRequired, max length
SELECTDropdown selectionRequired, valid option
RADIORadio button groupRequired, single selection
CHECKBOXCheckbox groupMultiple selections
DATEDate pickerValid date format
DATETIME-LOCALDate and time pickerValid datetime format
TIMETime pickerValid time format
BOOLEANToggle switchTrue/false value

Form Schema

Forms follow the @tbit-io/types schema structure:

interface Form {
  agentId: ObjectId;
  name: string;
  description: string;
  fields: FormField[];
  status: "DRAFT" | "PUBLISHED" | "ARCHIVED" | "DESACTIVATED";
  created_at: Date;
  updated_at: Date;
}
interface StandardField {
  id: string;
  type: "STANDARD";
  name: string;
  label: string;
  inputType: "TEXT" | "EMAIL" | "NUMBER" | ...;
  required: boolean;
  requestFromUser: boolean;
  placeholder?: string;
  description?: string;
  options?: string[];
}

Customization

Theme Customization

Forms automatically adapt to your chosen theme (light or dark). You can switch themes using the data-theme attribute.

Size Customization

Control the form dimensions using data-width and data-height attributes. Use “auto” for responsive sizing.

Custom Styling

Forms are built with TBit's design system. All components follow the brand guidelines and are fully responsive.

Best Practices

Use appropriate field types - Choose the right input type for better UX and built-in validation
Provide clear labels - Make sure field labels are descriptive and easy to understand
Add helpful descriptions - Use the description field to provide additional context
Mark required fields - Clearly indicate which fields are required
Test on mobile - Ensure your forms work well on all device sizes
Handle submissions - Implement proper success/error handling

Examples