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.