Value List Item
Calcite Value List provides a list of operational items in the interface.
Overview
Sample
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| description | description | An optional description for the list item that displays below the label text. | undefined | |
| disabled | disabled | When true, the list 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. | ||
| label | label | The main label for the list item. Appears next to the icon. | undefined | |
| metadata | Provides additional metadata to a list item. Primary use is for a filter on the parent list. | { [x: string]: unknown; } | ||
| nonInteractive | non-interactive | When true, prevents the content of the list item from user interaction. | truefalse | |
| removable | removable | When true, adds an action to remove the list item. | truefalse | |
| selected | selected | When true, preselects the list item. Toggles when an item is checked/unchecked. | truefalse | |
| value | value | The list item's associated value. | any |
Events
| Name | Description | Detail |
|---|---|---|
| calciteListItemRemove | Emits when the remove button is pressed. | void |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Set focus on the component. | setFocus() => Promise<void> | Promise<void> |
| toggleSelected | 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. |