Chip
Chips help people enter information, make selections, filter content, or trigger actions.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | No | — | The label is the text that is displayed on the chip. |
transition | { duration?: number; } & Transition | No | — | Motion timing for the selection colour change. Defaults to 0.3s. It lived only on the React adapter, so the Angular chip's selection snapped where React's faded. |
variant | ChipVariant | No | 'outlined' | The chip variant determines the style. |
disabled | boolean | No | false | Disables the chip if set to true. |
icon | Icon | No | — | An optional icon to display in the chip. |
selected | boolean | No | — | Controlled selected state. |
defaultSelected | boolean | No | — | Initial selected state when the chip is uncontrolled. |
onSelectedChange | (selected: boolean) => void | No | — | Notifies selection requests in controlled and uncontrolled modes. |
onRemove | () => void | No | — | Requests removal of this chip. |
draggable | boolean | No | false | Enable native drag and drop on the chip. |
editable | boolean | No | — | Enables inline label editing, used by `Chips` in input mode. |
editing | boolean | No | — | Controlled edition state (the resolved value lives in `states.isEditing`). |
onEditStart | () => void | No | — | Requests editing, for example after a double-click, Enter, or F2. |
onEditCommit | (nextLabel: string) => void | No | — | Commits editing with the normalized label. |
onEditCancel | () => void | No | — | Cancels editing and restores the previous label. |
onChange | (nextLabel: string) => void | No | — | Fires whenever the editable label changes. |
href | string | No | — | Navigation destination; switches the chip to a native link. |