Chip
Material Design 3 chip web component (assist, filter, input, suggestion variants).
- 4.1 KB gzipped
- @lit-material/chip 0.2.0
- Renders on the server
Example
Chip
Assist, filter, input, and suggestion variants; not form-associated.
Markup
<lit-material-chip variant="assist">Chip</lit-material-chip>
Elevated / link
Chip input
Type and press Enter or comma; paste several at once; Backspace removes the last.
Input (removable; click × to remove)
Install
npm install @lit-material/chip @lit-material/tokensimport "@lit-material/chip";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-chip-input>
A field that turns what you type into chips: tags, labels, email addresses, allowed hosts. Enter or a comma adds the typed value; pasting several values separated by commas, spaces or new lines adds them all. Each chip has a remove button, and Backspace in the empty field removes the last one.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
values | values | string[] | [] | The chips' values. |
label | label | string | "" | Visible label above the field; also names the input. |
placeholder | placeholder | string | "" | |
supportingText | supporting-text | string | "" | Help under the field, replaced by an error while there is one. |
validator | property only | (value: string) => string | undefined | none | Refuses a value: return a message, or "" to accept. |
allowDuplicates | allow-duplicates | boolean | false | |
max | max | number | 0 | Most chips allowed; 0 for no limit. |
disabled | disabled | boolean | false | |
invalid | invalid | boolean | false | Set while the typed value was refused; reflected. |
Events
| Event | Description |
|---|---|
change | After a value is added or removed; detail: { values }. |
CSS parts
| Part | Description |
|---|---|
field | The box holding the chips and the input. |
input | The text input. |
<lit-material-chip>
Material Design 3 chip.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | ChipVariant | "assist" | |
selected | selected | boolean | false | |
disabled | disabled | boolean | false | |
elevated | elevated | boolean | false | |
removable | removable | boolean | false | |
removeLabel | remove-label | string | "Remove" | Accessible name of the remove button, e.g. "Remove app=web". |
href | href | string | "" | If set, renders the main action as a link (<a>) instead of a <button>. |
target | target | string | "" |
Events
| Event | Description |
|---|---|
change | Bubbles when a filter chip's selected state toggles via user interaction. |
remove | Cancelable; fires when the remove button is activated. Unless event.preventDefault() is called, the chip removes itself from the DOM afterward. |
Slots
| Slot | Description |
|---|---|
| default | The chip's label. |
leading-icon | An optional icon before the label. Ignored on a selected filter chip, which shows a checkmark in its place. |
CSS parts
| Part | Description |
|---|---|
chip | The outer container (background/border/elevation). |
action | The main clickable <button> or <a> (icon + label). |
remove-button | The trailing remove <button>, when removable. |
ripple | The state-layer element the hover/press feedback is drawn on. |