ChipGroup

Source@react-form-builder/components-mantine

Introduction

The ChipGroup components render a set of chips as either a single-selection group (MtChipRadioGroup) or a multiple-selection group (MtChipCheckboxGroup). They share the same underlying Mantine Chip.Group and are useful for filters, tags, or compact option lists.

It is included within the following NPM package: @react-form-builder/components-mantine.

Component variants

• MtChipRadioGroup – single selection; value is a single string.
• MtChipCheckboxGroup – multiple selection; value is an array of strings.

Differences between variants

Component	Selection type	Value shape	Typical use case
MtChipRadioGroup	Single selection	string	Pick one option from a chip list
MtChipCheckboxGroup	Multiple selection	string[]	Select multiple chips (filters, tags)

MtChipRadioGroup

Chip-based radio group that enforces a single selected value. It behaves similarly to a classic radio group but uses chips as the interactive elements.

MtChipCheckboxGroup

Chip-based checkbox group that lets the user select any subset of chips. It is best suited for filters and tag-style multi-select.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Label	string	Label for the group (default: "Chip Radio Group" / "Chip Group")
Description	string	Helper text below the group
Error	string	Error message; when set, applies error styling
Value	string (radio) or array (checkbox)	Selected value(s) (data-bound)
Items	array	Options (e.g. [{ value: 'a', label: 'Option A' }, ...]); default: three sample options
Variant	'filled' | 'outline'	Chip visual variant (default: 'filled')
Size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	Size of the chips
Disabled	boolean	Disables all chips (default: false)
With asterisk	boolean	If true, shows required indicator next to the label
Gap	string	Spacing between chips
Align	'start' | 'center' | 'end' | 'stretch'	Alignment of chips in the group
Justify	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'	Justify content
Wrap	'wrap' | 'nowrap' | 'wrap-reverse'	Wrap behavior of the chip row
Grow	boolean	If true, chips grow to fill space (default: false)
On change	event	Fired when the selection changes

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color