Skip to main content

Button Group

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

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',
}
]
})
}}