Dual list selector

Dual list selector for lit-material: move items between available and chosen lists, with filters and full keyboard support.

8.1 KB gzipped
@lit-material/dual-list 0.2.0
Renders on the server

Example

Install

npm install @lit-material/dual-list @lit-material/tokens

import "@lit-material/dual-list";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-dual-list-selector>`

Picks a subset of a list by moving items between "Available" and "Chosen": project members, permissions, scopes, regions. items lists everything; selected holds the chosen values.

Properties

Property	Attribute	Type	Default	Description
`items`	`items`	`DualListItem[]`	`[]`	Every item, in display order.
`selected`	`selected`	`string[]`	`[]`	The chosen values.
`availableLabel`	`available-label`	`string`	`"Available"`
`chosenLabel`	`chosen-label`	`string`	`"Chosen"`
`filterable`	`filterable`	`boolean`	`false`	Adds a filter field above each list.
`disabled`	`disabled`	`boolean`	`false`

Events

Event	Description
`change`	After a move; `detail: { selected }`.

CSS parts

Part	Description
`pane`	Each side (header, filter, list).
`list`	Each listbox.
`option`	Each item.

CSS custom properties

Property	Description
`--lit-material-dual-list-height`	Height of each list (default `16rem`).

Source on GitHub npm