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