Skip to main content

Button Group

Group a series of related buttons together on a single line. Great for creating toolbars.

Basic usage​

Button group
{{
  form.button_group({
    'label': 'Button group',
    'items': [
      {
        'id': 'guid-' ~ random(),
        'label': 'Foo',
        'name': 'foo-1',
        'checked': true
      },
      {
        'id': 'guid-' ~ random(),
        'label': 'Bar',
        'name': 'foo-1'
      },
      {
        'id': 'guid-' ~ random(),
        'label': 'Baz',
        'name': 'foo-1'
      }
    ]
  })
}}

Helper options​

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

OptionTypeDescription
itemsarrayAn array of options to pass to the helper specified by type
typestringThe type of input to create, can be radio (default), checkbox or button

Single choice (radio)​

Button group
{{
    form.button_group({
        'label': 'Button group',
        'items': [
            {
                'id': 'guid-' ~ random(),
                'label': 'Foo',
                'name': 'foo-2',
                'checked': true
            },
            {
                'id': 'guid-' ~ random(),
                'label': 'Bar',
                'name': 'foo-2'
            },
            {
                'id': 'guid-' ~ random(),
                'label': 'Baz',
                'name': 'foo-2'
            }
        ]
    })
}}

Multiple choice (checkbox)​

Button group
{{
    form.button_group({
        'label': 'Button group',
        'type': 'checkbox',
        'items': [
            {
                'id': 'guid-' ~ random(),
                'label': 'Foo',
                'name': 'foo-3',
                'checked': true
            },
            {
                'id': 'guid-' ~ random(),
                'label': 'Bar',
                'name': 'foo-3'
            },
            {
                'id': 'guid-' ~ random(),
                'label': 'Baz',
                'name': 'foo-3'
            }
        ]
    })
}}

Using icons​

Alignment
{{
    form.button_group({
        'label': 'Alignment',
        'type': 'radio',
        'items': [
            {
                'id': 'align-left',
                'label': html.icon('align-left'),
                'name': 'alignment',
                'checked': true
            },
            {
                'id': 'align-center',
                'label': html.icon('align-center'),
                'name': 'alignment',
            },
            {
                'id': 'align-right',
                'label': html.icon('align-right'),
                'name': 'alignment',
            },
            {
                'id': 'justify',
                'label': html.icon('align-justify'),
                'name': 'alignment',
            }
        ]
    })
}}