{ "component": "select", "fixtures": [ { "name": "default", "options": { "id": "select-1", "name": "select-1", "label": { "text": "Label text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2", "selected": true }, { "value": 3, "text": "GOV.UK frontend option 3", "disabled": true } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with no items", "options": { "id": "select-1", "name": "select-1", "label": { "text": "Horse with no name" }, "items": [] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with selected value", "options": { "id": "select-1", "name": "select-1", "label": { "text": "Label text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" }, { "value": 3, "text": "GOV.UK frontend option 3", "disabled": true } ], "value": 2 }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with hint text and error message", "options": { "id": "select-2", "name": "select-2", "label": { "text": "Label text goes here" }, "hint": { "text": "Hint text goes here" }, "errorMessage": { "text": "Error message goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" }, { "value": 3, "text": "GOV.UK frontend option 3" } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n
\n Hint text goes here\n
\n

\n Error: Error message goes here\n

\n \n
" }, { "name": "with label as page heading", "options": { "id": "select-3", "name": "select-3", "label": { "text": "Label text goes here", "classes": "govuk-label--l", "isPageHeading": true }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2", "selected": true }, { "value": 3, "text": "GOV.UK frontend option 3", "disabled": true } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n

\n \n

\n \n
" }, { "name": "with full width override", "options": { "id": "select-1", "name": "select-1", "classes": "govuk-!-width-full", "label": { "text": "Label text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2", "selected": true }, { "value": 3, "text": "GOV.UK frontend option 3", "disabled": true } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with optional form-group classes", "options": { "id": "select-1", "name": "select-1", "classes": "govuk-!-width-full", "label": { "text": "Label text goes here" }, "formGroup": { "classes": "extra-class" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2", "selected": true }, { "value": 3, "text": "GOV.UK frontend option 3", "disabled": true } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with describedBy", "options": { "id": "with-describedby", "name": "with-describedby", "label": { "text": "Label text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" } ], "describedBy": "test-target-element" }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "attributes", "options": { "id": "with-attributes", "name": "with-attributes", "label": { "text": "Label text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" } ], "attributes": { "data-attribute": "my data value" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "attributes on items", "options": { "id": "with-item-attributes", "name": "with-item-attributes", "label": { "text": "Label text goes here" }, "value": 2, "items": [ { "text": "Option 1", "value": 1, "attributes": { "data-attribute": "ABC", "data-second-attribute": "DEF" } }, { "text": "Option 2", "value": 2, "attributes": { "data-attribute": "GHI", "data-second-attribute": "JKL" } } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with falsey items", "options": { "id": "with-falsey-items", "name": "with-falsey-items", "label": { "text": "Label text goes here" }, "items": [ { "text": "Option 1", "value": 1 }, null, false, "", { "text": "Options 2", "value": 2 } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "hint", "options": { "id": "select-with-hint", "name": "select-with-hint", "label": { "text": "Label text goes here" }, "hint": { "text": "Hint text goes here" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n
\n Hint text goes here\n
\n \n
" }, { "name": "hint and describedBy", "options": { "id": "select-with-hint", "name": "select-with-hint", "label": { "text": "Label text goes here" }, "describedBy": "test-target-element", "hint": { "text": "Hint text goes here" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n
\n Hint text goes here\n
\n \n
" }, { "name": "error", "options": { "id": "select-with-error", "name": "select-with-error", "label": { "text": "Label text goes here" }, "errorMessage": { "text": "Error message" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n

\n Error: Error message\n

\n \n
" }, { "name": "error and describedBy", "options": { "id": "select-with-error", "name": "select-with-error", "label": { "text": "Label text goes here" }, "describedBy": "test-target-element", "errorMessage": { "text": "Error message" }, "items": [ { "value": 1, "text": "GOV.UK frontend option 1" }, { "value": 2, "text": "GOV.UK frontend option 2" } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n

\n Error: Error message\n

\n \n
" }, { "name": "without values", "options": { "name": "colors", "id": "colors", "label": { "text": "Label text goes here" }, "items": [ { "text": "Red" }, { "text": "Green" }, { "text": "Blue" } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "without values with selected value", "options": { "name": "colors", "id": "colors", "label": { "text": "Label text goes here" }, "items": [ { "text": "Red" }, { "text": "Green" }, { "text": "Blue" } ], "value": "Green" }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "with falsey values", "options": { "name": "falsey-values", "id": "falsey-values", "label": { "text": "Label text goes here" }, "items": [ { "text": "Empty string", "value": "" }, { "text": "Boolean false", "value": false }, { "text": "Number zero", "value": 0 } ] }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" }, { "name": "item selected overrides value", "options": { "name": "colors", "id": "colors", "label": { "text": "Label text goes here" }, "items": [ { "value": "red", "text": "Red" }, { "value": "green", "text": "Green", "selected": false }, { "value": "blue", "text": "Blue" } ], "value": "green" }, "hidden": true, "description": "", "previewLayoutModifiers": [], "html": "
\n \n \n
" } ] }