Pick List

Calcite Pick List is a view of available and immutable items used for selection.

Overview

Generally, Pick List provides the user with a way to browse and select items that will become operational in the interface. Additionally, Pick List has a filtering prop that leverages Calcite Filter.

Pick List does not provide sorting, adding, or removing as it is intended to represent an immutable list of items available, e.g. the fields of a table.

Populate Calcite Pick List with Calcite Pick List Item.

Usage

  • Provide browsing experience for items available for a particular setting
  • Provide single or multi-selection of items available for a particular setting

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

Accessibility

Keyboard navigation

KeyFunction
Arrow downMove focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the end
Arrow upMove focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the beginning
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

When true, disabled prevents interaction. This state shows items with lower opacity/grayed.

booleanA boolean property should be present, or not
truefalse
filterEnabledfilter-enabled

When true, an input appears at the top of the list that can be used by end users to filter items in the list.

booleanA boolean property should be present, or not
truefalse
filterPlaceholderfilter-placeholder

Placeholder text for the filter input field.

stringA custom string
undefined
headingLevelheading-level

Number at which section headings should start for this component.

typedChoose from a set of typed values
123456
loadingloading

When true, content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
multiplemultiple

Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items.

booleanA boolean property should be present, or not
truefalse
selectionFollowsFocusselection-follows-focus

When true and single-selection is enabled, the selection will change when navigating items via the keyboard.

booleanA boolean property should be present, or not
truefalse

Events

NameDescriptionDetail
calciteListChange

Emitted when any of the item selections have changed.

bubblescomposedcancelable
Map<string, HTMLCalcitePickListItemElement>

Methods

NameDescriptionSignatureReturns
getSelectedItems

Returns the currently selected items

getSelectedItems() => Promise<Map<string, HTMLCalcitePickListItemElement>>Promise<Map<string, HTMLCalcitePickListItemElement>>
setFocus

Sets focus on the component.

setFocus(focusId?: ListFocusId) => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.

menu-actions

A slot for adding a button + menu combo for performing actions like sorting.

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