Choice

Displayed as a question with multiple answers, each of which has its own label and can allow either singular (checkboxes) or multiple (radios) choice.

See the Pen QNagrB by Pulsar (@pulsar) on CodePen.

The choice helper will will automatically adhere to Pulsar's form styleguide by switching to a select2 element if more than 5 options are provided.

Example usage

{{
    form.choice({
        'label': 'Assign blame to',
        'id': 'blame',
        'options': [
            {
                'label': 'Sunshine',
                'value': 'sun',
                'name': 'blame'
            },
            {
                'label': 'Moonlight',
                'value': 'moon',
                'name': 'blame'
            },
            {
                'label': 'Good times',
                'value': 'good',
                'name': 'blame'
            },
            {
                'label': 'Boogie',
                'value': 'boogie,
                'name': 'blame'
            }
        ]
    })
}}

Options

Option Type Description
class string A space separated list of class names
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
label string Text for the main <label> companion element
optimize string auto use a select2 element if number of options is greater than 5 (default)
few force the use of checkboxes/radios regardless of the number of options
many force the use of select2 regardless of the number of options
options array An array of option hashes that will be passed to the checkbox or radio helper, see their documentation for specifics
required bool Visually indicates that the field must be completed, will not be displayed if type is radio as they're implicitly required
multiple bool If true, uses checkboxes instead of radios, or passes the multiple attribute to the select2 element

Disabled options

You can disable individual choices by adding the disabled attribute to the option, or options, you need.

{{
    form.choice({
        'label': 'Do you like me?',
        'id': 'foo',
        'options': [
            {
                'label': 'Sunshine',
                'value': 'sun'
            },
            {
                'label': 'Moonlight',
                'value': 'moon',
                'disabled': true
            },
            {
                'label': 'Good times',
                'value': 'good'
            },
            {
                'label': 'Boogie',
                'value': 'boogie
            }
        ]
    })
}}

See the Pen docs - choice - disabled by Pulsar (@pulsar) on CodePen.

Choice Block

Block styling is available for the choice helper, add the choice--block modifier class. Pass a standard form width modifier to the choice helper's class option to control the width of all options.

{{
    form.choice({
        'label': 'Blocky options',
        'class': 'choice--block form__group--medium',
        'options': [ ... ]
    })
}}

See the Pen XdzwME by Pulsar (@pulsar) on CodePen.

Add choice--block choice--block-inline to lay the options out horizontally.

See the Pen pydmrr by Pulsar (@pulsar) on CodePen.

results matching ""

    No results matching ""