104 lines
2.5 KiB
Markdown
104 lines
2.5 KiB
Markdown
|
---
|
||
|
|
productId: material-ui
|
||
|
|
title: React Chip component
|
||
|
|
components: Chip
|
||
|
|
githubLabel: 'scope: chip'
|
||
|
|
materialDesign: https://m2.material.io/components/chips
|
||
|
|
githubSource: packages/mui-material/src/Chip
|
||
|
|
---
|
||
|
|
|
||
|
|
# Chip
|
||
|
|
|
||
|
|
<p class="description">Chips are compact elements that represent an input, attribute, or action.</p>
|
||
|
|
|
||
|
|
Chips allow users to enter information, make selections, filter content, or trigger actions.
|
||
|
|
|
||
|
|
While included here as a standalone component, the most common use will
|
||
|
|
be in some form of input, so some of the behavior demonstrated here is
|
||
|
|
not shown in context.
|
||
|
|
|
||
|
|
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
|
|
||
|
|
## Basic chip
|
||
|
|
|
||
|
|
The `Chip` component supports outlined and filled styling.
|
||
|
|
|
||
|
|
{{"demo": "BasicChips.js"}}
|
||
|
|
|
||
|
|
## Chip actions
|
||
|
|
|
||
|
|
You can use the following actions.
|
||
|
|
|
||
|
|
- Chips with the `onClick` prop defined change appearance on focus, hover, and click.
|
||
|
|
- Chips with the `onDelete` prop defined will display a delete icon which changes appearance on hover.
|
||
|
|
|
||
|
|
### Clickable
|
||
|
|
|
||
|
|
{{"demo": "ClickableChips.js"}}
|
||
|
|
|
||
|
|
### Deletable
|
||
|
|
|
||
|
|
{{"demo": "DeletableChips.js"}}
|
||
|
|
|
||
|
|
### Clickable and deletable
|
||
|
|
|
||
|
|
{{"demo": "ClickableAndDeletableChips.js"}}
|
||
|
|
|
||
|
|
### Clickable link
|
||
|
|
|
||
|
|
{{"demo": "ClickableLinkChips.js"}}
|
||
|
|
|
||
|
|
### Custom delete icon
|
||
|
|
|
||
|
|
{{"demo": "CustomDeleteIconChips.js"}}
|
||
|
|
|
||
|
|
## Chip adornments
|
||
|
|
|
||
|
|
You can add ornaments to the beginning of the component.
|
||
|
|
|
||
|
|
Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.
|
||
|
|
|
||
|
|
### Avatar chip
|
||
|
|
|
||
|
|
{{"demo": "AvatarChips.js"}}
|
||
|
|
|
||
|
|
### Icon chip
|
||
|
|
|
||
|
|
{{"demo": "IconChips.js"}}
|
||
|
|
|
||
|
|
## Color chip
|
||
|
|
|
||
|
|
You can use the `color` prop to define a color from theme palette.
|
||
|
|
|
||
|
|
{{"demo": "ColorChips.js"}}
|
||
|
|
|
||
|
|
## Sizes chip
|
||
|
|
|
||
|
|
You can use the `size` prop to define a small Chip.
|
||
|
|
|
||
|
|
{{"demo": "SizesChips.js"}}
|
||
|
|
|
||
|
|
## Multiline chip
|
||
|
|
|
||
|
|
By default, Chips displays labels only in a single line.
|
||
|
|
To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles.
|
||
|
|
|
||
|
|
{{"demo": "MultilineChips.js"}}
|
||
|
|
|
||
|
|
## Chip array
|
||
|
|
|
||
|
|
An example of rendering multiple chips from an array of values.
|
||
|
|
Deleting a chip removes it from the array. Note that since no
|
||
|
|
`onClick` prop is defined, the `Chip` can be focused, but does not
|
||
|
|
gain depth while clicked or touched.
|
||
|
|
|
||
|
|
{{"demo": "ChipsArray.js"}}
|
||
|
|
|
||
|
|
## Chip playground
|
||
|
|
|
||
|
|
{{"demo": "ChipsPlayground.js", "hideToolbar": true}}
|
||
|
|
|
||
|
|
## Accessibility
|
||
|
|
|
||
|
|
If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (for example when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
|