Input chip

An input chip shows one item the reader entered, such as a recipient or a tag, and lets them remove it. Its label can act when pressed or only name the item, so the chip is a control or plain text. Two chips below change on a timer. One becomes selected, and one loses its badge and gets it back.

Amara

vegan

Ravi

Design team

Draft

Zoe

Priya

Weekend

Ola

Cooks

Marcus

Sam

Kowalski family

Budget

dairy-free

Eli

Evening

Camille Dubois

Kai

Nut-free

Ines

Rooftop

Mahmoud Haddad

Fay

Ben

Yuki

Rio

Dev

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a chip⁠

Four chips share one shape. Each suits a different job:

Assist chip: a smart, related action offered in context, such as Add to calendar beside an event.
Suggestion chip: a generated reply or query the reader can take, such as a suggested answer in a chat.
Filter chip: a tag that turns a filter on or off, such as Vegetarian or Under 30 minutes.
Input chip: one piece of information the reader entered, removable, such as a recipient in an address line.

Two jobs belong elsewhere. An action on the page's own content is a button, and a choice in a form is a checkbox, radio button, or select. Each chip has a set of its own that lays a group of them out.

Chips and sets⁠

An input chip is one item the reader entered, and an input chip set is the list of those items. Each does a job the other cannot:

The chip holds one item: its label, its icon or avatar, and the button that removes it. It stands alone where the reader enters a single item, such as one attached file.
The set makes the items one list. It lays them out in rows that wrap, takes one Tab stop for the whole list with the arrow keys moving between chips, and has a screen reader announce a list of so many items under the name in its aria-label.

Loose chips each take a Tab stop of their own, so a keyboard user presses Tab once per item to get past them. A screen reader hears no count of the items. Put the items in a set, and add a chip to it as the reader enters each one; a chip removed leaves the list.

A set lays out its own kind of chip only. Any other child stays where it is but is left out of the arrow-key movement, and the set logs a warning naming it.

Built in⁠

A remove button on every chip, which removes the chip from the page when pressed.
A label that acts when pressed, follows a link with href, or only names the item with remove-only.
A leading icon from icon-name, or an avatar with avatar.
A badge from badge-value or badge-dot, which badge-concealed hides without losing its value.
A tooltip from tooltip-value, with its text announced as the chip's description.
A touch target of at least 48 by 48 pixels by default, though the chip paints smaller.

Using input chips well⁠

Use an input chip for information the reader entered, and a filter chip to narrow what a list shows.
Keep each label short, a name or a word, and leave sentences to the surrounding text.
Put the chips in an input chip set with an aria-label, and add each one as the reader enters its item.
Give the chip an icon or avatar when it helps the reader tell items apart, such as a contact's photo.
Use a button, not a chip, for the main action on a screen.

These rules follow Material 3 Expressive's guidance for chips, on material.io.

Removing⁠

Every input chip has a remove button. Pressing it fires remove, then the chip takes itself out of the page unless a handler cancels the event. The chip never touches your data, so update your own list in the same handler, or a framework that renders the list brings the chip back on its next render.

remove-only is for an item that needs no action beyond removal: the label becomes plain text, and the remove button is the one control in the Tab order. Switch it on in the demo to see the label go inert.

Size⁠

size sets one of two sizes: small or extra-small. Omit it and the chip takes its size from your style configuration, which is small unless you have changed it. Use the smaller size where space is tight, as in a toolbar.

touch-target sets the area that takes a touch: at least 48 by 48 pixels, centered on the chip. Without it, the chip uses your style configuration's target, which is overflow unless you have changed it. The chip looks the same with every value; Pointer and touch says what each value does.

Icons⁠

icon-name takes the name of a Material Symbols icon and draws it before the label. For any other icon, put an cw-icon or an inline svg in the icon slot, which overrides icon-name; the chip logs a warning when both are set. The leading icon area is hidden from assistive technology, so keep the item's meaning in the label.

avatar styles the first item in the icon slot as a round avatar. remove-trailing-icon-name and the remove-trailing-icon slot replace the cross on the remove button in the same way.

flip-icon-in-rtl mirrors the icons that icon-name and remove-trailing-icon-name draw when the text direction is right to left; a slotted icon is never mirrored.

Badges⁠

badge-value puts a short count or label on the chip's corner, with no separate element to position. badge-dot shows a small dot instead, for "something new" without a number, and takes precedence over the value. badge-concealed hides the badge and keeps its value and dot setting, so clearing it shows the same badge again.

Tooltips⁠

tooltip-value adds a tooltip that opens on hover and on focus, and that a screen reader reads as the chip's description after its name. Use it for detail the label has no room for, such as an address behind a name. tooltip-position sets where it sits and has no effect without a value; omit it and the tooltip takes its position from your style configuration, which is end-center unless you have changed it.

A remove-only chip has no focusable primary control, so its tooltip is not announced; leave tooltip-value off such a chip.

Links⁠

href makes the label a link, so the chip opens something while its remove button still removes it. target sets where the link opens, as it does on an anchor. A link chip set to disabled or soft-disabled looks disabled and cannot be followed.

In the preview below the link goes to a fragment of the demo, because the sandbox keeps a clicked link from leaving the demo. The second chip pairs _blank with a real address, which the sandbox refuses, so it does nothing here; on your page it opens a new tab.

Selected⁠

selected paints the chip as selected, for an item the reader has picked among the entered items. It only changes the look: nothing in the chip toggles it, and no change event fires, so set it from your own handler.

Disabled and soft-disabled⁠

disabled switches the chip off. soft-disabled does the same but keeps the chip focusable, which suits one that must stay discoverable. Either one stops the remove button from working. A tooltip on a disabled chip is not announced, because keyboard focus never reaches it.

In a set⁠

Every demo on this tab puts its chips in a cw-input-chip-set, because entered items form a list. Switch the set off below and press Tab: it visits every chip in turn. Switch it back on, and Tab reaches the list once while the arrow keys take over. Chips and sets says why both are needed.

A chip added after the first render joins the set at once, and one removed leaves it.

Input chip set

Input chip

Properties⁠

Property	Attribute	Type	Description
`compareWith`		`(a: TItem, b: TItem) => boolean`	Decides whether two values name the same chip. When set, neither `valueKey` nor the default matching applies.
`valueKey`	`value-key`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.
`values`		`TItem[]`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.

Slots⁠

Slot	Description
(default)	The `cw-input-chip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Events⁠

Event	Type	Detail	Description
`change`	`SelectionChangeEvent`	`SelectionChangeEventDetail<TItem>`	Dispatched after `values` changes: a chip was removed, or, while code has not set `values`, a chip arrived or left. It does not fire when code sets `values`. It bubbles.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values name the same chip. When set, neither `valueKey` nor the default matching applies.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.
`values`	`TItem[]`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.

Children⁠

Child	Description
`children`	The `CrInputChip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Events⁠

Prop	Argument	Description
`onChange`	`SelectionChangeEvent<TItem>`	Dispatched after `values` changes: a chip was removed, or, while code has not set `values`, a chip arrived or left. It does not fire when code sets `values`. It bubbles. Its `detail` carries `value` and `values`.

Parameters⁠

Parameter	Type	Description
`Values`	`IList<TItem>`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.
`ValuesExpression`	`Expression<Func<IList<TItem>>>?`	Gets or sets an expression that identifies the bound value.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The `CbInputChip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Event callbacks⁠

Parameter	Type	Description
`OnChange`	`EventCallback<SelectionChangeEventArgs<TItem>>`	Dispatched after `Values` changes: a chip was removed, or, while code has not set `Values`, a chip arrived or left. It does not fire when code sets `Values`. It bubbles. Its `detail` carries `value` and `Values`.

Inputs⁠

Input	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values name the same chip. When set, neither `valueKey` nor the default matching applies.
`value`	`TItem[]`	—
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.
`values`	`TItem[]`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.

Content projection⁠

Content	Description
content with no `slot`	The `CaInputChip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Outputs⁠

Output	Event	Description
`cwChange`	`SelectionChangeEvent`	Dispatched after `values` changes: a chip was removed, or, while code has not set `values`, a chip arrived or left. It does not fire when code sets `values`. It bubbles. Its `detail` carries `value` and `values`.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values name the same chip. When set, neither `valueKey` nor the default matching applies.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.
`values`	`TItem[]`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.

Slots⁠

Slot	Description
`default`	The `CvInputChip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Events⁠

Event	Type	Description
`change`	`SelectionChangeEvent`	Dispatched after `values` changes: a chip was removed, or, while code has not set `values`, a chip arrived or left. It does not fire when code sets `values`. It bubbles. Its `detail` carries `value` and `values`.

Props⁠

Prop	Type	Description
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether two values name the same chip. When set, neither `valueKey` nor the default matching applies.
`valueKey`	`string`	The field that identifies an object value: two objects match when this field holds the same value on both.
`values`	`TItem[]`	The chips' values, in the order the chips appear. Once code sets it, it is the app's list: a chip's remove button no longer removes the chip, and the set reports the list without that chip's value instead, for the app to render.

Snippets⁠

Snippet	Description
`children`	The `CsInputChip` elements, in the order they appear.

Only cw-input-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Events⁠

Prop	Type	Description
`onChange`	`SelectionChangeEvent`	Dispatched after `values` changes: a chip was removed, or, while code has not set `values`, a chip arrived or left. It does not fire when code sets `values`. It bubbles. Its `detail` carries `value` and `values`.

Properties⁠

Property	Attribute	Type	Description
`avatar`	`avatar`	`boolean`default `false`	Styles the first item in the `icon` slot as a round avatar. See Icons.
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`download`	`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`flip-icon-in-rtl`	`boolean`default `false`	Flips the icons supplied by the `icon-name` and `remove-trailing-icon-name` properties in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`icon-name`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`removeOnly`	`remove-only`	`boolean`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`removeTrailingIconName`	`remove-trailing-icon-name`	`string`	A Material Symbols icon name. This is an alternative to using the `remove-trailing-icon` slot. If both are provided, the `remove-trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`selected`	`selected`	`boolean`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`size`	`sizesmall`, `extra-small`	`ChipSizeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`soft-disabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`target`	`target_blank`, `_self`, `_parent`, `_top`, `""`	`UrlTargetUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`tooltip-positionstart-start`, `start-center`, `start-end`, `center-start`, `center-end`, `end-start`, `end-center`, `end-end`	`TooltipPositionTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`tooltip-value`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`value`	`value`	`unknown`	The chip's value: a `cw-input-chip-set` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Slots⁠

Slot	Description
(default)	The chip's label content.
`icon`	The icon to display in the chip, intended for a `cw-icon` or similarly sized visual content such as an SVG.
`remove-trailing-icon`	The icon to display in the trailing position to remove the chip, intended for a `cw-icon` or equivalent and with a default svg cross.

Events⁠

Event	Type	Detail	Description
`click`	`MouseEvent`	—	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`link-activate`	`LinkActivateEvent`	`LinkActivateEventDetail`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable.
`remove`	`Event`	—	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

Props⁠

Prop	Type	Description
`avatar`	`boolean`default `false`	Styles the first item in the `slot="icon"` child as a round avatar. See Icons.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icons supplied by the `iconName` and `removeTrailingIconName` properties in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `slot="icon"` child. If both are provided, the `slot="icon"` child will take precedence, and a warning will be logged. See Icons.
`onNavigate`	`(detail: LinkActivateEventDetail, event: LinkActivateEvent) => void`	Called when the link points inside the app: the same origin, opening in the same tab. The browser's navigation is canceled first, so this handler navigates, and it replaces the navigation `ChameleonRouterProvider` would make.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`removeOnly`	`boolean`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`removeTrailingIconName`	`string`	A Material Symbols icon name. This is an alternative to using the `slot="remove-trailing-icon"` child. If both are provided, the `slot="remove-trailing-icon"` child will take precedence, and a warning will be logged. See Icons.
`selected`	`boolean`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`value`	`unknown`	The chip's value: a `CrInputChipSet` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Children⁠

Child	Description
`children`	The chip's label content.
a child with `slot="icon"`	The icon to display in the chip, intended for a `CrIcon` or similarly sized visual content such as an SVG.
a child with `slot="remove-trailing-icon"`	The icon to display in the trailing position to remove the chip, intended for a `CrIcon` or equivalent and with a default svg cross.

Events⁠

Prop	Argument	Description
`onClick`	`React.MouseEvent<HTMLElement>`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`onRemove`	`Event`	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

Parameters⁠

Parameter	Type	Description
`Avatar`	`bool?`default `false`	Styles the first item in the `Icon` render fragment as a round avatar. See Icons.
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Disabled`	`bool?`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`Download`	`string?`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `Href` is set.
`FlipIconInRtl`	`bool?`default `false`	Flips the icons supplied by the `IconName` and `RemoveTrailingIconName` properties in RTL mode. A slotted icon is not flipped. See Icons.
`Href`	`string?`	The URL to navigate to when the chip is clicked. A chip with `Href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`IconName`	`string?`	A Material Symbols icon name. This is an alternative to using the `Icon` render fragment. If both are provided, the `Icon` render fragment will take precedence, and a warning will be logged. See Icons.
`OnNavigate`	`EventCallback<LinkActivateEventArgs>`	Navigates for a link that points inside the app: the same base address, opening in the same tab. The browser's navigation is canceled first, and this callback replaces the NavigationManager.NavigateTo the component calls by default. It is not called for any other link.
`Rel`	`string?`	The link's relationship to the linked URL, as the anchor's `Rel`, used exactly as given. Unset, the anchor has no `Rel`. Ignored unless `Href` is set.
`RemoveOnly`	`bool?`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`RemoveTrailingIconName`	`string?`	A Material Symbols icon name. This is an alternative to using the `RemoveTrailingIcon` render fragment. If both are provided, the `RemoveTrailingIcon` render fragment will take precedence, and a warning will be logged. See Icons.
`Selected`	`bool?`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`Size`	`ChipSize?ChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`SoftDisabled`	`bool?`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`Target`	`UrlTarget?UrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `Href`. Empty, it opens in the same tab. Ignored unless `Href` is set. See Links.
`TooltipPosition`	`TooltipPosition?TooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `TooltipValue`. See Tooltips.
`TooltipValue`	`string?`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`Value`	`TItem`	The chip's value: a `CbInputChipSet` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `Value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Render fragments⁠

Once you write Icon or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <Icon> is a compile error. Here ChildContent is: The chip's label content.

<CbInputChip>
    <Icon><CbIcon>favorite</CbIcon></Icon>
    <ChildContent>Main content</ChildContent>
</CbInputChip>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The chip's label content.
`Icon`	`RenderFragment?`	The icon to display in the chip, intended for a `CbIcon` or similarly sized visual content such as an SVG.
`RemoveTrailingIcon`	`RenderFragment?`	The icon to display in the trailing position to remove the chip, intended for a `CbIcon` or equivalent and with a default svg cross.

Event callbacks⁠

Parameter	Type	Description
`OnClick`	`EventCallback<MouseEventArgs>`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`OnLinkActivate`	`EventCallback<LinkActivateEventArgs>`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `Href`, `Target`, `Download`, `Rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`OnRemove`	`EventCallback`	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

Inputs⁠

Input	Type	Description
`avatar`	`boolean`default `false`	Styles the first item in the `icon` slot as a round avatar. See Icons.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icons supplied by the `iconName` and `removeTrailingIconName` properties in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`removeOnly`	`boolean`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`removeTrailingIconName`	`string`	A Material Symbols icon name. This is an alternative to using the `remove-trailing-icon` slot. If both are provided, the `remove-trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`selected`	`boolean`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`value`	`unknown`	The chip's value: a `CaInputChipSet` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Content projection⁠

Content	Description
content with no `slot`	The chip's label content.
an element with `slot="icon"`	The icon to display in the chip, intended for a `CaIcon` or similarly sized visual content such as an SVG.
an element with `slot="remove-trailing-icon"`	The icon to display in the trailing position to remove the chip, intended for a `CaIcon` or equivalent and with a default svg cross.

Outputs⁠

Output	Event	Description
`cwClick`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`cwLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`cwRemove`	`Event`	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

Props⁠

Prop	Type	Description
`avatar`	`boolean`default `false`	Styles the first item in the `icon` slot as a round avatar. See Icons.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icons supplied by the `iconName` and `removeTrailingIconName` properties in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`removeOnly`	`boolean`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`removeTrailingIconName`	`string`	A Material Symbols icon name. This is an alternative to using the `remove-trailing-icon` slot. If both are provided, the `remove-trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`selected`	`boolean`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`value`	`unknown`	The chip's value: a `CvInputChipSet` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Slots⁠

Slot	Description
`default`	The chip's label content.
`icon`	The icon to display in the chip, intended for a `CvIcon` or similarly sized visual content such as an SVG.
`remove-trailing-icon`	The icon to display in the trailing position to remove the chip, intended for a `CvIcon` or equivalent and with a default svg cross.

Events⁠

Event	Type	Description
`click`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`linkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`remove`	`Event`	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

Props⁠

Prop	Type	Description
`avatar`	`boolean`default `false`	Styles the first item in the `iconSnippet` snippet as a round avatar. See Icons.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. See Links, Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icons supplied by the `iconName` and `removeTrailingIconName` properties in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `iconSnippet` snippet. If both are provided, the `iconSnippet` snippet will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`removeOnly`	`boolean`default `false`	Indicates that there are no actions on the chip except to remove it. See Removing.
`removeTrailingIconName`	`string`	A Material Symbols icon name. This is an alternative to using the `removeTrailingIconSnippet` snippet. If both are provided, the `removeTrailingIconSnippet` snippet will take precedence, and a warning will be logged. See Icons.
`selected`	`boolean`default `false`	Shows the chip in its selected style. It is visual only: a click does not change it and assistive technology is not told. See Selected.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Links, Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`value`	`unknown`	The chip's value: a `CsInputChipSet` reports it among its `values`. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string.

When both href and remove-only are set, href wins.

Snippets⁠

Snippet	Description
`children`	The chip's label content.
`iconSnippet`	The icon to display in the chip, intended for a `CsIcon` or similarly sized visual content such as an SVG.
`removeTrailingIconSnippet`	The icon to display in the trailing position to remove the chip, intended for a `CsIcon` or equivalent and with a default svg cross.

Events⁠

Prop	Type	Description
`onClick`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.
`onRemove`	`Event`	Dispatched when the remove button is clicked. The chip then removes itself unless the event is canceled. It bubbles and is cancelable.

remove does not fire while disabled or soft-disabled is set.

A press on the remove button fires no click.

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Names and states⁠

The primary action is a button, which follows the WAI-ARIA Authoring Practices: Button pattern, or a link when href is set, which follows the WAI-ARIA Authoring Practices: Link pattern. A second button removes the chip, and with remove-only the primary action is plain text, not a control.

The accessible name is the label in the default slot. Give the chip an aria-label only when the label's text does not name the item, and keep the visible words in it.
Only aria-label and aria-label-remove take effect on the chip. Any other aria-* attribute on the chip has no effect.
The remove button's name is aria-label-remove when set, else "Remove" followed by the chip's aria-label, else "Remove" followed by the label text. The word "Remove" is English only, so set aria-label-remove on a page in another language.
A remove-only chip has no control for its label, so assistive technology may ignore an aria-label on it. Name such a chip by its label text.
The leading icon, an avatar image, and the remove button's cross are hidden from assistive technology, so none of them adds to the chip's name.
The tooltip text is the focused control's description: a screen reader announces it after the name, unless it only repeats the name, which is skipped. A remove-only chip has no focusable primary control, so its tooltip is never read.
selected changes only the chip's look and writes no ARIA state. Where the reader toggles a setting, a filter chip exposes it with aria-pressed.
An input chip set is announced as a list, and each input chip in it as a list item, so a screen reader reports how many items the list holds. The set has no name of its own: give it an aria-label that names what it lists, such as "Recipients".

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the primary action, or to the remove button on a remove-only chip
Enter	Presses the button, follows the link, or removes the chip from the remove button
Space	Presses the button, or removes the chip from the remove button
Right Arrow	Moves focus from the primary action to the remove button
Left Arrow	Moves focus from the remove button back to the primary action

Enter and Space are the native elements' own behavior; the arrow keys are the chip's. The arrow keys swap in a right-to-left layout, and a remove-only chip has one action, so they do nothing there.

The remove button is outside the Tab order except on a remove-only chip, so reach it with the arrow keys.
A focus ring shows on keyboard focus only, and a removable chip has two: one for the primary action and one for the remove button.
disabled removes the primary action from the Tab order. soft-disabled keeps it there, announces it as dimmed, and blocks activation. With either set, pressing the remove button does nothing.
Inside an input chip set, Tab reaches the whole set once, and the arrow keys move between chips, skipping a disabled chip but not a soft-disabled one and wrapping at the ends. Home and End move to the first and last chip, End landing on a removable last chip's remove button, and focus stays where it was when that chip is disabled. Moving back onto a chip lands on its remove button. Up and Down Arrow are not handled, and a tabindex on a chip in a set has no effect.
A chip with hidden is left out of the set's keyboard travel: the arrow keys, Home, and End pass over it, and it is never the Tab stop.

Pointer and touch⁠

touch-target offers none, overflow, and wrapper. The default, overflow, extends the touch area to at least 48 by 48 pixels without growing the chip, which exceeds the 24 by 24 pixels WCAG 2.5.8 asks for; the Size example shows the setting.
The remove button takes its own touch target.

Display settings⁠

With forced colors active, a disabled chip's label and icons take GrayText, the remove button's cross takes ButtonText, and a selected chip's icon and label take ActiveText.
With a reduced-motion preference, the focus ring's animation stops and the tooltip appears with no fade.
On a right-to-left page, flip-icon-in-rtl mirrors the icons from icon-name and remove-trailing-icon-name, and the arrow keys swap direction.

Standards⁠

With its defaults, the input chip meets seven WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)
1.3.1 Info and Relationships (A)
1.4.13 Content on Hover or Focus (AA)

Four more depend on how you use it:

4.1.2 Name, Role, Value (A): give the chip a label, or an aria-label when it has none, and give each set an aria-label.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label.
2.4.6 Headings and Labels (AA): write a label that says what the item is.
1.1.1 Non-text Content (A): keep the item's meaning in the label, since an icon or avatar image is hidden from assistive technology.

Token	Value
`--ct-input-chip-avatar-radius`	`--ct-sys-corner-radius-full` `--ct-input-chip-avatar-radius`
`--ct-input-chip-avatar-size`	`24px` `--ct-input-chip-avatar-size`
`--ct-input-chip-container-elevation`	`--ct-sys-elevation-level0` `--ct-input-chip-container-elevation`
`--ct-input-chip-container-height`	`32px` `--ct-input-chip-container-height`
`--ct-input-chip-disabled-avatar-opacity`	`0.38` `--ct-input-chip-disabled-avatar-opacity`
`--ct-input-chip-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-input-chip-disabled-label-text-color`
`--ct-input-chip-disabled-label-text-opacity`	`0.38` `--ct-input-chip-disabled-label-text-opacity`
`--ct-input-chip-disabled-leading-icon-color`	`--ct-sys-color-on-surface` `--ct-input-chip-disabled-leading-icon-color`
`--ct-input-chip-disabled-leading-icon-opacity`	`0.38` `--ct-input-chip-disabled-leading-icon-opacity`
`--ct-input-chip-disabled-outline-color`	`--ct-sys-color-on-surface` `--ct-input-chip-disabled-outline-color`
`--ct-input-chip-disabled-outline-opacity`	`0.12` `--ct-input-chip-disabled-outline-opacity`
`--ct-input-chip-disabled-selected-container-color`	`--ct-sys-color-on-surface` `--ct-input-chip-disabled-selected-container-color`
`--ct-input-chip-disabled-selected-container-opacity`	`0.12` `--ct-input-chip-disabled-selected-container-opacity`
`--ct-input-chip-disabled-trailing-icon-color`	`--ct-sys-color-on-surface` `--ct-input-chip-disabled-trailing-icon-color`
`--ct-input-chip-disabled-trailing-icon-opacity`	`0.38` `--ct-input-chip-disabled-trailing-icon-opacity`
`--ct-input-chip-focus-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-focus-label-text-color`
`--ct-input-chip-focus-leading-icon-color`	`--ct-sys-color-primary` `--ct-input-chip-focus-leading-icon-color`
`--ct-input-chip-focus-trailing-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-focus-trailing-icon-color`
`--ct-input-chip-hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-hover-label-text-color`
`--ct-input-chip-hover-leading-icon-color`	`--ct-sys-color-primary` `--ct-input-chip-hover-leading-icon-color`
`--ct-input-chip-hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-hover-state-layer-color`
`--ct-input-chip-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-input-chip-hover-state-layer-opacity`
`--ct-input-chip-hover-trailing-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-hover-trailing-icon-color`
`--ct-input-chip-icon-label-space`	`8px` `--ct-input-chip-icon-label-space`
`--ct-input-chip-icon-size`	`18px` `--ct-input-chip-icon-size`
`--ct-input-chip-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-label-text-color`
`--ct-input-chip-label-text-font`	`--ct-sys-typescale-label-large-font` `--ct-input-chip-label-text-font`
`--ct-input-chip-label-text-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-input-chip-label-text-line-height`
`--ct-input-chip-label-text-size`	`--ct-sys-typescale-label-large-size` `--ct-input-chip-label-text-size`
`--ct-input-chip-label-text-weight`	`--ct-sys-typescale-label-large-weight` `--ct-input-chip-label-text-weight`
`--ct-input-chip-leading-icon-color`	`--ct-sys-color-primary` `--ct-input-chip-leading-icon-color`
`--ct-input-chip-leading-space`	`16px` `--ct-input-chip-leading-space`
`--ct-input-chip-outline-color`	`--ct-sys-color-outline` `--ct-input-chip-outline-color`
`--ct-input-chip-outline-width`	`1px` `--ct-input-chip-outline-width`
`--ct-input-chip-pressed-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-pressed-label-text-color`
`--ct-input-chip-pressed-leading-icon-color`	`--ct-sys-color-primary` `--ct-input-chip-pressed-leading-icon-color`
`--ct-input-chip-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-pressed-state-layer-color`
`--ct-input-chip-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-input-chip-pressed-state-layer-opacity`
`--ct-input-chip-pressed-trailing-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-pressed-trailing-icon-color`
`--ct-input-chip-selected-container-color`	`--ct-sys-color-secondary-container` `--ct-input-chip-selected-container-color`
`--ct-input-chip-selected-focus-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-focus-label-text-color`
`--ct-input-chip-selected-focus-trailing-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-focus-trailing-icon-color`
`--ct-input-chip-selected-hover-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-hover-label-text-color`
`--ct-input-chip-selected-hover-state-layer-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-hover-state-layer-color`
`--ct-input-chip-selected-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-input-chip-selected-hover-state-layer-opacity`
`--ct-input-chip-selected-hover-trailing-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-hover-trailing-icon-color`
`--ct-input-chip-selected-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-label-text-color`
`--ct-input-chip-selected-leading-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-leading-icon-color`
`--ct-input-chip-selected-outline-width`	`0px` `--ct-input-chip-selected-outline-width`
`--ct-input-chip-selected-pressed-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-pressed-label-text-color`
`--ct-input-chip-selected-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-selected-pressed-state-layer-color`
`--ct-input-chip-selected-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-input-chip-selected-pressed-state-layer-opacity`
`--ct-input-chip-selected-pressed-trailing-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-pressed-trailing-icon-color`
`--ct-input-chip-selected-trailing-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-input-chip-selected-trailing-icon-color`
`--ct-input-chip-trailing-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-input-chip-trailing-icon-color`
`--ct-input-chip-trailing-space`	`16px` `--ct-input-chip-trailing-space`
`--ct-input-chip-with-leading-icon-leading-space`	`8px` `--ct-input-chip-with-leading-icon-leading-space`
`--ct-input-chip-with-trailing-icon-trailing-space`	`8px` `--ct-input-chip-with-trailing-icon-trailing-space`

Input chip

Reference docs⁠link

Choosing a chip⁠link

Chips and sets⁠link

Built in⁠link

Using input chips well⁠link

Removing⁠link

Size⁠link

Icons⁠link

Badges⁠link

Tooltips⁠link

Links⁠link

Selected⁠link

Disabled and soft-disabled⁠link

In a set⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a chip⁠

Chips and sets⁠

Built in⁠

Using input chips well⁠

Removing⁠

Size⁠

Icons⁠

Badges⁠

Tooltips⁠

Links⁠

Selected⁠

Disabled and soft-disabled⁠

In a set⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠