{ "component": "list-input", "fixtures": [ { "name": "default", "options": { "addButtonName": "requirement", "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "id": "my-list", "labelPrefix": "Requirements'", "maxItems": 10, "name": "requirements" }, "hidden": false, "description": "With JavaScript enabled, a list input should display at least two inputs, including at least one empty input.", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work?\n \n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n\n
\n
" }, { "name": "with existing values", "options": { "addButtonName": "requirement", "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "id": "my-list", "labelPrefix": "Requirements'", "maxItems": 10, "name": "requirements", "items": [ { "value": "Professionally initiate innovative partnerships." }, { "value": "Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer." } ] }, "hidden": false, "description": "Any existing values should be displayed, along with one extra empty input.", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work?\n \n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n\n
\n
" }, { "name": "with hint", "options": { "id": "my-list-2", "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "name": "requirements", "addButtonName": "requirement", "hint": { "text": "Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)" }, "maxItems": 3, "labelPrefix": "Requirements'", "items": [ { "value": "Professionally initiate innovative partnerships." } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work?\n \n
\n Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)\n
\n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n\n
\n
" }, { "name": "is optional", "options": { "id": "my-list-2", "optional": true, "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "name": "requirements", "addButtonName": "requirement", "maxItems": 3, "labelPrefix": "Requirements'", "items": [ { "value": "Professionally initiate innovative partnerships." } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work? (Optional)\n \n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n\n
\n
" }, { "name": "with error", "options": { "id": "my-list-2", "errorMessage": { "text": "Enter at least one requirement" }, "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "labelPrefix": "Requirements'", "name": "requirements", "addButtonName": "requirement", "maxItems": 3 }, "hidden": false, "description": "An error at the component-level can be defined.", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work?\n \n

\n Error: Enter at least one requirement\n

\n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n\n
\n
" }, { "name": "with error for specific fields", "options": { "id": "my-list-3", "fieldset": { "legend": { "text": "What requirements are essential to carry out the work?" } }, "hint": { "text": "Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)" }, "name": "requirements", "addButtonName": "requirement", "labelPrefix": "Requirements'", "maxItems": 3, "items": [ { "value": "Professionally initiate innovative partnerships." }, { "value": "Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer.", "errorMessage": { "text": "Feature must be 5 words or fewer" } }, { "value": "Saturday Night Fever", "errorMessage": { "text": "Enter a number" } } ] }, "hidden": false, "description": "An error for each input can be defined.", "previewLayoutModifiers": [], "html": "
\n
\n \n What requirements are essential to carry out the work?\n \n
\n Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)\n
\n \n\n
\n
\n
\n \n \n
\n \n
\n
\n
\n
\n \n

\n Error: Feature must be 5 words or fewer\n

\n \n
\n \n
\n
\n
\n
\n \n

\n Error: Enter a number\n

\n \n
\n \n
\n
\n
\n \n\n
\n
" } ] }