Button group

Twitter bootstrap Documentation

Basic example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        // Create button via specs and \Laminas\Form\Factory
        ['type' => 'button', 'options' =>  ['label' => 'Left']],
        // Button object
        new \Laminas\Form\Element\Button('middle', ['label' => 'Middle']),
        ['type' => 'button', 'options' =>  ['label' => 'Right']],
    ],
    [
        'variant' => 'primary',
        'attributes' => ['role' => 'group', 'aria-label' => 'Basic example'],
    ],
);

echo $this->buttonGroup(
    [
        [
            'type' => 'button',
            'options' =>  ['tag' => 'a', 'label' => 'Active link'],
            'attributes' => [
                'class' => 'active',
                'aria-current' => 'page',
                'href' => '#',
            ],
        ],
        [
            'type' => 'button',
            'options' =>  ['tag' => 'a', 'label' => 'Link'],
            'attributes' => ['href' => '#'],
        ],
        [
            'type' => 'button',
            'options' =>  ['tag' => 'a', 'label' => 'Link'],
            'attributes' => ['href' => '#'],
        ],
    ],
    ['variant' => 'primary'],
);

Mixed styles

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        ['type' => 'button', 'options' =>  ['label' => 'Left', 'variant' => 'danger']],
        ['type' => 'button', 'options' =>  ['label' => 'Middle', 'variant' => 'warning']],
        ['type' => 'button', 'options' =>  ['label' => 'Right', 'variant' => 'success']],
    ],
    ['attributes' => ['role' => 'group', 'aria-label' => 'Basic mixed styles example']]
);

Outlined styles

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        ['type' => 'button', 'options' =>  ['label' => 'Left']],
        ['type' => 'button', 'options' =>  ['label' => 'Middle']],
        ['type' => 'button', 'options' =>  ['label' => 'Right']],
    ],
    [
        'variant' => 'outline-primary',
        'attributes' => ['role' => 'group', 'aria-label' => 'Basic outlined example'],
    ],
);

Checkbox and radio button groups

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        [
            'type' => 'checkbox',
            'name' => 'checkbox-1',
            'options' =>  ['tag' => 'input', 'label' => 'Checkbox 1'],
            'attributes' => ['id' => 'btncheck1'],
        ],
        [
            'type' => 'checkbox',
            'name' => 'checkbox-2',
            'options' =>  ['tag' => 'input', 'label' => 'Checkbox 2'],
            'attributes' => ['id' => 'btncheck3'],
        ],
        [
            'type' => 'checkbox',
            'name' => 'checkbox-3',
            'options' =>  ['tag' => 'input', 'label' => 'Checkbox 3'],
            'attributes' => ['id' => 'btncheck3'],
        ],
    ],
    [
        'variant' => 'outline-primary',
        'attributes' => ['role' => 'group', 'aria-label' => 'Basic checkbox toggle button group'],
    ],
);

echo '<br/>';

echo $this->buttonGroup(
    [
        [
            'name' => 'btnradio',
            'type' => 'radio',
            'options' => [
                'tag' => 'input',
                'value_options' => [
                    [
                        'label' => 'Radio 1',
                        'value' => 'option1',
                        'attributes' => ['id' => 'btnradio1'],
                    ],
                    [
                        'label' => 'Radio 2',
                        'value' => 'option2',
                        'attributes' => ['id' => 'btnradio2'],
                    ],
                    [
                        'label' => 'Radio 3',
                        'value' => 'option3',
                        'attributes' => ['id' => 'btnradio3'],
                    ],
                ],
            ],
            'attributes' => ['value' => 'option1'],
        ],
    ],
    [
        'variant' => 'outline-primary',
        'attributes' => [
            'role' => 'group', 'aria-label' => 'Basic radio toggle button group',
        ],
    ],
);

Button toolbar

Twitter bootstrap Documentation

Combine sets of button groups

Result

Source

<?php

echo $this->buttonToolbar([
    [
        'buttons' => [
            ['type' => 'button', 'options' => ['label' => '1']],
            ['type' => 'button', 'options' => ['label' => '2']],
            ['type' => 'button', 'options' => ['label' => '3']],
            ['type' => 'button', 'options' => ['label' => '4']],
        ],
        'options' => [
            'variant' => 'primary',
            'attributes' => [
                'role' => 'group',
                'aria-label' => 'First group',
                'class' => 'me-2',
            ],
        ],
    ],
    [
        'buttons' => [
            ['type' => 'button', 'options' => ['label' => '5']],
            ['type' => 'button', 'options' => ['label' => '6']],
            ['type' => 'button', 'options' => ['label' => '7']],
        ],
        'options' => [
            'attributes' => [
                'role' => 'group',
                'aria-label' => 'Second group',
                'class' => 'me-2',
            ],
        ],
    ],
    [
        'buttons' => [
            ['type' => 'button', 'options' => ['label' => '8']],
        ],
        'options' => [
            'variant' => 'info',
            'attributes' => [
                'role' => 'group',
                'aria-label' => 'Third group',
                'class' => 'me-2',
            ],
        ],
    ],
], ['attributes' => ['role' => 'toolbar', 'aria-label' => 'Toolbar with button groups']]);

Mix input groups with button groups

Result

Source

<?php

$toolbarItems = [
    [
        'buttons' => [
            ['type' => 'button', 'options' => ['label' => '1']],
            ['type' => 'button', 'options' => ['label' => '2']],
            ['type' => 'button', 'options' => ['label' => '3']],
            ['type' => 'button', 'options' => ['label' => '4']],
        ],
        'options' => [
            'variant' => 'outline-secondary',
            'attributes' => [
                'role' => 'group',
                'aria-label' => 'First group',
                'class' => 'me-2',
            ],
        ],
    ],
    [
        'type' => 'text',
        'name' => 'input-group-example',
        'options' => ['add_on_prepend' => '@'],
        'attributes' => [
            'placeholder' => 'Input group example',
            'aria-label' => 'Input group example',
            'aria-describedby' => 'btnGroupAddon',
        ],
    ],
];

echo $this->buttonToolbar(
    $toolbarItems,
    [
        'attributes' => [
            'role' => 'toolbar',
            'aria-label' => 'Toolbar with button groups',
            'class' => 'mb-3',
        ],
    ]
);

// Justified content
echo $this->buttonToolbar(
    $toolbarItems,
    [
        'attributes' => [
            'role' => 'toolbar',
            'aria-label' =>
            'Toolbar with button groups',
            'class' => 'justify-content-between',
        ],
    ]
);

Sizing

Twitter bootstrap Documentation

Result

Source

<?php

foreach (['lg', null, 'sm'] as $size) {
    echo $this->buttonGroup(
        [
            ['type' => 'button', 'options' => ['label' => 'Left']],
            ['type' => 'button', 'options' => ['label' => 'Middle']],
            ['type' => 'button', 'options' => ['label' => 'Right']],
        ],
        [
            'size' => $size,
            'variant' => 'outline-dark',
            'attributes' => ['role' => 'group', 'aria-label' => '...'],
        ],
    );

    echo '<br/>';
}

Nesting

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        ['type' => 'button', 'options' => ['label' => '1']],
        ['type' => 'button', 'options' => ['label' => '2']],
        [
            'type' => 'button',
            'options' => [
                'label' => 'Dropdown',
                'dropdown' => ['Dropdown link', 'Dropdown link'],
            ],
            'attributes' => ['id' => 'btnGroupDrop1'],
        ],
    ],
    [
        'variant' => 'primary',
        'attributes' => [
            'role' => 'group',
            'aria-label' => 'Button group with nested dropdown',
        ],
    ],
);

Vertical variation

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->buttonGroup(
    [
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
    ],
    [
        'variant' => 'dark',
        'vertical' => true,
    ],
);

echo '<br/>';

echo $this->buttonGroup(
    [
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        [
            'type' => 'button',
            'options' => [
                'label' => 'Dropdown',
                'dropdown' => ['Dropdown link', 'Dropdown link'],
            ],
        ],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        ['type' => 'button', 'options' => ['label' => 'Button']],
        [
            'type' => 'button',
            'options' => [
                'label' => 'Dropdown',
                'dropdown' => ['Dropdown link', 'Dropdown link'],
            ],
        ],
        [
            'type' => 'button',
            'options' => [
                'label' => 'Dropdown',
                'dropdown' => ['Dropdown link', 'Dropdown link'],
            ],
        ],
        [
            'type' => 'button',
            'options' => [
                'label' => 'Dropdown',
                'dropdown' => ['Dropdown link', 'Dropdown link'],
            ],
        ],
    ],
    [
        'variant' => 'primary',
        'vertical' => true,
    ],
);

echo '<br/>';

echo $this->buttonGroup(
    [
        [
            'name' => 'vbtn-radio',
            'type' => 'radio',
            'options' => [
                'tag' => 'input',
                'value_options' => [
                    [
                        'label' => 'Radio 1',
                        'value' => 'option1',
                        'attributes' => ['id' => 'vbtn-radio1'],
                    ],
                    [
                        'label' => 'Radio 2',
                        'value' => 'option2',
                        'attributes' => ['id' => 'vbtn-radio2'],
                    ],
                    [
                        'label' => 'Radio 3',
                        'value' => 'option3',
                        'attributes' => ['id' => 'vbtn-radio3'],
                    ],
                ],
            ],
            'attributes' => ['value' => 'option1'],
        ],
    ],
    [
        'variant' => 'outline-danger',
        'vertical' => true,
        'attributes' => [
            'role' => 'group', 'aria-label' => 'Vertical radio toggle button group',
        ],
    ],
);