# UI Data Types Reference

> Complete reference for Supamode UI data types. Choose the right input control for each column to give your team the best editing experience.

*Canonical: https://makerkit.dev/docs/supamode/configuration/data-types*

---

The UI Data Type determines how Supamode renders input controls for a column. Setting the correct type gives your team appropriate inputs, validation, and formatting for each field.

## How Data Types Work

Supamode infers types from PostgreSQL metadata:
- `text` columns default to Plain Text
- `boolean` columns get a toggle switch
- `timestamp` columns get a date picker
- `jsonb` columns get a JSON editor

You can override these defaults to better match your data. For example, a `text` column storing email addresses should use the Email type for proper validation and formatting.

## Data Type Reference

### Text Types

#### Plain Text

Single-line text input for short strings.

**Input control:** `<input type="text">`
**Best for:** Names, titles, slugs, short identifiers
**Table display:** Truncated if too long

**Example columns:** `first_name`, `title`, `slug`

#### Long Text

Multi-line textarea with auto-resize.

**Input control:** `<textarea>`
**Best for:** Descriptions, bios, notes, any multi-line content
**Table display:** First line with ellipsis

**Example columns:** `description`, `bio`, `notes`

#### Markdown

Rich Markdown editor with toolbar and live preview.

**Input control:** Markdown editor with formatting buttons
**Best for:** Blog content, documentation, formatted text
**Table display:** Plain text preview (no formatting)
**Stored as:** Raw Markdown string

**Example columns:** `content`, `body`, `readme`

#### HTML

WYSIWYG rich text editor.

**Input control:** Visual editor with formatting, links, embeds
**Best for:** Marketing content, email templates, rich descriptions
**Table display:** Plain text preview (tags stripped)
**Stored as:** Sanitized HTML

**Example columns:** `html_content`, `email_body`

### Contact Types

#### Email

Email input with validation.

**Input control:** `<input type="email">`
**Validation:** Must be valid email format
**Table display:** Email with copy button and mail icon
**Best for:** Email address columns

**Example columns:** `email`, `contact_email`, `notification_email`

#### Phone

Telephone input.

**Input control:** `<input type="tel">`
**Table display:** Phone number with copy button
**Best for:** Phone number columns

**Example columns:** `phone`, `mobile`, `contact_number`

#### URL

URL input with validation.

**Input control:** `<input type="url">`
**Validation:** Must be valid URL
**Table display:** Clickable link with external icon
**Best for:** Website URLs, links, references

**Example columns:** `website`, `profile_url`, `source_url`

#### Address

Structured address input with multiple fields.

**Input control:** Separate inputs for street, city, state, zip, country
**Stored as:** JSON object
**Table display:** Formatted single-line address

**Example columns:** `address`, `billing_address`, `shipping_address`

**JSON structure:**
```json
{
  "street": "123 Main St",
  "city": "San Francisco",
  "state": "CA",
  "zip": "94102",
  "country": "USA"
}
```

### Numeric and Financial Types

#### Integer

Whole number input.

**Input control:** Number input (no decimals)
**Table display:** Formatted number
**Best for:** Counts, quantities, IDs

#### Float

Decimal number input.

**Input control:** Number input with decimals
**Table display:** Formatted number
**Best for:** Measurements, ratings, percentages

#### Currency

Number input with currency formatting.

**Input control:** Number input with currency symbol
**Configuration:** Select currency code (USD, EUR, GBP, etc.)
**Table display:** Formatted with currency symbol and decimals
**Stored as:** Number (cents or full amount based on your schema)

**Example columns:** `price`, `amount`, `total`

#### Percentage

Number input with percentage display.

**Input control:** Number input
**Table display:** Number with % suffix
**Best for:** Rates, discounts, completion percentages

**Example columns:** `discount_rate`, `tax_rate`, `progress`

### Date and Time Types

#### Date

Date picker.

**Input control:** Calendar date picker
**Stored as:** ISO date string or timestamp
**Table display:** Localized date format

#### DateTime

Date and time picker.

**Input control:** Calendar + time picker
**Table display:** Localized date and time

#### Time

Time picker only.

**Input control:** Time input
**Table display:** Formatted time

### Boolean Type

#### Boolean

Toggle switch.

**Input control:** On/off switch
**Table display:** Checkmark or X icon
**Best for:** Flags, status toggles

**Example columns:** `is_active`, `is_published`, `email_verified`

### Selection Types

#### List

Dropdown from predefined options.

**Input control:** Select dropdown
**Configuration:** Define available options
**Best for:** Enums, status fields, categories

**Example columns:** `status`, `type`, `category`

### Visual Types

#### Color

Color picker input.

**Input control:** Color picker with hex/RGB input
**Table display:** Color swatch with hex code
**Stored as:** Hex string (e.g., `#FF5733`)

**Example columns:** `brand_color`, `theme_color`, `accent`

### File Types

For file types, you also need to configure [storage settings](./storage).

#### File

General file upload.

**Input control:** File picker/drag-and-drop
**Table display:** Filename with download link
**Best for:** Documents, PDFs, any file type

**Example columns:** `attachment`, `document`, `resume`

#### Image

Image upload with preview.

**Input control:** Image picker with preview
**Table display:** Thumbnail preview
**Best for:** Photos, avatars, graphics

**Example columns:** `avatar`, `cover_image`, `thumbnail`

#### Audio

Audio file upload with player.

**Input control:** Audio file picker
**Table display:** Audio player
**Best for:** Music, podcasts, voice recordings

**Example columns:** `audio_file`, `podcast_episode`

#### Video

Video upload with player.

**Input control:** Video file picker
**Table display:** Video player/thumbnail
**Best for:** Videos, recordings

**Example columns:** `video_url`, `intro_video`

## PostgreSQL to UI Type Mapping

Supamode auto-detects types based on PostgreSQL column types:

| PostgreSQL Type | Default UI Type |
|-----------------|-----------------|
| `text`, `varchar`, `char` | Plain Text |
| `boolean` | Boolean |
| `integer`, `int4`, `int8` | Integer |
| `numeric`, `decimal`, `float4`, `float8` | Float |
| `date` | Date |
| `timestamp`, `timestamptz` | DateTime |
| `time`, `timetz` | Time |
| `json`, `jsonb` | JSON Editor |
| `uuid` | Plain Text |
| `bytea` | File |

## When to Override the Default

Override the auto-detected type when:

| Scenario | Override To |
|----------|-------------|
| `text` column stores emails | Email |
| `text` column stores URLs | URL |
| `text` column stores Markdown | Markdown |
| `text` column stores HTML | HTML |
| `text` column stores file paths | File/Image |
| `numeric` column is money | Currency |
| `numeric` column is percentage | Percentage |
| `text` column has enum values | List |
| `text` column stores colors | Color |
| `text` column stores phones | Phone |

## Configuration Tips

### Use Specific Types

Don't leave everything as Plain Text. Specific types provide:
- Better input controls (date pickers, color pickers)
- Input validation (email format, URL format)
- Better table formatting (currency, percentages)
- Improved UX (copy buttons, preview)

### Match Your Schema

If your PostgreSQL column has constraints, match them in the UI type:
- `CHECK` constraint for specific values → List type
- `email` in column name → Email type
- `_url` suffix → URL type

### Consider the User

Choose types based on who edits the data:
- Technical users: Plain Text is fine
- Non-technical users: Use specific types with validation
- Content editors: Markdown or HTML editors

{% faq
   title="Frequently Asked Questions"
   items=[
     {"question": "Can I create custom data types?", "answer": "No. Supamode has a fixed set of UI data types. For custom needs, use the closest type or store the data as JSON and use the JSON editor."},
     {"question": "Does changing the UI type affect the database?", "answer": "No. UI types only control how the Data Explorer renders inputs and displays values. Your PostgreSQL column type stays the same."},
     {"question": "Why isn't my file upload working?", "answer": "File types (File, Image, Audio, Video) require storage configuration. Set up the bucket name and path template in the column's storage settings."},
     {"question": "Can I validate input beyond what the type provides?", "answer": "UI types provide basic validation. For complex validation, use PostgreSQL CHECK constraints or database triggers. Supamode will show constraint violation errors."},
     {"question": "How do I handle JSONB columns?", "answer": "JSONB columns default to a JSON editor. For structured JSON (like addresses), consider the Address type. Otherwise, the JSON editor provides syntax highlighting and validation."}
   ]
/%}