Form inputs

Learn about all available input types in Forms.md and how to use them

Forms.md provides a comprehensive set of input types for building multi-step forms and surveys. Each input type is designed with accessibility and user experience in mind.

Text input

Collect single-line text responses from users.

Basic example

const composer = new Composer({ title: "Contact Form" });

composer.textInput("name", {
  question: "What is your name?",
  required: true,
  placeholder: "Enter your full name"
});

Multiline text

For longer text responses, use the multiline parameter to render a textarea:

composer.textInput("feedback", {
  question: "Tell us about your experience",
  multiline: true,
  maxlength: 500
});

Available parameters

All input types share common parameters like question, required, description, fieldSize, labelStyle, subfield, disabled, and autofocus.

Parameter	Type	Description
placeholder	string	Sets the placeholder text
multiline	true	Renders as textarea for multi-line input
maxlength	number	Maximum allowed characters
pattern	string	Regex pattern for validation
value	string	Default value

Email input

Capture email addresses with built-in validation.

composer.emailInput("email", {
  question: "What is your email address?",
  required: true,
  placeholder: "[e-mail]"
});

Email inputs use the browser’s native email validation.

URL input

Collect website URLs with proper validation.

composer.urlInput("website", {
  question: "What is your website?",
  placeholder: "https://example.com"
});

Telephone input

Capture phone numbers with international country code support.

composer.telInput("phone", {
  question: "What is your phone number?",
  required: true,
  country: "US",
  availableCountries: ["US", "CA", "GB"]
});

Parameters

Parameter	Type	Description
country	string	Default country code (e.g., “US”)
availableCountries	string[]	Array of allowed country codes

The telephone input automatically displays the country calling code selector and formats the placeholder based on the selected country.

Password input

Securely capture passwords with masked input.

composer.passwordInput("password", {
  question: "Create a password",
  required: true,
  pattern: "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"
});

Number input

Collect numeric values with optional units and constraints.

composer.numberInput("price", {
  question: "What is your budget?",
  required: true,
  min: 0,
  max: 10000,
  step: 100,
  unit: "$"
});

Units

Display units before or after the input:

composer.numberInput("weight", {
  question: "What is your weight?",
  unitEnd: "kg"
});

Select box

Let users choose from a dropdown list.

composer.selectBox("country", {
  question: "Where are you located?",
  required: true,
  options: ["United States", "Canada", "United Kingdom"],
  placeholder: "Select a country"
});

Options with custom values

composer.selectBox("plan", {
  question: "Choose your plan",
  options: [
    { label: "Free Plan", value: "free" },
    { label: "Pro Plan ($29/mo)", value: "pro" },
    { label: "Enterprise", value: "enterprise" }
  ],
  selected: "free"
});

Choice input

Radio buttons or checkboxes for selecting options.

Single choice

composer.choiceInput("plan", {
  question: "Select your subscription plan",
  choices: ["Free", "Pro", "Enterprise"]
});

Multiple choice

composer.choiceInput("interests", {
  question: "What topics interest you?",
  choices: ["Technology", "Design", "Marketing", "Sales"],
  multiple: true,
  checked: ["Technology"]
});

Horizontal layout

composer.choiceInput("satisfaction", {
  question: "How satisfied are you?",
  choices: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied"],
  horizontal: true
});

Custom values

composer.choiceInput("size", {
  question: "Select your size",
  choices: [
    { label: "Small", value: "S" },
    { label: "Medium", value: "M" },
    { label: "Large", value: "L" }
  ]
});

Picture choice

Visual selection with images.

composer.pictureChoice("product", {
  question: "Which product do you prefer?",
  choices: [
    { label: "Product A", value: "a", image: "/images/product-a.jpg" },
    { label: "Product B", value: "b", image: "/images/product-b.jpg" },
    { label: "Product C", value: "c", image: "/images/product-c.jpg" }
  ],
  supersize: true
});

Parameters

Parameter	Type	Description
multiple	true	Allow multiple selections
supersize	true	Make pictures larger
hideLabels	true	Hide text labels
checked	string[]	Pre-selected values

Rating input

Collect star or heart ratings.

composer.ratingInput("satisfaction", {
  question: "How would you rate our service?",
  outOf: 5,
  icon: "star"
});

Icon options

// Heart icon
composer.ratingInput("love", {
  question: "How much do you love this feature?",
  outOf: 10,
  icon: "heart",
  hideLabels: true
});

Valid outOf values range from 1 to 10. The icon parameter accepts “star”, “heart”, or “hearts”.

Opinion scale

Net Promoter Score (NPS) style questions.

composer.opinionScale("recommend", {
  question: "How likely are you to recommend us?",
  startAt: 0,
  outOf: 10,
  labelStart: "Not likely at all",
  labelEnd: "Extremely likely"
});

Parameters

Parameter	Type	Description
startAt	0 or 1	Starting number
outOf	number	Maximum value (5-10)
labelStart	string	Label for start of scale
labelEnd	string	Label for end of scale

Date and time inputs

Datetime

composer.datetimeInput("appointment", {
  question: "When would you like to schedule?",
  min: "2024-01-01T09:00",
  max: "2024-12-31T17:00"
});

Date and time inputs follow ISO 8601 format standards.

File input

Allow users to upload files.

composer.fileInput("resume", {
  question: "Upload your resume",
  required: true,
  sizeLimit: 5,
  imageOnly: false
});

Image-only uploads

composer.fileInput("avatar", {
  question: "Upload your profile picture",
  imageOnly: true,
  sizeLimit: 2,
  currentFile: "https://example.com/current-avatar.jpg"
});

Parameters

Parameter	Type	Description
sizeLimit	number	Maximum file size in MB (default: 10)
imageOnly	true	Accept only image files
currentFile	string	URL of existing file

File uploads require proper backend handling. When using Google Sheets integration, files are automatically uploaded to Google Drive.

Shared parameters

All input types support these common parameters:

Styling and layout

Parameter	Type	Description
fieldSize	”sm”	Make field smaller
labelStyle	”classic”	Classic label appearance
subfield	true	Smaller labels (for nested fields)

Behavior

Parameter	Type	Description
disabled	true	Disable the input
autofocus	true	Auto-focus when slide becomes active

HTML attributes

composer.textInput("custom", {
  question: "Custom field",
  id: "customField",
  classNames: ["special", "highlighted"],
  attrs: [
    { name: "data-track", value: "analytics" },
    { name: "aria-label", value: "Custom input" }
  ]
});

Display conditions

composer.textInput("companyName", {
  question: "What is your company name?",
  displayCondition: {
    dependencies: ["accountType"],
    condition: "accountType === 'business'"
  }
});

Next steps

Theming

Customize the appearance of your forms

Localization

Support multiple languages