List Item | Calcite Design System | Esri Developer

Child component of List

API reference

Properties

Property	Attribute	Description	Type	Default
closable	closable	When `true`, displays a close button in the component.	`boolean`	`false`
closed	closed	When `true`, hides the component.	`boolean`	`false`
description	description	Specifies a description for the component. Displays below the `label`.	`string`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
dragDisabled	drag-disabled	When `true`, the item is not draggable.	`boolean`	`false`
expanded	expanded	When `true`, expands the component and its contents.	`boolean`	`false`
iconEnd	icon-end	Specifies an icon to display at the end of the component.	`IconName`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`FlipContext`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`IconName`
label	label	Specifies an accessible label for the component, displays above the `description`.	`string`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
metadata		Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`.	`Record<string, unknown>`
open	open	deprecatedin v3.1.0, removal target v6.0.0 - Use the `expanded` property instead. When `true`, the item is open to show child components.	`boolean`	`false`
selected	selected	When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or` "multiple"`, the component is selected.	`boolean`	`false`
sortHandleOpen	sort-handle-open	When `true`, displays and positions the sort handle.	`boolean`	`false`
topLayerDisabled	top-layer-disabled	When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.	`boolean`	`false`
unavailable	unavailable	When `true`, the component's content displays as inactive.	`boolean`	`false`
value	value	The component's value.	`any`

Slots

Name	Description
default (unnamed)	A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements.
actions-start	A slot for adding actionable `calcite-action` elements before the content of the component.
content-start	A slot for adding non-actionable elements before the component's `label` and `description`.
content	A slot for adding non-actionable, centered content in place of the component's `label` and `description`.
content-end	A slot for adding non-actionable elements after the component's `label` and `description`.
actions-end	A slot for adding actionable `calcite-action` elements after the component's content.
content-bottom	A slot for adding content below the component's `label` and `description`.

Styles

Name	Description
--calcite-list-background-color-hover	Specifies the component's background color when hovered.
--calcite-list-background-color-press	Specifies the component's background color when pressed.
--calcite-list-background-color	Specifies the component's background color.
--calcite-list-border-color	Specifies the component's border color.
--calcite-list-content-text-color	Specifies the content color.
--calcite-list-description-text-color	Specifies the `description` color.
--calcite-list-icon-color	Specifies the component's icon color.
--calcite-list-label-text-color	Specifies the `label` color.
--calcite-list-selection-border-color	Specifies the component's selection border color.

Events

Name	Description	Behavior
calciteListItemClose	Fires when the close button is clicked.	bubblescomposed
calciteListItemCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteListItemExpand	Fires when the component's content area is expanded.	bubblescomposed
calciteListItemSelect	Fires when the component is selected.	bubblescomposed
calciteListItemSortHandleBeforeClose	Fires when the sort handle is requested to be closed and before the closing transition begins.	bubblescomposed
calciteListItemSortHandleBeforeOpen	Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.	bubblescomposed
calciteListItemSortHandleClose	Fires when the sort handle is closed and animation is complete.	bubblescomposed
calciteListItemSortHandleOpen	Fires when the sort handle is open and animation is complete.	bubblescomposed
calciteListItemToggle	Fires when the open button is clicked.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`