rc-chip

Chip wrapper for native actions, links, filters, suggestions, and inputs.

Package

@rcarls/rc-chip

Element

<rc-chip>

Native dependency

Direct-child native button, link, or labeled input

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>

<rc-chip>
  <a href="/recipes">Recipes</a>
</rc-chip>

Button-backed filter chips toggle selected on user activation and add aria-pressed only when the author has not supplied stronger toggle semantics. For form-backed filters, keep the native input inside a direct label:

<rc-chip variant="filter">
  <label><input type="checkbox" name="category" value="quick" />Quick</label>
</rc-chip>

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

Use rc-chip-group for adaptive wrapping/scrolling, native filter semantics, and an optional assist-chip toolbar keyboard model:

<rc-chip-group kind="assist" label="Recipe actions">
  <rc-chip variant="filter">
    <button type="button">Quick</button>
  </rc-chip>
  <rc-chip variant="filter">
    <button type="button">Vegetarian</button>
  </rc-chip>
</rc-chip-group>

rc-toolbar remains appropriate for mixed control toolbars that do not need chip-group overflow disclosure.

Dense, height-constrained fields

A chip's accessible touch target (--rc-chip-touch-target-block-size, 3rem by default) applies unconditionally, unlike rc-button's opt-in-via-icon-only inflation — reasonable on its own, but a poor fit inside a field that can't spare that much height, such as a multi-select value area in rc-search-bar or rc-combobox. --rc-chip-touch-target-overlap-block-start and -block-end (zero by default) let a theme or consumer give that reserved space back on the block axis, the same pattern as rc-button's own touch-target overlap tokens but vertical instead of horizontal:

.chip-field rc-chip {
  --rc-chip-touch-target-overlap-block-start: 8px;
  --rc-chip-touch-target-overlap-block-end: 8px;
}

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, `<a href>`, native-backed filter `<label>`, 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-touch-target-block-size	3rem	Minimum interactive touch target size.
--rc-chip-touch-target-overlap-block-start	0px	Zero by default. A theme or consumer sets this on a chip that sits at a real block-axis leading edge (no neighbor on that side), such as inside a height-constrained field, to let its touch-target inflation overlap into whatever sits just outside the host instead of also reserving layout space there.
--rc-chip-touch-target-overlap-block-end	0px	The block-axis trailing-edge counterpart to `--rc-chip-touch-target-overlap-block-start`.
--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.