Chip

A compact, interactive element that represents an entity, action, or attribute with support for selection, removal, and various styling options.

Selected

Option

Overview

Chips allow users to enter information, make selections, filter content, or trigger actions. They appear dynamically as groups of multiple interactive elements and provide a compact way to display options, tags, or actionable items. Unlike buttons, which serve as consistent calls to action, chips are contextual and can be added, removed, or modified based on user interaction.

Usage

forge-chip represents an entity, filterable attribute, or action through its type — choice, filter, action, input, or field — plus theme, selected, and dense. Chips are interactive and appear dynamically as a group inside a forge-chip-set; reach for a button instead for a persistent, primary call to action, or a badge instead for non-interactive status.

Rules

Group related chips inside a single forge-chip-set.

Offer at least two options in a choice or filter chip set.

Pair a leading icon or avatar in the start slot to help users scan a set.

Use chips for choices, filters, or actions that appear dynamically and contextually.

Don't

Don't use a chip for static, non-interactive information — use a badge instead.

Don't use a chip as a substitute for a persistent primary action — use a button instead.

Don't render a single, isolated choice or filter chip.

Types

Set type to match the chip’s role: choice for a single selection from a small set, filter for the same pattern applied to filtering content, action (the default) for a contextual action, input for a removable, user-entered value, and field for chips living inside a forge-chip-field.

A basic chip set using the default action type.

<forge-chip-set>
  <forge-chip value="payments">
    Payments
  </forge-chip>
  <forge-chip value="bills">
    Bills
  </forge-chip>
  <forge-chip value="adjustments">
    Adjustments
  </forge-chip>
</forge-chip-set>

With an icon or avatar

Pair a chip’s label with a leading icon or avatar via the start slot to help users scan a set at a glance.

A leading avatar identifies who or what each chip represents.

<forge-chip-set>
  <forge-chip value="ruby">
    <forge-avatar size="small" image-url="./ruby-side.jpg" slot="start">
    </forge-avatar>
    Ruby
  </forge-chip>
  <forge-chip value="leo">
    <forge-avatar size="small" image-url="./leo.png" slot="start">
    </forge-avatar>
    Leo
  </forge-chip>
  <forge-chip value="harley">
    <forge-avatar size="small" image-url="./harley.jpg" slot="start">
    </forge-avatar>
    Harley
  </forge-chip>
</forge-chip-set>

As a link

Set href (plus optional target, download, rel) to render the chip as a navigating anchor instead of firing a selection or delete event.

Setting href renders the chip as a navigating anchor.

<forge-chip-set>
  <forge-chip value="payments" href="javascript: void(0);">
    Anchor
    <forge-icon name="open_in_new" slot="end">
    </forge-icon>
  </forge-chip>
</forge-chip-set>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconOpenInNew } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconOpenInNew]);
</script>

Choice and filter

Set type="choice" for a single selection from a small set, or type="filter" for the same pattern applied to filtering content — both share the same selected state.

Choice chips (single selection) and filter chips (narrowing content) share the same selected state.

<forge-chip-set type="choice">
  <forge-chip>
    Small
  </forge-chip>
  <forge-chip selected>
    Medium
  </forge-chip>
  <forge-chip>
    Large
  </forge-chip>
</forge-chip-set>
<forge-chip-set type="filter">
  <forge-chip value="tops" selected>
    Tops
  </forge-chip>
  <forge-chip value="bottoms" selected>
    Bottoms
  </forge-chip>
  <forge-chip value="shoes">
    Shoes
  </forge-chip>
</forge-chip-set>

Removable

Set type="input" for a chip that renders a built-in remove control.

Input chips render a built-in remove control.

<forge-chip-set type="input">
  <forge-chip>
    Falmouth
  </forge-chip>
  <forge-chip>
    Yarmouth
  </forge-chip>
  <forge-chip>
    Plano
  </forge-chip>
</forge-chip-set>

Dense

Set dense to reduce a chip’s height and padding for compact layouts.

Dense reduces height and padding for compact layouts.

<forge-chip-set dense>
  <forge-chip>
    Small
  </forge-chip>
  <forge-chip>
    Medium
  </forge-chip>
  <forge-chip>
    Large
  </forge-chip>
</forge-chip-set>

A compact, interactive element that represents an entity, action, or attribute with support for selection, removal, and various styling options.

import "@tylertech/forge/chips";

Properties

Property	Attribute	Type	Default	Description
`type`	`type`	`ChipType`	—	The type of chip.
`value`	`value`	`unknown`	—	The value of the chip.
`selected`	`selected`	`boolean`	—	Whether the chip is selected.
`invalid`	`invalid`	`boolean`	—	Whether the chip is invalid.
`disabled`	`disabled`	`boolean`	—	Whether the chip is disabled.
`dense`	`dense`	`boolean`	—	Whether the chip is dense.
`theme`	`theme`	`ChipTheme`	—	The theme of the chip.
`href`	`href`	`string`	—	The href of the chip.
`target`	`target`	`string`	—	The target of the chip.
`download`	`download`	`string`	—	The download of the chip.
`rel`	`rel`	`string`	—	The rel of the chip.
`removeButtonLabel`	`remove-button-label`	`string`	—	The custom aria-label for the remove button.

Events

Name	Type	Description
`forge-chip-delete`	`CustomEvent<IChipDeleteEventData>`	Event fired when the chip is deleted.
`forge-chip-select`	`CustomEvent<IChipSelectEventData>`	Event fired when the chip is selected.

Slots

Name	Description
`(default)`	The content of the chip.
`start`	The start content of the chip.
`end`	The end content of the chip.

CSS Parts

Name	Description
`::part(root)`	The component's root element.
`::part(trigger)`	The trigger element of the chip.
`::part(focus-indicator)`	The focus indicator of the chip.
`::part(state-layer)`	The state layer surface.

CSS Custom Properties

Name	Description
`--forge-chip-background`	The background color of the chip.
`--forge-chip-color`	The background color of the chip.
`--forge-chip-shape`	The shape of the chip.
`--forge-chip-spacing`	The spacing between chips.
`--forge-chip-height`	The height of the chip.
`--forge-chip-padding-inline`	The inline padding of the chip.
`--forge-chip-padding-block`	The block padding of the chip.
`--forge-chip-cursor`	The cursor style of the chip.
`--forge-chip-icon-font-size`	The font size of the chip icon.
`--forge-chip-focus-indicator-color`	The color of the focus indicator.
`--forge-chip-disabled-opacity`	The opacity of the disabled chip.
`--forge-chip-disabled-cursor`	The cursor style of the disabled chip.
`--forge-chip-dense-height`	The height of the dense chip.
`--forge-chip-dense-padding-inline`	The inline padding of the dense chip.
`--forge-chip-dense-spacing`	The spacing between dense chips.
`--forge-chip-dense-font-size`	The font size of the dense chip.
`--forge-chip-dense-font-weight`	The font weight of the dense chip.
`--forge-chip-dense-focus-indicator-offset`	The offset of the focus indicator for dense chips.
`--forge-chip-dense-icon-font-size`	The font size of the icon in dense chips.
`--forge-chip-remove-button-spacing`	The spacing of the remove button in chips.
`--forge-chip-remove-button-height-dense`	The height of the remove button in dense chips.
`--forge-chip-remove-button-icon-size-dense`	The icon size of the remove button in dense chips.
`--forge-chip-remove-button-spacing-dense`	The spacing of the remove button in dense chips.
`--forge-chip-selected-background`	The background color of the selected chip.
`--forge-chip-selected-color`	The text color of the selected chip.
`--forge-chip-invalid-color`	The text color of the invalid chip.
`--forge-chip-invalid-selected-background`	The background color of the invalid selected chip.
`--forge-chip-invalid-selected-color`	The text color of the invalid selected chip.
`--forge-chip-border-width`	The width of the chip border.
`--forge-chip-border-style`	The style of the chip border.
`--forge-chip-border-color`	The color of the chip border.
`--forge-chip-field-background`	The background color of the chip field.
`--forge-chip-field-color`	The text color of the chip field.
`--forge-chip-field-shape`	The shape of the chip field.
`--forge-chip-field-border-color`	The color of the chip field border.
`--forge-chip-field-cursor`	The cursor style of the chip field.
`--forge-chip-checkmark-size`	The size of the checkmark in chips.
`--forge-chip-checkmark-color`	The color of the checkmark in chips.
`--forge-chip-checkmark-spacing`	The spacing of the checkmark in chips.
`--forge-chip-avatar-size`	The size of the avatar in chips.
`--forge-chip-avatar-size-dense`	The size of the avatar in dense chips.
`--forge-chip-avatar-font-size`	The font size of the avatar in chips.
`--forge-chip-avatar-font-size-dense`	The font size of the avatar in dense chips.
`--forge-chip-avatar-spacing`	The spacing of the avatar in chips.
`--forge-chip-avatar-spacing-dense`	The spacing of the avatar in dense chips.
`--forge-chip-transition-duration`	The duration of the chip transition.
`--forge-chip-transition-easing`	The easing function of the chip transition.
`--forge-chip-checkmark-transition-delay`	The delay of the checkmark transition in chips.

Methods

Name	Returns	Description
`focus(options)`	`void`
`focusRemoveButton()`	`void`
`click()`	`void`

Keyboard interaction

Chips must be reachable by Tab, with a visible cue for active, inactive, and focused states. Pressing Space or Enter while a chip is focused should toggle it the same way a click would. If a chip has a delete icon, make sure it can be focused and activated independently of the chip body — a screen reader or keyboard user needs to reach the delete action on its own, not just the chip as a whole.

Set a role on the chip so assistive technology can announce what it represents (a filter, a selection, an input value) rather than reading it as generic content.

Color and contrast

Meet WCAG contrast requirements between a chip’s foreground text and background. If a chip’s color conveys meaning on its own, pair it with an icon or label — don’t rely on color alone for users with color vision deficiencies.