@dwp/govuk-casa
Version:
A framework for building GOVUK Collect-And-Submit-Applications
83 lines (68 loc) • 4.3 kB
Markdown
# CASA Journey Form
Component to wrap your form inputs in a `<form>` that contains all the required elements for CASA.
A "Continue" button (and "Cancel" link if in edit mode) will also be added.
- [1.3.5: Identify Input Purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)
- [`<form>`: The Form element - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete)
## Example usage
```nunjucks
{% from "casa/components/journey-form/macro.njk" import casaJourneyForm with context %}
{% call casaJourneyForm({
formUrl: formUrl,
csrfToken: casa.csrfToken,
inEditMode: inEditMode,
editOriginUrl: editOriginUrl,
editCancelUrl: editCancelUrl,
activeContextId: activeContextId,
buttonBarHidden: false
}) %}
... your form inputs here ...
{% endcall %}
```
Which will render something like this:
```html
<form
action="/form/url"
method="post"
autocomplete="off"
novalidate
class="casa-journey-form"
>
<input type="hidden" name="_csrf" value="..." />
<input type="hidden" name="edit" value="true" />
<input type="hidden" name="editorigin" value="/url/to/review/page" />
<input
type="hidden"
name="contextid"
value="123e4567-e89b-12d3-a456-426614174000"
/>
... your form inputs here ...
<div class="govuk-button-group casa-form-control-block">
<button
type="submit"
class="govuk-button"
data-prevent-double-click="true"
id="continue-button"
>
Save changes
</button>
<a
href="/url/to/review/page"
class="govuk-link govuk-link--no-visited-state"
>Cancel</a
>
</div>
</form>
```
Note that the submit button is configured to prevent double-clicks and avoid duplicate submissions.
## Component arguments
| Name | Type | Required | Description |
| ----------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `formUrl` | string | Yes | The form's "action", available in a `formUrl` template variable |
| `autoComplete` | string | No | Allows you to override the autocomplete parameter - the default value is 'off' |
| `csrfToken` | string | Yes | Token used to protect form from CSRF (available to user's templates via the global `casa.csrfToken` variable) |
| `inEditMode` | boolean | No | Toggle edit-mode of the form (available to page templates using default GET/POST handlers via the local `inEditMode` variable) |
| `editOriginUrl` | string | No | Absolute URL to the page from which the edit request came (defaults to `review`) (available to user's templates using default GET/POST handlers via the local `editOriginUrl` variable) |
| `editCancelUrl` | string | No | Absolute URL to the page that will cancel edit mode. Usually the same as `editorigin` with `?editcancel=<waypoint-that-cancelled>` appended (default: same as `editorigin`) |
| `activeContextId` | string | No | ID of the active context to save data into. Won't be present if the "default" context is active |
| `buttonBarHidden` | boolean | No | Toggle the rendering of the bar containing the "Continue" button and "Cancel" link.Useful if you want to render your own buttons |
| `buttonText` | string | No | Overrides default button text i.e Save changes. If you need to retain the save changes switch you will need to add this logic |