Skip to main content

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.

Assign blame to

Basic usage​

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

Helper options​

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
optimizestring
  • auto use a select 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 select regardless of the number of options
optionsarrayAn array of option hashes that will be passed to the checkbox or radio helper, see their documentation for specifics
multipleboolIf true, uses checkboxes instead of radios, or passes the multiple attribute to the select2 element

Multiple choice​

To allow multiple options to be chosen (checkboxes instead of radios), add the 'multiple': true option.

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

Disabled choices​

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

Add the 'disabled': true option to disable the field on load. See the disabling elements guide for more information about how to disable elements via javascript. Provide help text or information within the UI where possible to explain why elements are disabled.

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

Input types​

If there are more than five options, the choice helper will automatically switch to using a select input, this prevents long lists of radio/checkboxes. This behaviour can be overridden with the optimize option.

{{
  form.choice({
    'label': 'Highlight colour',
    'options': [
      {
        'label': 'Red',
        'name': 'highlight',
        'value': 'red'
      },
      {
        'label': 'Orange',
        'name': 'highlight',
        'value': 'orange',
          'disabled': true
      },
      {
        'label': 'Yellow',
        'name': 'highlight',
        'value': 'yellow'
      },
      {
        'label': 'Green',
        'name': 'highlight',
        'value': 'green'
      },
      {
        'label': 'Blue',
        'name': 'highlight',
        'value': 'blue'
      },
      {
        'label': 'Indigo',
        'name': 'highlight',
        'value': 'indigo'
      },
      {
        'label': 'Violet',
        'name': 'highlight',
        'value': 'violet'
      }
    ]
  })
}}

Help text​

Depending on the needs of your UI you have two options for adding help text to the choice helper. To avoid confusion you should avoid using both help options.

Help for all choices​

If you pass the help option as a direct child of the choice helper it will be displayed in the usual position underneath the whole component. Use this method if your help text describes the whole component and all the available options.

Sharing Method
Choose how this content will be shared
{{
  form.choice({
    'label': 'Sharing Method',
    'id': 'sharedType-1',
    'help': 'Choose how this content will be shared',
    'options': [
      {
        'label': 'Duplicate',
        'name': 'choice-a4',
        'value': '1'
      },
      {
        'label': 'Link Only',
        'name': 'choice-a4',
        'value': '2'
      }
    ]
  })
}}

Help for individual choices​

You can pass help to each individual choice within the options array. This method is useful if you want to give specific guidance for each option.

Sharing Method
Visitor will stay on the shared site, your content will look and feel like part of that siteVisitors will be redirected to this site to view the content
{{
  form.choice({
    'label': 'Sharing Method',
    'id': 'sharedType-2',
    'options': [
      {
        'label': 'Duplicate',
        'name': 'choice-a5',
        'value': '1',
        'help': 'Visitor will stay on the shared site, your content will look and feel like part of that site'
      },
      {
        'label': 'Link Only',
        'name': 'choice-a5',
        'value': '2',
        'help': 'Visitors will be redirected to this site to view the content'
      }
    ]
  })
}}

Choice block​

Stacked blocks​

Block styling is available for the choice helper by adding 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.

Assign blame to

Inline blocks​

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

tip

This example also uses the form__group--small class to reduce the width of the blocks to suit the text labels

Are you over 18?