`<dj-list>`

A single-select list, or a menu, built from options.

Coming from Dojo's Listbox? Use this component: it has the listbox role and keyboard model that Listbox had. The list is form-associated and submits value.

Try it in the playground

@dojo-ng/list · v0.1.2

npm install @dojo-ng/list

import "@dojo-ng/list";

Keyboard

The list is one tab stop (the active-descendant pattern).

The arrow keys, Home, and End move the active item.
Enter or Space selects it.

Options

menu switches the roles to menu and menuitem.
loading shows a spinner.

Reordering

With reorderable, items can be dragged with a pointer or touch, or moved with the keyboard: Space to grab, the arrow keys to move, Space to drop, and Escape to cancel.
Reordering is controlled: the list emits dj-reorder, and you reorder options.

Not built

Virtualization for very long lists.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Properties

Property	Attribute	Type	Default
`options`	`options`	`ListOption[]`	`[]`
`value`	`value`	`string`	`""`
`name`	`name` reflected	`string`	None
`label`Accessible name for the list/menu container (sets `aria-label` on the listbox/menu, which otherwise has no accessible name). Mirrors dj-text-input's `label` approach.	`label`	`string`	None
`menu`	`menu`	`boolean`	`false`
`loading`	`loading`	`boolean`	`false`
`reorderable`Progressive enhancement: allow pointer/keyboard reordering of items. Controlled — the list emits `dj-reorder` and never mutates `options` itself.	`reorderable` reflected	`boolean`	`false`

Events

changedj-reorder

CSS parts

Style these with dj-list::part(name).

listitemdrop-indicator

Methods

Method	Description
`checkValidity(): boolean`
`focus(options: FocusOptions)`
`moveActive(delta: 1 \| -1)`	Move the highlighted (active) option by one selectable step, wrapping; skips disabled items and dividers.
`activateFirst()`	Highlight the first selectable option (skipping disabled items and dividers); clears the highlight if none.
`chooseActive(): boolean`	Select the active option, firing the normal `change`. Returns false and fires nothing if none is active.

Types

The types that the properties above use, as they are declared in the source.

`ListOption`

export interface ListOption { value: string; label: string; disabled?: boolean; divider?: boolean; }