Pick List Item

Overview

Sample

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

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
descriptiondescription

An optional description for this item. This will appear below the label text.

optional
stringA custom string
undefined
disableDeselectdisable-deselect

When false, the item cannot be deselected by user interaction.

booleanA boolean property should be present, or not
truefalse
disableddisabled

When true, the 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
intlRemoveintl-remove

Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.

stringA custom string
"Remove" (default)
labellabel

The main label for this item. This will appear next to the icon.

stringA custom string
undefined
metadata

Used to provide additional metadata to an item, primarily used when the parent list has a filter.

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

Set this to true to display a remove action that removes the item from the list.

optional
booleanA boolean property should be present, or not
truefalse
selectedselected

Set this to true to pre-select an item. Toggles when an item is checked/unchecked.

booleanA boolean property should be present, or not
truefalse
valuevalue

The item's associated value.

required
typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteListItemChange

Emitted whenever the item is selected or unselected.

bubblescomposedcancelable
{ item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; }
calciteListItemRemove

Emitted whenever the remove button is pressed.

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
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

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.