Multi-Select
A dropdown that allows respondents to choose multiple options simultaneously.
Overview
The Multi-Select field extends the standard Select dropdown to allow choosing more than one option. Selected values are displayed as removable tags/chips inside the input. The field stores an array of selected values in the submission.
You can limit the number of selections using maxSelections. Like the Select field, options can be static or loaded from an API.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| options | Option[] | [] | Array of { label, value } objects. |
| maxSelections | number | undefined | Maximum number of items the user may select. |
| minSelections | number | undefined | Minimum number of items that must be selected. |
| searchable | boolean | true | Whether to show a search input inside the dropdown. |
JSON Schema
{
"type": "multi-select",
"label": "Preferred Technologies",
"name": "technologies",
"required": true,
"placeholder": "Select all that apply",
"maxSelections": 5,
"options": [
{ "label": "React", "value": "react" },
{ "label": "Vue", "value": "vue" },
{ "label": "Angular", "value": "angular" },
{ "label": "Svelte", "value": "svelte" },
{ "label": "Next.js", "value": "nextjs" }
]
}