FormWidgets / ButtonGroup / Examples

ButtonGroup Examples

Live examples of the ButtonGroup widget showing standard grouping and selection modes.

View Documentation

1. Basic Group

Standard buttons grouped together. Useful for toolbars or pagination.

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>

2. Single Selection

Acts like radio buttons. Only one button can be active at a time.

HTML
<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>
  <button class="fw-btn">Yearly</button>
</div>

3. Multiple Selection

Acts like checkboxes. Multiple buttons can be toggled on or off.

HTML
<div class="fw-button-group" data-selection="multiple">
  <button class="fw-btn active"><i class="fw-icon" data-icon="bold"></i></button>
  <button class="fw-btn"><i class="fw-icon" data-icon="highlighter"></i></button>
  <button class="fw-btn"><i class="fw-icon" data-icon="alignLeft"></i></button>
</div>