Picklist

ln-picklist is applied to a dual-pane container via data-ln-picklist wrapping an available list (data-ln-picklist-list="available") and a selected list (data-ln-picklist-list="selected"). It listens for native change events on child checkboxes: checking an item moves its <li> into the selected list, while unchecking returns it to available. The native checkboxes directly govern DOM position and standard form submission (name/value) with zero hidden inputs, synthetic arrays, or state mirroring.

Why it is worth having at all: <select multiple> is hostile — it demands ctrl-clicking, gives no room to see what you picked, and loses the selection the moment the scroll position surprises you. A picklist puts the pool on the left and the choices on the right, both fully visible.

The component is deliberately tiny. The checkbox is the state. Its checked property and the list the <li> currently sits in are the same fact, and name/value carry the selection to the server natively — unchecked boxes are simply not submitted. There are no hidden inputs, no state attribute, and no JS mirror to keep in sync.

Everything else composes. Filtering is ln-search pointed at each list. Counts, empty states and bulk actions belong to the page or a coordinator. Ordering is ln-sortable. The component does one thing: it listens for change and moves the item.

For the full guide see the ln-picklist README.

Check an item and it moves right; uncheck it and it comes back. Type in either search box to narrow a long list — that is ln-search composed on top, not part of the component.

Serialized body

The form submits natively — no component JS is involved in producing this.

(submit to see the body)