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. | true false | |
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. | true false | |
removable | removable | When true, adds an action to remove the list item. | true false | |
selected | selected | When true, preselects the list item. Toggles when an item is checked/unchecked. | true false | |
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. |