> ## Documentation Index
> Fetch the complete documentation index at: https://docs.salesive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Field Types

> Complete reference for all available field types in Salesive Form Builder

Salesive Form Builder supports multiple field types to collect different kinds of configuration data. Each field type has specific properties and validation rules.

## Text Fields

Text fields collect string data with various input types for different use cases.

### Basic Text Input

Single-line text input for short strings.

```json theme={null}
{
    "id": "storeName",
    "type": "text",
    "inputType": "text",
    "label": "Store Name",
    "placeholder": "Enter your store name",
    "default": "My Store",
    "required": true
}
```

<ParamField path="inputType" type="string" required>
  Must be `"text"` for single-line input
</ParamField>

<ParamField path="placeholder" type="string">
  Example text shown in empty field
</ParamField>

### Textarea

Multi-line text input for longer content.

```json theme={null}
{
    "id": "aboutUs",
    "type": "text",
    "inputType": "textarea",
    "label": "About Us Description",
    "placeholder": "Tell your story...",
    "default": "",
    "required": false
}
```

<ParamField path="inputType" type="string" required>
  Must be `"textarea"` for multi-line input
</ParamField>

**Use cases:** Descriptions, long-form content, paragraphs

### Email Input

Email address input with validation.

```json theme={null}
{
    "id": "contactEmail",
    "type": "text",
    "inputType": "email",
    "label": "Contact Email",
    "placeholder": "email@example.com",
    "required": true
}
```

<ParamField path="inputType" type="string" required>
  Must be `"email"` for email validation
</ParamField>

**Validation:** Ensures valid email format ([user@domain.com](mailto:user@domain.com))

### Phone Number Input

Phone number input with tel keyboard on mobile.

```json theme={null}
{
    "id": "phoneNumber",
    "type": "text",
    "inputType": "tel",
    "label": "Phone Number",
    "placeholder": "+1 (555) 123-4567",
    "required": true
}
```

<ParamField path="inputType" type="string" required>
  Must be `"tel"` for telephone input
</ParamField>

**Note:** Triggers numeric keyboard on mobile devices

### URL Input

URL input with validation.

```json theme={null}
{
    "id": "websiteUrl",
    "type": "text",
    "inputType": "url",
    "label": "Website URL",
    "placeholder": "https://example.com",
    "required": false
}
```

<ParamField path="inputType" type="string" required>
  Must be `"url"` for URL validation
</ParamField>

**Validation:** Ensures valid URL format ([https://domain.com](https://domain.com))

### Number Input

Numeric input with increment/decrement controls.

```json theme={null}
{
    "id": "itemsPerPage",
    "type": "text",
    "inputType": "number",
    "label": "Items Per Page",
    "placeholder": "10",
    "default": "10",
    "required": true
}
```

<ParamField path="inputType" type="string" required>
  Must be `"number"` for numeric input
</ParamField>

**Note:** Value is still stored as string in config

## Media Fields

Media fields allow users to upload or select images, videos, and other files.

### Single Image

Upload a single image file.

```json theme={null}
{
    "id": "logo",
    "type": "media",
    "mediaType": "image",
    "label": "Store Logo",
    "description": "Upload your store logo",
    "default": "https://example.com/logo.png",
    "required": true,
    "multiple": false
}
```

<ParamField path="mediaType" type="string" required>
  Must be `"image"` for image uploads
</ParamField>

<ParamField path="multiple" type="boolean">
  Set to `false` for single file **Default:** `false`
</ParamField>

**Output:** Single URL string

### Multiple Images

Upload multiple image files.

```json theme={null}
{
    "id": "heroBanners",
    "type": "media",
    "mediaType": "image",
    "label": "Hero Banners",
    "description": "Upload hero banner images",
    "default": [
        "https://example.com/banner1.jpg",
        "https://example.com/banner2.jpg"
    ],
    "required": true,
    "multiple": true,
    "minItems": 1,
    "maxItems": 5
}
```

<ParamField path="multiple" type="boolean" required>
  Must be `true` for multiple files
</ParamField>

<ParamField path="minItems" type="number">
  Minimum number of images required
</ParamField>

<ParamField path="maxItems" type="number">
  Maximum number of images allowed
</ParamField>

**Output:** Array of URL strings

### Video Upload

Upload video files.

```json theme={null}
{
    "id": "promotionalVideo",
    "type": "media",
    "mediaType": "video",
    "label": "Promotional Video",
    "description": "Upload your promotional video",
    "required": false
}
```

<ParamField path="mediaType" type="string" required>
  Must be `"video"` for video uploads
</ParamField>

**Supported formats:** MP4, WebM, OGG

### General File Upload

Upload any file type.

```json theme={null}
{
    "id": "policyDocument",
    "type": "media",
    "mediaType": "file",
    "label": "Policy Document",
    "description": "Upload your policy document (PDF)",
    "required": false
}
```

<ParamField path="mediaType" type="string" required>
  Must be `"file"` for general file uploads
</ParamField>

**Note:** Accept all file types; consider adding description with allowed formats

## Color Fields

Color fields provide a color picker interface for selecting brand colors.

### Color Picker

```json theme={null}
{
    "id": "primaryColor",
    "type": "color",
    "label": "Primary Brand Color",
    "default": "#0d65d9",
    "required": true
}
```

<ParamField path="type" type="string" required>
  Must be `"color"` for color picker
</ParamField>

<ParamField path="default" type="string">
  Hex color code (e.g., `"#0d65d9"`)
</ParamField>

**Output:** Hex color code string (e.g., `"#ff6b6b"`)

**Use cases:** Brand colors, theme colors, text colors, background colors

### Multiple Color Palette

Create a full color scheme:

```json theme={null}
{
    "sections": [
        {
            "id": "brand-colors",
            "title": "Brand Colors",
            "fields": [
                {
                    "id": "primaryColor",
                    "type": "color",
                    "label": "Primary Color",
                    "default": "#0d65d9",
                    "required": true
                },
                {
                    "id": "secondaryColor",
                    "type": "color",
                    "label": "Secondary Color",
                    "default": "#64748b",
                    "required": true
                },
                {
                    "id": "accentColor",
                    "type": "color",
                    "label": "Accent Color",
                    "default": "#f59e0b",
                    "required": true
                }
            ]
        }
    ]
}
```

## Select Fields

Select fields provide dropdown menus for choosing from predefined options.

### Single Select

Choose one option from a list.

```json theme={null}
{
    "id": "layoutStyle",
    "type": "select",
    "selectType": "text",
    "label": "Layout Style",
    "description": "Choose the layout for this section",
    "default": "grid",
    "required": true,
    "multiple": false,
    "options": [
        {
            "label": "Grid Layout",
            "value": "grid"
        },
        {
            "label": "List Layout",
            "value": "list"
        },
        {
            "label": "Masonry Layout",
            "value": "masonry"
        }
    ]
}
```

<ParamField path="selectType" type="string" required>
  Value data type: `"text"`, `"number"`, or `"boolean"`
</ParamField>

<ParamField path="multiple" type="boolean">
  Set to `false` for single selection **Default:** `false`
</ParamField>

<ParamField path="options" type="array" required>
  Array of option objects with `label` and `value` properties
</ParamField>

**Output:** Single value (string, number, or boolean depending on `selectType`)

### Multi Select

Choose multiple options from a list.

```json theme={null}
{
    "id": "enabledFeatures",
    "type": "select",
    "selectType": "text",
    "label": "Enabled Features",
    "description": "Select which features to enable",
    "default": ["wishlist", "cart"],
    "required": true,
    "multiple": true,
    "options": [
        {
            "label": "Wishlist",
            "value": "wishlist"
        },
        {
            "label": "Shopping Cart",
            "value": "cart"
        },
        {
            "label": "Reviews",
            "value": "reviews"
        },
        {
            "label": "Live Chat",
            "value": "chat"
        }
    ]
}
```

<ParamField path="multiple" type="boolean" required>
  Must be `true` for multiple selections
</ParamField>

**Output:** Array of selected values

### Number Select

Select numeric values.

```json theme={null}
{
    "id": "itemsPerPage",
    "type": "select",
    "selectType": "number",
    "label": "Products Per Page",
    "default": 12,
    "required": true,
    "options": [
        {
            "label": "12 items",
            "value": 12
        },
        {
            "label": "24 items",
            "value": 24
        },
        {
            "label": "48 items",
            "value": 48
        }
    ]
}
```

<ParamField path="selectType" type="string" required>
  Must be `"number"` for numeric values
</ParamField>

**Note:** Values in options must be numbers, not strings

### Boolean Select

Select true/false values.

```json theme={null}
{
    "id": "enableNewsletter",
    "type": "select",
    "selectType": "boolean",
    "label": "Newsletter Signup",
    "description": "Show newsletter signup form",
    "default": true,
    "required": true,
    "options": [
        {
            "label": "Enabled",
            "value": true
        },
        {
            "label": "Disabled",
            "value": false
        }
    ]
}
```

<ParamField path="selectType" type="string" required>
  Must be `"boolean"` for true/false values
</ParamField>

**Note:** Values must be boolean `true` or `false`, not strings

## Field Type Summary

<CardGroup cols={2}>
  <Card title="Text" icon="text">
    **Types:** text, textarea, email, tel, url, number **Best for:** Names,
    descriptions, contact info, numbers
  </Card>

  <Card title="Media" icon="image">
    **Types:** image, video, file **Best for:** Logos, banners, backgrounds,
    videos, documents
  </Card>

  <Card title="Color" icon="palette">
    **Output:** Hex color codes **Best for:** Brand colors, theme
    customization
  </Card>

  <Card title="Select" icon="list-check">
    **Types:** text, number, boolean **Best for:** Predefined options,
    feature toggles, layouts
  </Card>
</CardGroup>

## Validation Rules

### Required Fields

```json theme={null}
{
    "required": true
}
```

Users must fill required fields before submitting the form.

### Media Constraints

```json theme={null}
{
    "multiple": true,
    "minItems": 2,
    "maxItems": 8
}
```

Control the number of media files users can upload.

### Default Values

Always provide sensible defaults to improve user experience:

```json theme={null}
{
    "default": "Default value"
}
```

## Best Practices

<Tip>
  **Choose the Right Input Type** - Use `tel` for phone numbers (mobile
  keyboard optimization) - Use `email` for email addresses (validation +
  mobile keyboard) - Use `textarea` for long-form content - Use `select` when
  you have predefined options
</Tip>

<Warning>
  **Validation Considerations** - Mark essential fields as `required: true` -
  Set realistic `minItems` and `maxItems` for media uploads - Provide clear
  descriptions for complex fields - Test all validation rules in preview mode
</Warning>

<Check>
  **Improve User Experience** - Always provide helpful placeholder text - Set
  sensible default values - Group related fields in sections - Add
  descriptions for fields that need clarification
</Check>

## Next Steps

<Card title="View Examples" icon="lightbulb" href="/form-builder/examples">
  See real-world examples of forms using different field types
</Card>