rc-chip

Chip wrapper for native button-based actions, filters, suggestions, and inputs.

Package

@rcarls/rc-chip

Element

<rc-chip>

Native dependency

Direct-child native button

State model

Selected/removable chip affordances

Main events

rc-chip-changerc-chip-remove

Related

rc-toolbarTheme previews

Installation

npm

npm install @rcarls/rc-chip

Yarn

yarn add @rcarls/rc-chip

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

Markup

<rc-chip variant="filter">
  <button type="button">Vegetarian</button>
</rc-chip>

<rc-chip variant="input" removable>
  <button type="button" aria-label="Remove basil">Basil</button>
  <span slot="remove-icon" class="material-symbols-outlined" aria-hidden="true"> close </span>
</rc-chip>

Filter chips toggle selected on user activation and add aria-pressed only when the author has not supplied stronger toggle semantics.

For removable chips, the direct native button is the sole removal action and fires rc-chip-remove. The trailing remove icon is presentational, so it does not add another tab stop or duplicate button semantics.

Without a theme, button and link chips retain their browser appearance. Packaged themes opt into chip sizing, shape, selection colors, and focus treatment.

Live demo

Groups

Compose interactive chips inside rc-toolbar when the group should form one tab stop with arrow-key navigation. Install and import @rcarls/rc-toolbar/define separately when you are not using the aggregate package:

<rc-toolbar label="Recipe filters">
  <rc-chip variant="filter">
    <button type="button">Quick</button>
  </rc-chip>
  <rc-chip variant="filter">
    <button type="button">Vegetarian</button>
  </rc-chip>
</rc-toolbar>

Toolbar layout does not wrap by default. A wrapping chip toolbar can opt in without changing its keyboard model:

rc-toolbar::part(root) {
  flex-wrap: wrap;
}

API

Properties

Property	Markup	Type	Default	Description
variant	variant	RCChipVariant	'assist'	Chip variant.
selected	selected	boolean	Not specified	Current selected state. Host writes are silent.
defaultSelected	default-selected	boolean	Not specified	Initial selected state for uncontrolled usage.
disabled	disabled	boolean	false	Mirror disabled state to the native child button.
readonly	readonly	boolean	false	Mark this chip as non-interactive display content.
removable	removable	boolean	false	Show a trailing remove affordance.

Methods

No public methods are documented in the custom elements manifest.

Events

Event	Detail type	Description
rc-chip-remove	CustomEvent	Fired when a user activates a removable chip's native button.
rc-chip-change	No detail type documented	Fired when a user toggles a filter chip.

Slots

Name	Description
(default)	A direct native `<button>` child, or `[data-rc-chip-label]` when `readonly`.
remove-icon	Optional presentational remove icon.

CSS Custom Properties

Property	Default	Description
--rc-chip-gap	0px	Gap between the slotted button/anchor/label's content.
--rc-chip-block-size	Not specified	Minimum chip block size (defers to native button/anchor sizing when unset).
--rc-chip-padding-block	Not specified	Block-axis padding of the slotted button, anchor, or label (defers to native padding when unset).
--rc-chip-padding-inline	Not specified	Inline-axis padding of the slotted button, anchor, or label (defers to native padding when unset).
--rc-chip-border	Not specified	Border of the slotted button, anchor, or label (defers to native border when unset).
--rc-chip-radius	Not specified	Border radius of the slotted button/anchor/label and the state-layer overlay (defers to native border-radius when unset; the state-layer overlay falls back to 0).
--rc-chip-bg	Not specified	Background of the slotted button, anchor, or label (defers to native background when unset).
--rc-chip-color	Not specified	Text color of the slotted button, anchor, or label (defers to native color when unset).
--rc-chip-font	Not specified	Font shorthand for the slotted button, anchor, or label (defers to native font when unset).
--rc-chip-text-decoration	Not specified	Text decoration for the slotted anchor (defers to native text-decoration when unset).
--rc-chip-selected-border-color	Not specified	Border color when `selected` (defers to native styling when unset).
--rc-chip-selected-bg	Not specified	Background when `selected` (defers to native styling when unset).
--rc-chip-selected-color	Not specified	Text color when `selected` (defers to native styling when unset).
--rc-chip-disabled-opacity	Not specified	Opacity of the slotted button when `disabled` (defers to native disabled styling when unset).
--rc-chip-focus-ring	Not specified	Outline shown while focus-within (defers to native focus styling when unset).
--rc-chip-focus-ring-offset	Not specified	Outline offset while focus-within (defers to native focus styling when unset).
--rc-chip-state-layer-color	currentColor	Hover/focus/pressed state-layer color.
--rc-chip-selected-state-layer-color	var(--rc-chip-state-layer-color, currentColor)	Selected chip state-layer color.
--rc-chip-hover-state-layer-opacity	0.08	Hover state-layer opacity.
--rc-chip-focus-state-layer-opacity	0.12	Focus state-layer opacity.
--rc-chip-pressed-state-layer-opacity	0.12	Pressed state-layer opacity.
--rc-chip-state-layer-transition-duration	var(--rc-motion-effects-duration-fast,80ms)	State-layer effects duration.
--rc-chip-state-layer-transition-easing	var(--rc-motion-effects-easing-fast,ease-out)	State-layer effects easing.
--rc-chip-remove-offset-inline	0.125rem	Inline offset of the remove indicator from the chip edge.
--rc-chip-remove-target-size	1.5rem	Minimum inline and block size of the remove indicator's hit target.
--rc-chip-remove-radius	9999px	Border radius of the remove indicator.
--rc-chip-remove-icon-size	smaller	Font size for a slotted remove icon.
--rc-chip-removable-padding-inline-end	calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))	Override for removable chip content end padding.

CSS Parts

Part	Description
state-layer	Overlay layer for hover, focus, pressed, ripple, or design-system effects.
remove	Presentational trailing remove indicator.