Checkbox

Generates a checkbox input field. There are various different options available to control the position of the checkbox and labels.

Example usage

{{
    form.checkbox({
        'label': 'Default checkbox',
        'id': 'foo', 
        'name': 'foo'
    })
}}

See the Pen docs - form - checkbox by Pulsar (@pulsar) on CodePen.

Options applied to parent wrapper

Option Type Description
class string A space separated list of class names
error string Text to explain an error/validation condition. Also adds error state styling
guidance string Text to be displayed in a popover, adds a (?) icon after the input
guidance-container string Element to bind guidance popover scroll behaviour to (default body)
help string Additional guidance information to be displayed next to the input
required bool Visually indicates that the field must be completed

Options applied to input

Option Type Description
checked bool Whether the input is checked
form string Specify one or more forms this label belongs to
id string A unique identifier, will also be used as the label's for attribute
indeterminate bool Shows the checkbox as [-], overrides the value of checked
input_placement string left (default) / right position of the input vs the label value
label string Text for the <label> companion element
name string The name of this control
required bool Adds required and aria-required="true" attributes
value string Specifies the value of the input
data-* string Data attributes, eg: 'data-foo': 'bar'

Any other options not listed here will be applied to the input.

Error state

{{
    form.checkbox({
        'label': 'Default checkbox',
        'error': 'Something went wrong',
        ...

See the Pen docs - form - checkbox error by Pulsar (@pulsar) on CodePen.

Label alignment

Labels follow the regular Pulsar form flow and are positioned down the left. Clicking the label will toggle the input.

{{ 
    form.checkbox({
        'label': 'Default checkbox', 
        'id': 'foo', 
        'name': 'foo'
    })
}}

See the Pen docs - form - checkbox by Pulsar (@pulsar) on CodePen.

Checkbox inline

Creates a <label> element with the checkbox placed inside, this allows the checkbox to be positioned either before or after the label value through the input_placement option.

Option Type Description
input_placement string left (default), right position of the input vs the label value 
{{ 
    form.checkbox_inline({
        'label': 'Checkbox inline', 
        'id': 'foo', 
        'name': 'foo'
    })
}}

See the Pen docs - form - checkbox right label by Pulsar (@pulsar) on CodePen.

{{ 
    form.checkbox_inline({
        'label': 'Checkbox on the right', 
        'id': 'foo', 
        'name': 'foo',
        'input_placement': 'right'
    })
}}

See the Pen docs - form - checkbox inline by Pulsar (@pulsar) on CodePen.

Indented checkbox

Using form.checkbox_inline will cause the checkbox input to not follow the normal flow of a regular pulsar form, if you want to maintain form alignment, use the form__group--indent class to restore the position.

Alternative styling

Depending on your UI needs, you can display checkboxes as choice blocks, button groups or toggle switches. See their documentation for further details.

Choice block

See the Pen docs - form - checkbox choice block by Pulsar (@pulsar) on CodePen.

Button group

See the Pen docs - form - checkbox button group by Pulsar (@pulsar) on CodePen.

Toggle switch

See the Pen docs - form - checkbox toggle switch by Pulsar (@pulsar) on CodePen.

results matching ""

    No results matching ""