End

Used in conjunction with form.create and allows you to specify the buttons required to submit/cancel the form, then closes the form with the </form> element.

Example usage

{{
    form.end({
        'actions': [
            form.submit({
                'label': 'Sign In'
            }),
            html.link({
                'label': 'Cancel',
                'href': '/home'
            })
        ]
    })
}}

Options

Variations

Form-aligned actions

Normally form actions are positioned so that they're inline with the form controls above it.

See the Pen docs - form actions by Paul Stanton (@stanton) on CodePen.

Flush-aligned actions

You can make the form actions align to the left hand edge of a form by adding the form__actions--flush class, eg:

{{
    form.end({
        'class': 'form__actions--flush',
        'actions': [...]
    })
}}

See the Pen docs - form actions flush by Paul Stanton (@stanton) on CodePen.

Button placement

Primary actions should be the first buttons in a form actions element, where possible you should also include a 'Cancel' action to allow the user to exit a form with no changes, this should use .btn--naked styling.

If the UI is one which could/should allow the user to delete the item you can add a delete button to the form actions. You should use the pull-right class to align this on the right hand side.

See the Pen docs - form actions buttons by Paul Stanton (@stanton) on CodePen.

Tooltips on disabled actions

The disabled parameter prevents mouse events from firing and stops tooltips from working entirely. The only way around this which works for all our supported browsers is to wrap the button in a containing div, and attach the tooltip to that element.

{{
    form.end({
        'actions': [
            '<div rel="tooltip" data-toggle="tooltips" title="foo">' ~ form.submit({
                'label': 'Example',
                'disabled': true
            }) ~ '</div>'
        ]
    })
}}