ButtonGroup
fw-button-group
A container widget that links multiple buttons into a single side-by-side group. Only the outer corners are rounded, creating a unified toolbar appearance.
Usage
HTML (Auto-init)
Wrap standard fw-btn elements in a container with the fw-button-group class.
HTML
<div class="fw-button-group">
<button class="fw-btn">Left</button>
<button class="fw-btn">Middle</button>
<button class="fw-btn">Right</button>
</div>
<script>FormWidgets.autoInit();</script>Selection Mode
Enable selection behavior (radio or checkbox style) using data attributes.
HTML
<!-- Single selection (Radio style) -->
<div class="fw-button-group" data-selection="single">
<button class="fw-btn active">Daily</button>
<button class="fw-btn">Weekly</button>
<button class="fw-btn">Monthly</button>
</div>Options
| Option | Type | Default | Description |
|---|---|---|---|
| selection | string | 'none' | Controls click behavior. 'none' (default) is for standard buttons. 'single' allows one active button at a time. 'multiple' allows toggling multiple buttons. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-selection | selection | data-selection="single" |
Features
Joined Borders
Buttons appear seamlessly connected with shared borders.
Selection States
Built-in support for single or multiple selection modes.
Themeable
Active states use the theme's brand colors automatically.
Notes
Button Styling
The widget works best with the standard .fw-btn class. If you use custom buttons, ensure they have borders defined so the overlap logic works correctly.