Number input

Create number inputs in your forms.

Number input

Use the numberInput() function to create number inputs in your forms. It uses the HTML <input type="number"> element which provides built-in number validation.

---

Basic usage

import { Composer } from "formsmd";

const composer = new Composer({
  id: "my-form"
});

composer.numberInput("quantity", {
  question: "How many items would you like?"
});

Generates the following Markdown-like syntax:

#! id = my-form

quantity = NumberInput(
  | question = How many items would you like?
)

Required

Add the required parameter to make the field mandatory:

composer.numberInput("quantity", {
  question: "How many items would you like?",
  required: true
});

Generates the following Markdown-like syntax:

quantity* = NumberInput(
  | question = How many items would you like?
)

---

Function overview

The following is the overview of the function:

numberInput(name: string, params: object)

Arguments

Name	Type	Description
name	string	A unique name for your form field that you'll use to identify the user's response.*
params	object	An object containing all the configuration parameters for your number input field (see the parameters section below for the full list of options).

*Avoid values for the name argument which may be the names of HTML attributes, such as "name", "role", "id", etc. This is because by default, the form's template string is first sanitized using DOMPurify, and these values may be removed to prevent DOM clobbering.

---

Parameters

Shared parameters

These parameters are common to all form fields:

Name	Type	Description
question (required)	string	The main question or label of the form field.
required	true (boolean)	When set, the field becomes required.
description	string	Any extra information that the user may need to fill out the form. Appears right below the question.
fieldSize	"sm"	When set to "sm", the font sizes of the question, description, and answer are made smaller.
labelStyle	"classic"	When set to "classic", the question and description of the form field are made smaller.
subfield	true (boolean)	When set, the question and description of the form field are made smaller. Functionally the same as setting labelStyle to "classic".
disabled	true (boolean)	When set, the input is disabled.
autofocus	true (boolean)	When set, the input will be automatically focused when the parent slide becomes active, or immediately after page load.
id	string	The id attribute of the form field container.
classNames	string[]	The CSS class names of the form field. See the available CSS utility classes.
attrs	Array<{ name: string, value: string }>	Other HTML attributes of the form field. Each attribute has a name and value property.
displayCondition	{ dependencies: string[], condition: string }	Controls when the field is shown. The dependencies lists the fields to watch, and condition is the expression that must be true to show the field. The condition must be a valid Nunjucks expression. See example.

Number input specific parameters

Name	Type	Description
placeholder	string	Sets the placeholder attribute of the input.
min	number	Sets the minimum allowed value.
max	number	Sets the maximum allowed value.
step	number	Sets the stepping interval.
unit	string	Text to display before the input as a unit (e.g., "$", "€"). Purely decorative.
unitEnd	string	Text to display after the input as a unit (e.g., "kg", "%"). Purely decorative.
value	number	If set, this becomes the default value of the input.

---

Examples

Number input with range limits

composer.numberInput("age", {
  question: "What is your age?",
  description: "Must be 18 or older to participate",
  min: 18,
  max: 120,
  required: true
});

Generates the following Markdown-like syntax:

age* = NumberInput(
  | question = What is your age?
  | description = Must be 18 or older to participate
  | min = 18
  | max = 120
)

Number input with unit

composer.numberInput("price", {
  question: "Enter the price",
  unit: "$",
  step: 0.01,
  min: 0,
  required: true
});

Generates the following Markdown-like syntax:

price* = NumberInput(
  | question = Enter the price
  | unit = $
  | step = 0.01
  | min = 0
)

Styled number input with custom attributes

Add CSS classes and other HTML attributes using the classNames and attrs parameters. Please note, these class names and attributes are added to the <div> or <fieldset> container that contains the actual input field(s).

composer.numberInput("quantity", {
  question: "Quantity",
  classNames: ["col-4", "xs:col-6"],
  attrs: [
    { name: "style", value: "font-size: 18px;" }
  ]
});

Generates the following Markdown-like syntax:

[.col-4 .xs:col-6 style="font-size: 18px;"]
quantity = NumberInput(
  | question = Quantity
)

Please see the available CSS utility classes.

Conditional display

Conditionally show or hide a number input field using the displayCondition parameter. It works as follows:

• dependencies lists the fields to watch.

• condition is the expression that must be true to show the field. This must be a valid Nunjucks expression.

For instance, in the example below, the quantity field will only show up if the user wants to make a purchase.

composer.choiceInput("wantToPurchase", {
  question: "Would you like to make a purchase?",
  required: true,
  choices: ["Yes", "No"]
})

composer.numberInput("quantity", {
  question: "How many would you like to purchase?",
  min: 1,
  displayCondition: {
    dependencies: ["wantToPurchase"],
    condition: "wantToPurchase == 'Yes'"
  }
});

Generates the following Markdown-like syntax:

wantToPurchase* = ChoiceInput(
  | question = Would you like to make a purchase?
  | choices = Yes, No
)

::: [{$ wantToPurchase $}]
{% if wantToPurchase == "Yes" %}
quantity = NumberInput(
  | question = How many would you like to purchase?
  | min = 1
)
{% endif %}
:::

Notes

• The unit and unitEnd parameters are purely decorative. They have no effect on the actual value of the input sent during form submission.