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. | true false | |
disabled | disabled | When true, the item cannot be clicked and is visually muted. | true false | |
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. | true false | |
selected | selected | Set this to true to pre-select an item. Toggles when an item is checked/unchecked. | true false | |
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. |