Skip to content

List Item

Child component of List

API reference

Properties

Property	Attribute	Description	Type	Default
closable	closable	When `true`, a close button is added to the component.	`boolean`	`false`
closed	closed	When `true`, hides the component.	`boolean`	`false`
description	description	A description for the component. Displays below the label text.	`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.	`string`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`"both" \| "end" \| "start"`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`string`
label	label	The label text of the component. Displays above the description text.	`string`
messageOverrides		Use this property to override individual strings used by the component.	`Record<string, unknown>`
metadata		Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`.	`{ [x: string]: unknown; }`
open	open	deprecatedUse `expanded` prop 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`
unavailable	unavailable	When `true`, the component's content appears 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 label and description of the component.
content	A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
content-end	A slot for adding non-actionable elements after the label and description of the component.
actions-end	A slot for adding actionable `calcite-action` elements after the content of the component.
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	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`