mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 22:44:05 +02:00
627 lines
23 KiB
Markdown
627 lines
23 KiB
Markdown
|
<!-- catalog-only-start --><!-- ---
|
|||
|
name: Chips
|
|||
|
dirname: chips
|
|||
|
-----><!-- catalog-only-end -->
|
|||
|
|
|||
|
<catalog-component-header image-align="start">
|
|||
|
<catalog-component-header-title slot="title">
|
|||
|
|
|||
|
# Chips
|
|||
|
|
|||
|
<!--*
|
|||
|
# Document freshness: For more information, see go/fresh-source.
|
|||
|
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
|||
|
tag: 'docType:reference'
|
|||
|
*-->
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
|
|||
|
<!-- go/md-chips -->
|
|||
|
|
|||
|
<!-- [TOC] -->
|
|||
|
|
|||
|
<!-- external-only-start -->
|
|||
|
**This documentation is fully rendered on the
|
|||
|
[Material Web catalog](https://material-web.dev/components/chip/)**
|
|||
|
<!-- external-only-end -->
|
|||
|
|
|||
|
<!-- no-catalog-end -->
|
|||
|
|
|||
|
[Chips](https://m3.material.io/components/chips)<!-- {.external} --> help people enter
|
|||
|
information, make selections, filter content, or trigger actions.
|
|||
|
|
|||
|
While buttons are expected to appear consistently and with familiar calls to
|
|||
|
action, chips should appear dynamically as a group of multiple interactive
|
|||
|
elements.
|
|||
|
|
|||
|
</catalog-component-header-title>
|
|||
|
|
|||
|
<img class="hero" src="images/chips/hero.webp" alt="Two collections of filter chips, with some options selected and some unselected."
|
|||
|
title="Filter chips">
|
|||
|
|
|||
|
</catalog-component-header>
|
|||
|
|
|||
|
* [Design article](https://m3.material.io/components/chips) <!-- {.external} -->
|
|||
|
* [API Documentation](#api)
|
|||
|
* [Source code](https://github.com/material-components/material-web/tree/main/chips)
|
|||
|
<!-- {.external} -->
|
|||
|
|
|||
|
## Types
|
|||
|
|
|||
|
1. [Assist chip](#assist-chip)
|
|||
|
1. [Filter chip](#filter-chip)
|
|||
|
1. [Input chip](#input-chip)
|
|||
|
1. [Suggestion chip](#suggestion-chip)
|
|||
|
|
|||
|
<!-- catalog-only-start -->
|
|||
|
|
|||
|
<!--
|
|||
|
|
|||
|
## Interactive Demo
|
|||
|
|
|||
|
{% playgroundexample dirname=dirname %}
|
|||
|
|
|||
|
-->
|
|||
|
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
## Usage
|
|||
|
|
|||
|
Choose the type of chip based on its purpose and author.
|
|||
|
|
|||
|
- **Assist** chips are common actions, such as adding an event to a calendar.
|
|||
|
- **Filter** chips are tags used to filter content, such as shopping
|
|||
|
categories.
|
|||
|
- **Input** chips are pieces of information entered by a user, such as event
|
|||
|
attendees.
|
|||
|
- **Suggestion** chips represent dynamic suggestions for user input, such as
|
|||
|
text message replies.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<md-chip-set>
|
|||
|
<md-assist-chip label="Assist"></md-assist-chip>
|
|||
|
<md-filter-chip label="Filter"></md-filter-chip>
|
|||
|
<md-input-chip label="Input"></md-input-chip>
|
|||
|
<md-suggestion-chip label="Suggestion"></md-suggestion-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Chip sets
|
|||
|
|
|||
|
<!-- go/md-chip-set -->
|
|||
|
|
|||
|
Chips should always appear in a set. Chip sets are
|
|||
|
[toolbars](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role)<!-- {.external} -->
|
|||
|
that can display any type of chip or other toolbar items.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>New event</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-filter-chip label="All day"></md-filter-chip>
|
|||
|
<md-assist-chip label="Add to calendar"></md-assist-chip>
|
|||
|
<md-assist-chip label="Set a reminder"></md-assist-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Icons
|
|||
|
|
|||
|
All chips may display an optional icon. Input chips can specify if an avatar
|
|||
|
picture is displayed.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<md-chip-set>
|
|||
|
<md-assist-chip label="Add to calendar">
|
|||
|
<md-icon slot="icon">event</md-icon>
|
|||
|
</md-assist-chip>
|
|||
|
|
|||
|
<md-input-chip label="Ping Qiang" avatar>
|
|||
|
<img slot="icon" src="...">
|
|||
|
</md-input-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Elevated
|
|||
|
|
|||
|
Assist, filter, and suggestion chips can be elevated if the placement requires
|
|||
|
protection, such as on top of an image.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<div>
|
|||
|
<img src="...">
|
|||
|
<md-chip-set>
|
|||
|
<md-suggestion-chip label="Share" elevated></md-suggestion-chip>
|
|||
|
<md-suggestion-chip label="Favorite" elevated></md-suggestion-chip>
|
|||
|
</md-chip-set>
|
|||
|
</div>
|
|||
|
```
|
|||
|
|
|||
|
## Accessibility
|
|||
|
|
|||
|
Add an
|
|||
|
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
|||
|
attribute to chip sets or reference a label with
|
|||
|
[`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)<!-- {.external} -->.
|
|||
|
Add an `aria-label` to chips whose labels need to be more descriptive.
|
|||
|
|
|||
|
```html
|
|||
|
<h3 id="dates-label">Dates</h3>
|
|||
|
<md-chip-set aria-labelledby="dates-label">
|
|||
|
<md-filter-chip label="Mon" aria-label="Monday"></md-filter-chip>
|
|||
|
<md-filter-chip label="Tue" aria-label="Tuesday"></md-filter-chip>
|
|||
|
<md-filter-chip label="Wed" aria-label="Wednesday"></md-filter-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Focusable and disabled
|
|||
|
|
|||
|
By default, disabled chips are not focusable with the keyboard, while
|
|||
|
"soft-disabled" chips are. Some use cases encourage focusability of disabled
|
|||
|
toolbar items to increase their discoverability.
|
|||
|
|
|||
|
See the
|
|||
|
[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
|
|||
|
for guidance on when this is recommended.
|
|||
|
|
|||
|
```html
|
|||
|
<md-chip-set aria-label="Actions">
|
|||
|
<!--
|
|||
|
Disabled until text is selected. Since both are disabled by default, keep
|
|||
|
them focusable so that screen readers can discover the actions available.
|
|||
|
-->
|
|||
|
<md-assist-chip label="Copy" soft-disabled></md-assist-chip>
|
|||
|
<md-assist-chip label="Paste" soft-disabled></md-assist-chip>
|
|||
|
</md-chip-set>
|
|||
|
<md-outlined-text-field type="textarea"></md-outlined-text-field>
|
|||
|
```
|
|||
|
|
|||
|
## Assist chip
|
|||
|
|
|||
|
<!-- go/md-assist-chip -->
|
|||
|
|
|||
|
[Assist chips](https://m3.material.io/components/chips/guidelines#5dd1928c-1476-4029-bdc5-fde66fc0dcb1)<!-- {.external} -->
|
|||
|
represent smart or automated actions that can span multiple apps, such as
|
|||
|
opening a calendar event from the home screen.
|
|||
|
|
|||
|
Assist chips function as though the user asked an assistant to complete the
|
|||
|
action. They should appear dynamically and contextually in a UI.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>A restaraunt location</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-assist-chip label="Add to my itinerary">
|
|||
|
<md-icon slot="icon">calendar</md-icon>
|
|||
|
</md-assist-chip>
|
|||
|
<md-assist-chip label="12 mins from hotel">
|
|||
|
<md-icon slot="icon">map</md-icon>
|
|||
|
</md-assist-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
## Filter chip
|
|||
|
|
|||
|
<!-- go/md-filter-chip -->
|
|||
|
|
|||
|
[Filter chips](https://m3.material.io/components/chips/guidelines#8d453d50-8d8e-43aa-9ae3-87ed134d2e64)<!-- {.external} -->
|
|||
|
use tags or descriptive words to filter content. They can be a good alternative
|
|||
|
to toggle buttons or checkboxes.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>Choose where to share</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-filter-chip label="Docs"></md-filter-chip>
|
|||
|
<md-filter-chip label="Slides" selected></md-filter-chip>
|
|||
|
<md-filter-chip label="Sheets" selected></md-filter-chip>
|
|||
|
<md-filter-chip label="Images"></md-filter-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Removable
|
|||
|
|
|||
|
Filter chips can optionally be removable from the chip set. Removable chips have
|
|||
|
a trailing remove icon.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>Colors</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-filter-chip label="Red" removable selected></md-filter-chip>
|
|||
|
<md-filter-chip label="Yellow" removable></md-filter-chip>
|
|||
|
<md-filter-chip label="Blue" removable></md-filter-chip>
|
|||
|
<md-filter-chip label="Green" removable></md-filter-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
## Input chip
|
|||
|
|
|||
|
<!-- go/md-input-chip -->
|
|||
|
|
|||
|
[Input chips](https://m3.material.io/components/chips/guidelines#4d2d5ef5-3fcd-46e9-99f2-067747b2393f)<!-- {.external} -->
|
|||
|
represent discrete pieces of information entered by a user, such as Gmail
|
|||
|
contacts or filter options within a search field.
|
|||
|
|
|||
|
Input chips whose icons are user images may add the `avatar` attribute to
|
|||
|
display the image in a larger circle.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<md-outlined-text-field label="Attendees" type="email"></md-outlined-text-field>
|
|||
|
|
|||
|
<md-chip-set>
|
|||
|
<md-input-chip label="Ping Qiang" avatar>
|
|||
|
<img slot="icon" src="...">
|
|||
|
</md-input-chip>
|
|||
|
<md-input-chip label="Thea Schröder" avatar>
|
|||
|
<img slot="icon" src="...">
|
|||
|
</md-input-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
### Remove-only
|
|||
|
|
|||
|
All input chips are removable. If an input chip does not have an action
|
|||
|
associated with clicking on it, it may be marked as `remove-only`.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>Favorite movies</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-input-chip label="Star Wars" remove-only></md-input-chip>
|
|||
|
<md-input-chip label="Star Trek" remove-only></md-input-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
## Suggestion chip
|
|||
|
|
|||
|
<!-- go/md-suggestion-chip -->
|
|||
|
|
|||
|
[Suggestion chips](https://m3.material.io/components/chips/guidelines#36d7bb16-a9bf-4cf6-a73d-8e05510d66a7)<!-- {.external} -->
|
|||
|
help narrow a user’s intent by presenting dynamically generated suggestions,
|
|||
|
such as possible responses or search filters.
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
|
|||
|
<!-- catalog-only-end -->
|
|||
|
|
|||
|
```html
|
|||
|
<h3>Suggested reply</h3>
|
|||
|
<md-chip-set>
|
|||
|
<md-suggestion-chip label="I agree"></md-suggestion-chip>
|
|||
|
<md-suggestion-chip label="Looks good to me"></md-suggestion-chip>
|
|||
|
<md-suggestion-chip label="Thank you"></md-suggestion-chip>
|
|||
|
</md-chip-set>
|
|||
|
```
|
|||
|
|
|||
|
## Theming
|
|||
|
|
|||
|
Chips support [Material theming](../theming/README.md) and can be customized in
|
|||
|
terms of color, typography, and shape.
|
|||
|
|
|||
|
### Assist chip tokens
|
|||
|
|
|||
|
Token | Default value
|
|||
|
----------------------------------- | -------------------------------------
|
|||
|
`--md-assist-chip-outline-color` | `--md-sys-color-outline`
|
|||
|
`--md-assist-chip-container-shape` | `--md-sys-shape-corner-small`
|
|||
|
`--md-assist-chip-icon-size` | `18px`
|
|||
|
`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
|
|||
|
`--md-assist-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
|||
|
|
|||
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)
|
|||
|
<!-- {.external} -->
|
|||
|
|
|||
|
### Assist chip example
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<style>
|
|||
|
:root {
|
|||
|
--md-assist-chip-container-shape: 0px;
|
|||
|
--md-assist-chip-label-text-font: system-ui;
|
|||
|
--md-sys-color-outline: #6F7979;
|
|||
|
--md-sys-color-on-surface: #191C1C;
|
|||
|
}
|
|||
|
</style>
|
|||
|
|
|||
|
<md-assist-chip label="Assist"></md-assist-chip>
|
|||
|
```
|
|||
|
|
|||
|
### Filter chip tokens
|
|||
|
|
|||
|
Token | Default value
|
|||
|
------------------------------------------- | -------------
|
|||
|
`--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`
|
|||
|
`--md-filter-chip-outline-color` | `--md-sys-color-outline`
|
|||
|
`--md-filter-chip-container-shape` | `--md-sys-shape-corner-small`
|
|||
|
`--md-filter-chip-icon-size` | `18px`
|
|||
|
`--md-filter-chip-label-text-color` | `--md-sys-color-on-surface`
|
|||
|
`--md-filter-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
|||
|
|
|||
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)
|
|||
|
<!-- {.external} -->
|
|||
|
|
|||
|
### Filter chip example
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<style>
|
|||
|
:root {
|
|||
|
--md-filter-chip-container-shape: 0px;
|
|||
|
--md-filter-chip-label-text-font: system-ui;
|
|||
|
--md-sys-color-outline: #6f7979;
|
|||
|
--md-sys-color-on-surface: #191c1c;
|
|||
|
--md-sys-color-secondary-container: #cce8e7;
|
|||
|
}
|
|||
|
</style>
|
|||
|
|
|||
|
<md-filter-chip label="Filter"></md-filter-chip>
|
|||
|
```
|
|||
|
|
|||
|
### Input chip tokens
|
|||
|
|
|||
|
Token | Default value
|
|||
|
---------------------------------- | -------------------------------------
|
|||
|
`--md-input-chip-outline-color` | `--md-sys-color-outline`
|
|||
|
`--md-input-chip-container-shape` | `--md-sys-shape-corner-small`
|
|||
|
`--md-input-chip-icon-size` | `18px`
|
|||
|
`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
|
|||
|
`--md-input-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
|||
|
|
|||
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)
|
|||
|
<!-- {.external} -->
|
|||
|
|
|||
|
### Input chip example
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<style>
|
|||
|
:root {
|
|||
|
--md-input-chip-container-shape: 0px;
|
|||
|
--md-input-chip-label-text-font: system-ui;
|
|||
|
--md-sys-color-outline: #6f7979;
|
|||
|
--md-sys-color-on-surface: #191c1c;
|
|||
|
}
|
|||
|
</style>
|
|||
|
|
|||
|
<md-input-chip label="Input"></md-input-chip>
|
|||
|
```
|
|||
|
|
|||
|
### Suggestion chip tokens
|
|||
|
|
|||
|
Token | Default value
|
|||
|
--------------------------------------- | -------------------------------------
|
|||
|
`--md-suggestion-chip-outline-color` | `--md-sys-color-outline`
|
|||
|
`--md-suggestion-chip-container-shape` | `--md-sys-shape-corner-small`
|
|||
|
`--md-suggestion-chip-icon-size` | `18px`
|
|||
|
`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
|
|||
|
`--md-suggestion-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
|||
|
|
|||
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)
|
|||
|
<!-- {.external} -->
|
|||
|
|
|||
|
### Suggestion chip example
|
|||
|
|
|||
|
<!-- no-catalog-start -->
|
|||
|
<!-- Need to add image -->
|
|||
|
<!-- no-catalog-end -->
|
|||
|
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
|
|||
|
|
|||
|
```html
|
|||
|
<style>
|
|||
|
:root {
|
|||
|
--md-suggestion-chip-container-shape: 0px;
|
|||
|
--md-suggestion-chip-label-text-font: system-ui;
|
|||
|
--md-sys-color-outline: #6f7979;
|
|||
|
--md-sys-color-on-surface: #191c1c;
|
|||
|
}
|
|||
|
</style>
|
|||
|
|
|||
|
<md-suggestion-chip label="Suggestion"></md-suggestion-chip>
|
|||
|
```
|
|||
|
|
|||
|
<!-- auto-generated API docs start -->
|
|||
|
|
|||
|
## API
|
|||
|
|
|||
|
|
|||
|
### MdChipSet <code><md-chip-set></code>
|
|||
|
|
|||
|
#### Properties
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Property | Attribute | Type | Default | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `chips` | | `Chip[]` | `undefined` | |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
### MdAssistChip <code><md-assist-chip></code>
|
|||
|
|
|||
|
#### Properties
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Property | Attribute | Type | Default | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `elevated` | `elevated` | `boolean` | `false` | |
|
|||
|
| `href` | `href` | `string` | `''` | |
|
|||
|
| `target` | `target` | `string` | `''` | |
|
|||
|
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
|||
|
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `label` | `label` | `string` | `''` | The label of the chip. |
|
|||
|
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
#### Events
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
### MdFilterChip <code><md-filter-chip></code>
|
|||
|
|
|||
|
#### Properties
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Property | Attribute | Type | Default | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `elevated` | `elevated` | `boolean` | `false` | |
|
|||
|
| `removable` | `removable` | `boolean` | `false` | |
|
|||
|
| `selected` | `selected` | `boolean` | `false` | |
|
|||
|
| `hasSelectedIcon` | `has-selected-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a filter chip has a `slot="selected-icon"` to avoid a Flash Of Unstyled Content. |
|
|||
|
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
|||
|
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `label` | `label` | `string` | `''` | The label of the chip. |
|
|||
|
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
|||
|
| `handleTrailingActionFocus` | | `() => void` | `undefined` | |
|
|||
|
| `ariaLabelRemove` | | `string` | `undefined` | |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
#### Events
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
|
|||
|
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
### MdInputChip <code><md-input-chip></code>
|
|||
|
|
|||
|
#### Properties
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Property | Attribute | Type | Default | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `avatar` | `avatar` | `boolean` | `false` | |
|
|||
|
| `href` | `href` | `string` | `''` | |
|
|||
|
| `target` | `target` | `string` | `''` | |
|
|||
|
| `removeOnly` | `remove-only` | `boolean` | `false` | |
|
|||
|
| `selected` | `selected` | `boolean` | `false` | |
|
|||
|
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
|||
|
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `label` | `label` | `string` | `''` | The label of the chip. |
|
|||
|
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
|||
|
| `handleTrailingActionFocus` | | `() => void` | `undefined` | |
|
|||
|
| `ariaLabelRemove` | | `string` | `undefined` | |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
#### Events
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
|
|||
|
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
### MdSuggestionChip <code><md-suggestion-chip></code>
|
|||
|
|
|||
|
#### Properties
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Property | Attribute | Type | Default | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `elevated` | `elevated` | `boolean` | `false` | |
|
|||
|
| `href` | `href` | `string` | `''` | |
|
|||
|
| `target` | `target` | `string` | `''` | |
|
|||
|
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
|
|||
|
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
|
|||
|
| `label` | `label` | `string` | `''` | The label of the chip. |
|
|||
|
| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
#### Events
|
|||
|
|
|||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
|
|||
|
| --- | --- | --- | --- | --- |
|
|||
|
| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
|
|||
|
|
|||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
|||
|
|
|||
|
<!-- auto-generated API docs end -->
|