govuk-frontend

{ "component": "textarea", "fixtures": [ { "name": "default", "options": { "name": "more-detail", "id": "more-detail", "label": { "text": "Can you provide more detail?" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>" }, { "name": "with hint", "options": { "name": "more-detail", "id": "more-detail", "label": { "text": "Can you provide more detail?" }, "hint": { "text": "Don't include personal or financial information, eg your National Insurance number or credit card details." } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n <div id=\"more-detail-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>" }, { "name": "with error message", "options": { "name": "no-ni-reason", "id": "no-ni-reason", "label": { "text": "Why can’t you provide a National Insurance number?" }, "errorMessage": { "text": "You must provide an explanation" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"no-ni-reason\">\n Why can’t you provide a National Insurance number?\n </label>\n <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>" }, { "name": "with default value", "options": { "id": "full-address", "name": "address", "value": "221B Baker Street\nLondon\nNW1 6XE\n", "label": { "text": "Full address" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>" }, { "name": "with custom rows", "options": { "id": "full-address", "name": "address", "label": { "text": "Full address" }, "rows": 8 }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>" }, { "name": "with label as page heading", "options": { "id": "textarea-with-page-heading", "name": "address", "label": { "text": "Full address", "classes": "govuk-label--l", "isPageHeading": true } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>" }, { "name": "with optional form-group classes", "options": { "id": "textarea-with-page-heading", "name": "address", "label": { "text": "Full address" }, "formGroup": { "classes": "extra-class" } }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>" }, { "name": "with autocomplete attribute", "options": { "id": "textarea-with-autocomplete-attribute", "name": "address", "label": { "text": "Full address" }, "autocomplete": "street-address" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n Full address\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>" }, { "name": "with spellcheck enabled", "options": { "label": { "text": "Spellcheck is enabled" }, "id": "textarea-with-spellcheck-enabled", "name": "spellcheck", "spellcheck": true }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>" }, { "name": "with spellcheck disabled", "options": { "label": { "text": "Spellcheck is disabled" }, "id": "textarea-with-spellcheck-disabled", "name": "spellcheck", "spellcheck": false }, "hidden": false, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>" }, { "name": "classes", "options": { "id": "with-classes", "name": "with-classes", "label": { "text": "With classes" }, "classes": "app-textarea--custom-modifier" }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>" }, { "name": "attributes", "options": { "id": "with-attributes", "name": "with-attributes", "label": { "text": "With attributes" }, "attributes": { "data-attribute": "my data value" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>" }, { "name": "with describedBy", "options": { "id": "with-describedby", "name": "with-describedby", "label": { "text": "With describedBy" }, "describedBy": "test-target-element" }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"test-target-element\"></textarea>\n</div>" }, { "name": "with hint and described by", "options": { "id": "with-hint-describedby", "name": "with-hint-describedby", "label": { "text": "With hint and describedBy" }, "describedBy": "test-target-element", "hint": { "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint and describedBy\n </label>\n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"test-target-element with-hint-describedby-hint\"></textarea>\n</div>" }, { "name": "with error message and described by", "options": { "name": "textarea-with-error", "label": { "text": "Textarea with error" }, "describedBy": "test-target-element", "id": "textarea-with-error", "errorMessage": { "text": "Error message" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"textarea-with-error\">\n Textarea with error\n </label>\n <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"test-target-element textarea-with-error-error\"></textarea>\n</div>" }, { "name": "with hint and error message", "options": { "id": "with-hint-error", "name": "with-hint-error", "label": { "text": "With hint and error" }, "errorMessage": { "text": "Error message" }, "hint": { "text": "Hint" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error\">\n With hint and error\n </label>\n <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n Hint\n </div>\n <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>" }, { "name": "with hint, error message and described by", "options": { "id": "with-hint-error-describedby", "name": "with-hint-error-describedby", "label": { "text": "With hint, error and describedBy" }, "describedBy": "test-target-element", "errorMessage": { "text": "Error message" }, "hint": { "text": "Hint" } }, "hidden": true, "description": "", "previewLayoutModifiers": [], "screenshot": false, "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n With hint, error and describedBy\n </label>\n <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"test-target-element with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>" } ] }