Pick List Item
Overview
Sample
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| description | description | An optional description for this item. This will appear below the label text. | undefined | |
| disableDeselect | disable-deselect | When false, the item cannot be deselected by user interaction. | truefalse | |
| disabled | disabled | When true, the item cannot be clicked and is visually muted. | truefalse | |
| icon | icon | Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. | ||
| intlRemove | intl-remove | Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true. | "Remove" (default) | |
| label | label | The main label for this item. This will appear next to the icon. | undefined | |
| metadata | Used to provide additional metadata to an item, primarily used when the parent list has a filter. | { [x: string]: unknown; } | ||
| removable | removable | Set this to true to display a remove action that removes the item from the list. | truefalse | |
| selected | selected | Set this to true to pre-select an item. Toggles when an item is checked/unchecked. | truefalse | |
| value | value | The item's associated value. | any |
Events
| Name | Description | Detail |
|---|---|---|
| calciteListItemChange | Emitted whenever the item is selected or unselected. | { item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; } |
| calciteListItemRemove | Emitted whenever the remove button is pressed. | void |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
| toggleSelected | Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. | toggleSelected(coerce?: boolean) => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| actions-end | a slot for adding actions or content to the end side of the item. |
| actions-start | a slot for adding actions or content to the start side of the item. |