Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Submit button

Submit button

Submit buttons submit the contents of the form

By default double click prevention is enabled to make applications easier to use by people using slow internet connections or suffering from motor impairments.

Generating a submit button using the default parameters

Input

= f.govuk_submit
<%= f.govuk_submit %>

Rendered output

HTML output

<input type="submit" name="commit" value="Continue" class="govuk-button" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Continue" />

Generating a secondary submit button

Input

= f.govuk_submit 'Find address', secondary: true
<%= f.govuk_submit 'Find address', secondary: true %>

Rendered output

HTML output

<input type="submit" name="commit" value="Find address" class="govuk-button govuk-button--secondary" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Find address" />

Generating a warning submit button

Input

= f.govuk_submit 'Delete all records', warning: true
<%= f.govuk_submit 'Delete all records', warning: true %>

Rendered output

HTML output

<input type="submit" name="commit" value="Delete all records" class="govuk-button govuk-button--warning" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Delete all records" />

Generating a submit button with custom class

Input

= f.govuk_submit 'Special button', classes: 'special-button-class'
<%= f.govuk_submit 'Special button', classes: 'special-button-class' %>

Rendered output

HTML output

<input type="submit" name="commit" value="Special button" class="govuk-button special-button-class" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Special button" />

Generating a submit button without double click prevention

Input

= f.govuk_submit prevent_double_click: false
<%= f.govuk_submit prevent_double_click: false %>

Rendered output

HTML output

<input type="submit" name="commit" value="Continue" class="govuk-button" formnovalidate="formnovalidate" data-module="govuk-button" data-disable-with="Continue" />

Generating a disabled submit button

Input

= f.govuk_submit 'Disabled button', disabled: true
<%= f.govuk_submit 'Disabled button', disabled: true %>

Rendered output

HTML output

<input type="submit" name="commit" value="Disabled button" class="govuk-button govuk-button--disabled" formnovalidate="formnovalidate" disabled="disabled" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Disabled button" />

A submit button with an accompanying call to action

Some forms have secondary as well as primary functions. Any content passed in as a block will be rendered in-line with the primary submit button.

Input

= f.govuk_submit 'Save and continue' do
  a.govuk-button.govuk-button--secondary href='/#'
    ' Safe as draft
<%= f.govuk_submit 'Save and continue' do %><a class="govuk-button govuk-button--secondary" href="/#">
    Safe as draft 
  </a><% end %>

Rendered output

HTML output

<input type="submit" name="commit" value="Save and continue" class="govuk-button govuk-!-margin-right-1" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Save and continue" />
<a class="govuk-button govuk-button--secondary" href="/#">
  Safe as draft 
</a>