Value List Item

Calcite Value List provides a list of operational items in the interface.

Overview

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-value-list-item
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
descriptiondescription

An optional description for the list item that displays below the label text.

optional
stringA custom string
undefined
disableddisabled

When true, the list item cannot be clicked and is visually muted.

booleanA boolean property should be present, or not
truefalse
iconicon

Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.

optional
typedChoose from a set of typed values
View documentation
labellabel

The main label for the list item. Appears next to the icon.

required
stringA custom string
undefined
metadata

Provides additional metadata to a list item. Primary use is for a filter on the parent list.

optional
typedChoose from a set of typed values
{ [x: string]: unknown; }
nonInteractivenon-interactive

When true, prevents the content of the list item from user interaction.

booleanA boolean property should be present, or not
truefalse
removableremovable

When true, adds an action to remove the list item.

booleanA boolean property should be present, or not
truefalse
selectedselected

When true, preselects the list item. Toggles when an item is checked/unchecked.

booleanA boolean property should be present, or not
truefalse
valuevalue

The list item's associated value.

required
typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteListItemRemove

Emits when the remove button is pressed.

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
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

NameDescription
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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.