Form inputs

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: "name@example.com"
});

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
Multiple choice
Horizontal layout

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

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

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

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'"
  }
});

Get Started

Core Concepts

Guides

Examples

Text input

Basic example

Multiline text

Available parameters

Email input

URL input

Telephone input

Parameters

Password input

Number input

Units

Select box

Options with custom values

Choice input

Custom values

Picture choice

Parameters

Rating input

Icon options

Opinion scale

Parameters

Date and time inputs

File input

Image-only uploads

Parameters

Shared parameters

Next steps

Theming

Localization

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Examples

Documentation Index

​Text input

​Basic example

​Multiline text

​Available parameters

​Email input

​URL input

​Telephone input

​Parameters

​Password input

​Number input

​Units

​Select box

​Options with custom values

​Choice input

​Custom values

​Picture choice

​Parameters

​Rating input

​Icon options

​Opinion scale

​Parameters

​Date and time inputs

​File input

​Image-only uploads

​Parameters

​Shared parameters

​Next steps

Theming

Localization

Build docs developers (and LLMs) love

Text input

Basic example

Multiline text

Available parameters

Email input

URL input

Telephone input

Parameters

Password input

Number input

Units

Select box

Options with custom values

Choice input

Custom values

Picture choice

Parameters

Rating input

Icon options

Opinion scale

Parameters

Date and time inputs

File input

Image-only uploads

Parameters

Shared parameters

Next steps