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
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow down | Move 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 up | Move 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 |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | truefalse | |
| filterEnabled | filter-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. | truefalse | |
| filterPlaceholder | filter-placeholder | Placeholder text for the filter input field. | undefined | |
| headingLevel | heading-level | Number at which section headings should start for this component. | 123456 | |
| loading | loading | When true, content is waiting to be loaded. This state shows a busy indicator. | truefalse | |
| multiple | multiple | 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. | truefalse | |
| selectionFollowsFocus | selection-follows-focus | When true and single-selection is enabled, the selection will change when navigating items via the keyboard. | truefalse |
Events
| Name | Description | Detail |
|---|---|---|
| calciteListChange | Emitted when any of the item selections have changed. | Map<string, HTMLCalcitePickListItemElement> |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| 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
| Name | Description |
|---|---|
| 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. |