List

Calcite List is a general purpose list to construct list items.

Overview

Lists can be grouped, and leverage slots to include actionable or supplemental elements, such as Actions and Icons. Their heading levels can be set to ensure consistent hierarchy in an application.

For a list of selectable items, use Calcite Pick List. For sorting or removing items in a list, use Calcite Value List.

Usage

  • Format a series of line items
  • Grouping line items

Sample

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

API reference

calcite-list
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

When true, prevents user interaction.

booleanA boolean property should be present, or not
truefalse
headingLevelheading-level

Number at which section headings should start for the list.

typedChoose from a set of typed values
123456

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-list-item` elements.

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