Select box
Create select boxes in your forms.
Last updated
Was this helpful?
.svg?alt=media&token=b937a570-8b12-41ee-be22-892b41b84d55)
Create select boxes in your forms.
Last updated
Was this helpful?
Use the selectBox() function to create select boxes in your forms. It uses the HTML <select> element which provides a dropdown list of options.
Generates the following Markdown-like syntax:
Add the required parameter to make the field mandatory:
Generates the following Markdown-like syntax:
The following is the overview of the function:
name
string
A unique name for your form field that you'll use to identify the user's response.*
params
object
*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.
These parameters are common to all form fields:
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[]
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 }
options (required)
Array<string | { label: string, value?: string }>
Array of options that can be either strings (e.g., ["Option 1", "Option 2"]) or objects with a label for display text and an optional value (e.g., [{ label: "Option 1", value: "opt1" }]). When using objects, if value is not provided, label is used as the value.
selected
string
Pre-selected option value.
placeholder
string
Sets the placeholder option of the select.
Value-label pairs allow different values to be stored than what's shown to users. The label appears in the dropdown for users to select, while the value is stored in the form data. This pattern is particularly useful for storing concise identifiers in a database while displaying more descriptive text in the interface.
Please note, for selected to work with value-label pairs, it must contain the value, not the label.
Generates the following Markdown-like syntax:
Generates the following Markdown-like syntax:
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 select field.
Generates the following Markdown-like syntax:
Please see the available CSS utility classes.
Conditionally show or hide a select box 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 framework select will only show up if the user indicates they are a developer.
Generates the following Markdown-like syntax:
An object containing all the configuration parameters for your select box field (see the below for the full list of options).
The CSS class names of the form field. .
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 expression. .
