Skip to main content

Block types

Here's a full list of all supported blocks:

Content blocks

form, h1 - h6, p, html, css

Form fields

text, email, tel, date, textarea, number, select, radio, checkbox, toggle, file, slider, rating, color submit

Common properties

Many of the blocks support the same properties. In the description of each block you'll find the exact list of properties that it supports.

name

The internal name of the field, used to identify it in submissions. This is required for most input fields.

Example:

name first_name

label

The text displayed to the user as the field's label. This is required for most input fields.

Example:

label First Name

placeholder

Hint text displayed in an input field before the user enters a value. You can use it as an example, but it's not advisable to use it instead of providing a proper label or help text.

Example:

placeholder Jane

validations

Rules to validate user input. See the Validations for a full list of available rules.

Example:

validations required|min:2

help

A help text displayed next to the field to provide extra information or instructions.

Example:

help We will never spam you or share your email with any 3rd party

show

Show the field only if this is set to true. Can be used with conditional logic.

Example - show only if some_field equals to "some value":

show {{ true if some_field=="some value" else false }}

hide

Hide the field only if this is set to true. Can be used with conditional logic.

Example - hide only if some_field has a value:

hide {{ true if some_field else false }}

disabled

If set to true, this will disable the field so the user cannot interact with it. Can be used with conditional logic.

Example - disabled as long as some_field has no value:

disabled {{ true if not some_field else false}}

readonly

If set to true, this will make the field read-only. The user can see and copy the value but cannot change it. Can be used with conditional logic.

Example - readonly as long as some_field has no value:

readonly {{ true if not some_field else false}}

Example - always readonly, without any condition. Useful for output fields:

readonly

attributes

Allows adding custom HTML attributes to non-field blocks h1-h6 and p. It has the following sub-properties:

  • class - Adds one or more CSS classes to the element. You can use common tailwind classes or your own custom classes
  • style - Adds inline CSS styles to the element.

Example:

attributes
class py-6 my-class
style "border-radius: 5px;"

classes

Allows adding classes to form-field blocks, or globally to the form itself. See details in Custom styling

Example:

classes
label text-sky-500
hint my-hint-class

min

The minimum allowed value for numeric, date, or rating inputs.

Example:

min 0

max

The maximum allowed value for numeric, date, or rating inputs.

Example:

max 100

step

The increment/decrement step for numeric inputs like number and slider.

Example:

step 5

options

A list of choices for select, radio, and checkbox fields. Each option should have a label (the text shown to the user) and can have an optional value (the value that is submitted). If value is omitted, the label is used as the value. Note that labels are indented under the property name options, and values are further indented under each label.

Example:

options
Red
value ff0000
Green
Blue

Blocks

form

The form block must be the first block in every Form Descriptor (.fd). It provides metadata about the entire form. It has the following properties:

  • name - Required. the name of the form. Not exposed to users.
  • success-message - The message that users will see when the form is submitted successfully.
  • fail-message - The message that users will see if there was some error while submitting the form. This is not related to validation errors, but rather unexpected errors like network issues.
  • design - This is a property that has several sub-properties related to the design of the form.
    • background - this can be any valid css value that for the background of the entire page. Commonly used with a color value.
    • cover - a URL for a cover image that will appear at the top of the page
    • cover-offset - 0 - 100, default is 50. The cover image is commonly cropped, because it has a max height. This property sets which part of the image will be visible. The default is 50 which means that the center part of the image will be visible. Set this to 0 if you want the top of the image to be visible, or to 100 if you want the bottom of the image to be visible.
  • classes - This property has several sub-properties that correspond to different sections of the form fields (label, hint, input, etc). Use it to defines classes that will be applied globally to the entire form. See custom styling page.
  • meta - This property has several sub-properties that you can use in order to define meta tags on your form page. These meta tags affect how your form would look when being shared in social platforms and messaging apps
    • title – sets the page title and social preview title
    • description – appears in search snippets and social cards
    • image – shown in link previews (Open Graph & Twitter)

Example:

type form
name Event registration form
success-message Thanks for signing up. See you at the event!
fail-message There was an unexpected error. Please try again.
design
background #99ffff
cover https://placehold.co/1920x400?text=Cover%20image
meta
title Super Event registration form
description Sign up to the Super Event and join us learning with 2000 participants
image https://placehold.co/800x600?text=Super%20Event

h1 - h6

These blocks are used to display heading text on your form.

  • text - Required. The content of the heading.
  • attributes - See attributes.
  • show / hide - See show and hide.

Example:

type h2
text Contact Information

p

Displays a paragraph of text.

  • text - Required. The content of the paragraph.
  • attributes - See attributes.
  • show / hide - See show and hide.

Example:

type p
text We'll use this information to get in touch with you.

html

This block allows you to embed raw HTML content directly into your form. Any script will be stripped out. Unlike other fields, this block does not have any named properties. Simply type your HTML and leave an empty line after that.

Important note: Be extra careful when using this block, as you might break the entire page. If you're using form logic to output any field value provided by the user, always use the escape filter to prevent code injection.

Example:

type html
<div style="padding: 10px; border: 1px solid #ccc;">
<strong>Note:</strong> All fields are required.
</div>


css

This block allows you to add custom CSS classes. Unlike other fields, this block does not have any named properties. Simply type your CSS and leave an empty line after that. See more details in custom styling page.

Example:

type css
.my-class {
color: #658273;
}
.another-class {
border: 1px solid red;
}


text

A standard single-line text input field.

Example:

type text
name first_name
label First Name
placeholder John
validations required

email

A text input field for email addresses. Input will be automatically validated to ensure it's a valid email format.

Example:

type email
name user_email
label Your Email
placeholder user@example.com
validations required|email

tel

A text input field for telephone numbers.

Example:

type tel
name phone_number
label Phone
placeholder (555) 123-4567

date

A date picker input field.

Example:

type date
name appointment_date
label Appointment Date
min 2025-08-01
max 2025-08-31

textarea

A multi-line text input field.

Example:

type textarea
name comments
label Additional Comments
rows 4

number

An input for numeric values.

Example:

type number
name quantity
label Quantity
min 1
max 10
step 1

select

A dropdown list for selecting one or more options.

Example:

type select
name country
label Country
options
USA
value us
Canada
value ca
Mexico
value mx

radio

A set of radio buttons, allowing the user to select one option from a list.

Example:

type radio
name payment_method
label Payment Method
options
Credit Card
value cc
PayPal
value paypal

checkbox

A single checkbox or a group of checkboxes for selecting multiple options.

  • name - Required. See name.
  • label - Required. See label.
  • options - If provided, creates a group of checkboxes. If omitted, it's a single checkbox. See options.
  • validations - See validations.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example (single):

type checkbox
name terms
label I agree to the terms and conditions
validations required

Example (group):

type checkbox
name interests
label What are your interests?
options
Sports
Music
Movies

toggle

A switch-style toggle, representing a boolean on/off state.

  • name - Required. See name.
  • label - Required. See label.
  • on-value / off-value - The values submitted when the toggle is on or off. Defaults to true and false.
  • on-value-label / off-value-label - Custom labels displayed for the on/off states.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example:

type toggle
name notifications
label Enable Notifications
on-value yes
off-value no

file

Allows users to upload one or more files.

  • name - Required. See name.
  • label - Required. See label.
  • accept - A comma-separated list of file mime types or extensions the user can upload (e.g., image/*, .pdf, .docx).
  • button-label - Custom text for the upload button.
  • disable-webcam - Set to true to disable webcam as an upload source.
  • disable-screen-capture - Set to true to disable screen capture as an upload source.
  • max-file-size - The maximum size per file (e.g., 5MB, 100KB).
  • max-number-of-files - The maximum number of files that can be uploaded.
  • allowed-file-types - A list of allowed file types.
  • inline - Set to true to display the uploader dialog inline rather than as a modal.
  • height - The height of the uploader widget, when it's inline.
  • locale - Sets the language for the uploader widget.
  • validations - See validations.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example:

type file
name profile_picture
label Profile Picture
accept image/png, image/jpeg
max-file-size 5MB

slider

A slider for selecting a value from a numeric range.

  • name - Required. See name.
  • label - Required. See label.
  • min / max - Required. The minimum and maximum values of the slider. See min and max.
  • step - The increment of the slider. See step.
  • show-input - Set to true to show a numeric input field next to the slider.
  • tooltip - Set to true to permanently show a tooltip that shows the current value.
  • marks - Set to true to show marks along the slider track.
  • mark-labels - Set to true to show labels for the marks.
  • validations - See validations.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example:

type slider
name satisfaction
label Satisfaction Level
min 0
max 10
step 1
show-input

rating

A rating input, typically displayed as a series of stars.

  • name - Required. See name.
  • label - Required. See label.
  • min / max - The range for the rating. Defaults to a 1-5 star rating if not specified. See min and max.
  • validations - See validations.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example:

type rating
name product_rating
label Rate our product
max 5

color

A color picker input

  • name - Required. See name.
  • label - Required. See label.
  • options - If set, shows a preset swatch that users can choose from. See options.
  • validations - See validations.
  • help - See help.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes
  • alpha - A boolean (true/false) that defines whether color transparency can be set. Default is true
  • eye-dropper - A boolean (true/false) that defines whether eye-dropper tool is available for users to sample colors from the page. Default is true.
  • swatch-only - A boolean (true/false) that defines whether only one of the colors defined in the options list can be picked. If set to false, users can pick any color. Default is false.
  • inline - A boolean (true/false) that defines whether the picker widget should be laid out as part of the form rather than appear as a popover. Default is false.

Example:

type color
name shirt_color
label What color would you like your shirt?
validations required
help We recommend the blue
options
Classic white
value #ffffff
Navy blue
value #003366
Soft pink
value #ffb6c1
#F90D1B
eye-dropper
swatch-only
inline true

submit

The button that submits the form. If omitted, a default button will be added with the label "Submit"

  • label - Required. The text displayed on the button (e.g., "Submit", "Send").
  • name - See name.
  • show / hide - See show and hide.
  • disabled - See disabled.
  • readonly - See readonly.
  • classes - See classes

Example:

type submit
label Register Now

Example form

type form
name Event Registration
success-message Thank you for registering! We look forward to seeing you at the event.
design
background #f0f7ff

type h1
text Event Registration

type text
name attendee_name
label Full Name
placeholder Jane Smith
validations required

type email
name email
label Email Address
placeholder jane@example.com
validations required|email

ntype tel
name phone
label Phone Number
placeholder (123) 456-7890
validations required

type select
name ticket_type
label Ticket Type
options
General Admission
value general
VIP
value vip
Student
value student
validations required

type checkbox
name newsletter
label Subscribe to event updates

type submit
label Register Now