rc-chip-group

Adaptive wrapping and horizontal-scrolling layout for chip collections and arbitrary direct children.

Package

@rcarls/rc-chip-group

Element

<rc-chip-group>

Native dependency

Author-owned fieldset and radio/checkbox controls

State model

Auto overflow disclosure and optional assist roving focus

Main events

rc-chip-group-toggle

Related

rc-chiprc-toolbarTheme previews

Installation

npm

npm install @rcarls/rc-chip-group

Yarn

yarn add @rcarls/rc-chip-group

import '@rcarls/rc-chip-group/define';

The define entry also registers rc-chip, which the group uses for its internal Show all/Show less action.

Native filter markup

Keep fieldset, legend, form value, and selection semantics native:

<fieldset>
  <legend>Recipe scope</legend>
  <rc-chip-group kind="filter" selection="single">
    <rc-chip>
      <label><input type="radio" name="scope" value="all" checked />All</label>
    </rc-chip>
    <rc-chip>
      <label><input type="radio" name="scope" value="favorites" />Favorites</label>
    </rc-chip>
  </rc-chip-group>
</fieldset>

Use selection="multiple" with checkboxes. Use selection="none" for menu-backed filter buttons with aria-haspopup; their menu owns the eventual selection.

Live demo

Adaptive layout

layout="auto" is the default. The group first measures its natural wrapped layout. When the content needs more than max-rows="2", it becomes one horizontally scrolling row and inserts a leading Show all action. Expanded content returns to natural wrapping and the same action becomes Show less. The action uses the MDI tune icon and a vertical separator to distinguish the disclosure control from the authored chip collection.

Use layout="wrap" to always wrap or layout="scroll" to always keep one horizontal row. The component uses actual rendered rows, so container size, text scaling, localization, and consumer content all participate in the decision without device-pixel-ratio special cases.

Coordination modes

• kind="generic" is layout-only and accepts any direct HTMLElement.
• kind="assist" exposes a labeled toolbar with one tab stop and horizontal arrow/Home/End navigation.
• kind="filter" synchronizes native radio/checkbox state to direct rc-chip children. Put the group inside an author-owned fieldset.

API

Properties

Property	Markup	Type	Default	Description
layout	layout	RCChipGroupLayout	'auto'	Layout strategy.
maxRows	max-rows	number	2	Maximum natural rows before auto layout collapses to horizontal scrolling.
kind	kind	RCChipGroupKind	'generic'	Child coordination mode.
selection	selection	RCChipGroupSelection	'none'	Native filter selection hint.
label	label	string	'Chip actions'	Accessible label used when `kind="assist"` exposes toolbar semantics.
showAllLabel	show-all-label	string	'Show all'	Collapsed overflow action label.
showLessLabel	show-less-label	string	'Show less'	Expanded overflow action label.
expanded	expanded	boolean	Not specified	Current auto-layout disclosure state. Host writes are silent.
defaultExpanded	default-expanded	boolean	Not specified	Initial uncontrolled disclosure state.

Methods

No public methods are documented in the custom elements manifest.

Events

Event	Detail type	Description
rc-chip-group-toggle	No detail type documented	Fired after the user activates Show all or Show less.

Slots

Name	Description
(default)	Direct chip or arbitrary-element children.

CSS Custom Properties

Property	Default	Description
--rc-chip-group-column-gap	0.5rem	Inline gap between items.
--rc-chip-group-row-gap	0	Block gap between wrapped rows.
--rc-chip-group-padding-block	0	Group block-axis padding.
--rc-chip-group-scroll-padding-inline	0	Horizontal scroll padding.
--rc-chip-group-scrollbar-width	none	Standards-based scrollbar width.
--rc-chip-group-toggle-gap	0.5rem	Gap between the disclosure icon and label.
--rc-chip-group-toggle-separator-gap	0.5rem	Gap before the disclosure separator.
--rc-chip-group-toggle-icon-size	1.125rem	Disclosure icon size.
--rc-chip-group-toggle-separator-block-size	1.5rem	Separator block size.
--rc-chip-group-toggle-separator-inline-size	1px	Separator thickness.
--rc-chip-group-toggle-separator-color	currentColor	Separator color.

CSS Parts

Part	Description
root	Flex layout and horizontal scroll container.
toggle	Internal leading disclosure chip.
toggle-icon	MDI tune icon inside the disclosure chip.
toggle-separator	Vertical separator after the disclosure chip.