Button Group

premium

Styled button group for single or multi-select choices.

Overview

The Button Group displays options as styled buttons that users can click to select. Supports single-select (like radio) or multi-select (like checkbox group) modes with active state styling.

Properties

PropertyTypeDefaultDescription
nameString"selection"Field name used in form data.
labelString"Choose"Label displayed above the button group.
optionsArray--List of options with label and value.
selectionTypeEnum"single""single" (one selection) or "multiple" (multiple selections).
requiredBooleanfalseWhether a selection must be made.

Features

  • Single or multi-select modes
  • Active/inactive button styling (background, text color, border)
  • Configurable gap and layout
  • Toggle-deselect behavior

Tips

Great for plan selectors, preference choices, or any short list of options.
Use single mode as a more visual alternative to radio buttons.

Validation

This component uses select validation. See the Validation Guide for details on configuring rules and error messages.

Related components