Field Types

Raven Form Engine supports 22 field types out of the box.

Text-family Fields

Preview

text

email

tel

url

number

password

Code

const fields: FormField[] = [
  { name: "text", type: "text", label: "Text" },
  { name: "email", type: "email", label: "Email" },
  { name: "tel", type: "tel", label: "Phone" },
  { name: "url", type: "url", label: "Website" },
  { name: "number", type: "number", label: "Number" },
  { name: "password", type: "password", label: "Password" },
];

---

Textarea

Preview

Biography

Code

{ name: 'bio', type: 'textarea', label: 'Biography', colSpan: 12 }

---

Date

Preview

Birthday

Start Time (time)

type: time

Code

{ name: 'birthday',  type: 'date',     label: 'Birthday',   colSpan: 6 },
{ name: 'startTime', type: 'time',     label: 'Start Time', colSpan: 6 },
{ name: 'meeting',   type: 'datetime', label: 'Meeting',    colSpan: 12 },

---

Selection Fields

Preview

Country (select)Select…United StatesUnited KingdomCanada

Skills (multiselect)

ReactTypeScriptNode.js

Plan (radio)

FreeProEnterprise

Code

{ name: 'country',     type: 'select',      label: 'Country',  options: [...] },
{ name: 'skills',      type: 'multiselect', label: 'Skills',   options: [...] },
{ name: 'plan',        type: 'radio',       label: 'Plan',     options: [...] },

---

Toggle Fields

Preview

Accept Terms and Conditions

Enable Dark Mode

Code

{ name: 'accept',   type: 'checkbox', label: 'Accept Terms' },
{ name: 'darkMode', type: 'switch',   label: 'Dark Mode'    },

---

Special Fields

Preview

OTP Code (6 digits)

Volume

50

Rating

Brand Color

#6366f1

Code

{ name: 'otp',    type: 'otp',    label: 'OTP Code' },
{ name: 'volume', type: 'range',  label: 'Volume',     componentProps: { min: 0, max: 100 } },
{ name: 'stars',  type: 'rating', label: 'Rating' },
{ name: 'accent', type: 'color',  label: 'Brand Color', defaultValue: '#6366f1' },

---

Custom Render

For full control use type: "custom" with a render function:

{
  name: 'avatar',
  type: 'custom',
  label: 'Avatar',
  render: ({ value, onChange, error }) => (
    <MyAvatarUploader value={value as string} onChange={onChange} error={error} />
  ),
}

---

Field Types Reference

Type	Category
text email tel url number password	Text inputs
textarea	Long text
date time datetime	Date / time
select multiselect radio	Selection
checkbox switch	Toggles
otp file range color rating	Special
repeater	Compound row group
custom	Escape hatch